Skip to main content
100%

Selecting a Year on a Line Chart

✓ Published2🌍 Public
AAnne Kerr
Last edited Jul 13, 2019
Created on Jul 13, 2019

This interactive visualization displays UN population estimates and projections by global region from 1950 to 2100 as a multi-line chart, with color-coded lines sorted by final population. A vertical line marks the currently selected year, which updates as the user moves the mouse across the chart, triggering a re-render that highlights the selected position. The implementation uses d3.scaleTime and d3.scaleLinear for axes, d3.nest for grouping data by region, and d3.line with curveBasis for smooth paths. A custom colorLegend component renders the categorical d3.schemeCategory10 scale, while the mouse interceptor uses d3.mouse to detect cursor position and update the selection.

AI-generated description
MIT Licensed

Similar vizzes