Skip to main content
SimilarExport ZIP
100%

Selecting a Year on a Line Chart

✓ Published0🌍 Public
Eedxiao97
Last edited Sep 30, 2019
Created on Sep 30, 2019

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.

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 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
96% 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
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
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
95% match
Loading thumbnail…

Selecting a Year on a Line Chart

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.

Ppplomith
95% match
Loading thumbnail…

Selecting a Year on a Line Chart

This visualization shows population trends over time for global regions, with a vertical line marking the currently selected year. Users can move the mouse across the chart to select a different year, updating the line’s position. The line chart uses d3.scaleTime, d3.scaleLinear, d3.line, and d3.curveBasis for rendering, while d3.nest groups data by region. A d3.Ordinal scale with schemeCategory10 colors each line, and a custom colorLegend component displays the categories. Data comes from UN population estimates and medium variant projections, processed with d3.csv and d3.timeParse.

Jjeelong
95% match
Loading thumbnail…

Selecting a Year on a Line Chart

This interactive line chart visualizes population trends over time for global regions, with a mouse-driven vertical line denoting the currently selected year. Moving the cursor across the chart dynamically updates the blue selection line, highlighting population values at that moment. The visualization uses D3 v5 with SVG rendering, employing `d3.nest` to group data, `d3.scaleTime` and `d3.scaleLinear` for axes, and a custom `colorLegend` module for categorical color encoding. Data comes from UN population estimates and medium-variant projections, spanning 1950 to 2100.

CCurran Kelleher
94% match