Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Selecting a Year on a Line Chart

Public visualization

Viewing a saved revision (read-only)

fda57cf0ea074ffb9bc8376862fc037e

Selecting a Year on a Line Chart

0 stars0🌍 Public
Ggcappadaniel
Last edited Sep 17, 2020
Created on Sep 17, 2020

This example shows population trends over time for global regions, with a vertical line marking the currently selected year. Users can move their mouse across the chart to update the selection, which re-renders the visualization and adjusts the year indicator. The visualization uses d3.csv to load UN population estimates, d3.nest to group data by region, and d3.line with curveBasis to draw the smoothed paths. A d3.axisBottom and d3.axisLeft provide the axes, while an SVG rect with a mousemove handler captures pointer position and applies d3.mouse to invert the x-scale and determine the hovered year.

AI-generated description