Skip to main content
SimilarExport ZIP
100%

Selecting a Year on a Line Chart

✓ Published1🌍 Public
Ggcappadaniel
Last edited Jun 3, 2020
Created on Jun 3, 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
MIT Licensed

Similar vizzes

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
100% 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
100% 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 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
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
94% match
Loading thumbnail…

Selecting a Year on a Line Chart

This example shows population trends over time for global regions, with a vertical line marking the currently selected year. Users can move their mouse across the chart to update the selection, which re-renders the visualization and adjusts the year indicator. The visualization uses d3.csv to load UN population estimates, d3.nest to group data by region, and d3.line with curveBasis to draw the smoothed paths. A d3.axisBottom and d3.axisLeft provide the axes, while an SVG rect with a mousemove handler captures pointer position and applies d3.mouse to invert the x-scale and determine the hovered year.

Ggcappadaniel
94% match
Loading thumbnail…

Selecting a Year on a Line Chart

This line chart visualizes population trends over time by region, sourced from UN population estimates and medium-variant projections (1950–2100). A vertical line highlights the currently selected year, which users change by hovering anywhere on the chart, triggering a re-render via `setSelectedYear`. The chart uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` with `d3.curveBasis` for smooth paths, and a categorical color legend built from `d3.schemeCategory10`. A semi-transparent rectangle captures `mousemove` events to invert the mouse position back to a date with `xScale.invert`.

Wwishcsdev
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