Selecting a Year on a Line Chart
✓ Published2🌍 Public
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 descriptionMIT Licensed