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 stars1🌍 Public
Ggcappadaniel
Last edited Sep 17, 2020
Created on Sep 17, 2020

This example shows a line chart of population over time by region, with a vertical line marking a selected year that updates as the mouse moves across the chart. The chart uses d3.line with curveBasis to draw the paths, d3.nest to group data by region, and a mouse-interceptor rectangle to detect hover position, calling setSelectedYear via d3.mouse. Data comes from UN population estimates CSV files, merged from two sources for years 1950–2100, and is rendered with SVG. A color legend is included using a custom colorLegend module.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed