Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Selecting a Year on a Line Chart

Public visualization

Selecting a Year on a Line Chart

0 stars0🌍 Public
RRyan Malone
Last edited Aug 7, 2019
Created on Aug 7, 2019

This line chart displays global population trends by region from 1950 to 2100, with a draggable mouse interaction that updates a selected year to highlight a specific time point. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `nest` to organize data, while a custom `lineChart` module renders SVG paths with `d3.line` and `curveBasis`. A brush-like `rect` element captures `mousemove` events to invert the x-scale and trigger year selection. Data comes from UN population estimates, with a color legend built via a reusable `colorLegend` function.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed