Skip to main content
SimilarExport ZIP
100%

Selecting a Year on a Line Chart

✓ Published0🌍 Public
Ppplomith
Last edited Apr 24, 2021
Created on Apr 7, 2021

This example shows a multi-line chart of population over time for world regions, with an interactive vertical line that lets users select a specific year. Moving the mouse across the chart updates the selected year, demonstrating how user input can drive state changes in a visualization. The code uses d3.nest to group data, d3.scaleTime and d3.scaleLinear for axes, and a custom colorLegend function with d3.scaleOrdinal. It loads UN population estimates from CSVs and renders the chart as SVG with d3.line and curveBasis.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Selecting a Year on a Line Chart

This example shows a multi-line chart tracking population over time for different world regions, with a vertical black line marking a selected year. Moving the mouse across the chart updates the selected year by inverting the x-scale position, and a color legend identifies each region. The visualization uses d3.line with curveBasis for the smoothed paths, d3.scaleTime and d3.scaleLinear for axes, and d3.nest to group the data by region. Population data comes from UN estimates and medium variant projections, rendered as SVG.

Mmatt-hooper
96% match
Loading thumbnail…

Selecting a Year on a Line Chart

This example shows population trends over time by region, with a vertical line marking the currently selected year. Moving the mouse along the chart updates the selection and redraws the visualization. The multi-line chart uses d3.line with curveBasis, while d3.nest groups data by region and d3.scaleOrdinal assigns colors. A legend, built with custom SVG code, displays color mappings. The data comes from UN population estimates processed in loadAndProcessData.js, combining medium variant projections for 2015-2100 with historical estimates.

Eedxiao97
95% match
Loading thumbnail…

Selecting a Year on a Line Chart

This example shows a line chart of population over time for world regions, using a vertical grey line to highlight a selected year (2021). The chart is rendered with SVG, and the code uses d3.scaleTime, d3.scaleLinear, d3.line with curveBasis, and d3.nest to group data by region. A transparent rectangle covers the plot area, and its mousemove event uses d3.mouse and xScale.invert to log the year under the cursor. Data comes from the UN population estimates and medium variant CSV datasets, processed with d3.csv and d3.timeParse.

BBKirst3
95% match
Loading thumbnail…

Selecting a Year on a Line Chart

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.

Ggcappadaniel
94% match
Loading thumbnail…

Selecting a Year on a Line Chart

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.

Ggcappadaniel
94% match
Loading thumbnail…

Selecting a Year on a Line Chart

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.

Ggcappadaniel
94% match
Loading thumbnail…

Selecting a Year on a Line Chart

A line chart shows population over time for world regions, with a movable vertical line for selecting a specific year. Users drag the mouse across the chart, which updates the selected year and redraws the line. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `line`, `curveBasis`, `nest`, `axisLeft`, `axisBottom`, and `mouse`. Data comes from two CSV files (UN population estimates and medium variant) parsed with `timeParse`, and the chart renders as SVG with a color legend using `scaleOrdinal`.

SStaticAG
94% match
Loading thumbnail…

Selecting a Year on a Line Chart

This interactive line chart visualizes population trends over time by region, with a vertical black line indicating the currently selected year. Moving the mouse across the chart updates the selected year, repositioning the line and reflecting the change in the visualization. The chart uses d3.scaleTime and d3.scaleLinear to map data, d3.line with curveBasis for the paths, and d3.nest to group data by region. Data comes from UN population estimates and medium variant projections, rendered as an SVG using D3 v5.

Jjons288
94% match