Skip to main content
SimilarExport ZIP
100%

Selecting a Year on a Line Chart

✓ Published0🌍 Public
ZZ-Richard
Last edited Jun 23, 2020
Created on Jun 22, 2020

This example shows population trends for world regions from 1950 to 2100 as multiple colored line paths. A black vertical line marks the currently selected year, which updates as the user moves the mouse across the chart. The visualization uses d3.nest, d3.scaleTime, d3.scaleLinear, and d3.line with curveBasis to render the SVG paths, while a custom color legend sorts regions by their final population. Data comes from two UN population estimate CSV files merged in loadAndProcessData.

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

Selecting a Year on a Line Chart

This line chart visualizes projected global population by region from 1950 to 2100, using UN population estimates and medium-variant projections. A vertical black line marks a selected year, and moving the mouse across the chart updates the selection, re-rendering the visualization. The code uses d3.scaleTime, d3.scaleLinear, d3.line with curveBasis, and d3.nest for grouping, with SVG rendering and a color legend. Data is loaded via d3.csv from two datasets and processed through a custom melt function.

Ggabcoderboi
94% match
Loading thumbnail…

Selecting a Year on a Line Chart

This line chart displays global population trends for regions from 1950 to 2100, with a movable vertical line that lets the user select a specific year. The chart highlights population values for that chosen year via circles on each regional line, with a color legend identifying each region. Built with D3 v5, the visualization uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG chart. Data comes from UN population estimates and medium variant projections, loaded via `csv` and processed through `nest` and `melt` functions. Hover interactions are handled by the `mouse` callback on an invisible rectangle.

FflexKeks
94% match
Loading thumbnail…

Selecting a Year on a Line Chart

This visualization shows UN population estimates and projections from 1950 to 2100 for world regions as multi-line charts, with a movable vertical line that selects a year. Moving the mouse across the chart updates the selected year, which is rendered as a black vertical line. The chart uses D3 v5 with SVG rendering, employing `d3.line` with `curveBasis` for smooth paths, `d3.nest` to group data by region, and `d3.scaleTime` and `d3.scaleLinear` for axes. A custom color legend maps regions using `d3.scaleOrdinal` with `schemeCategory10`.

Kkbriggs1
94% match
Loading thumbnail…

Selecting a Year on a Line Chart

This line chart displays population trends over time for global regions, using United Nations population estimates from 1950 to 2100. A movable vertical line marks the currently selected year, and moving the mouse across the chart updates the selection to the nearest year, re-rendering the visualization. The chart uses d3.line with curveBasis for smooth paths, d3.scaleTime and d3.scaleLinear for axes, and d3.nest to group data by region. A separate color legend identifies each region, with SVG rendering and d3.mouse handling for interaction.

Rroxannekim
94% match
Loading thumbnail…

Selecting a Year on a Line Chart

This line chart shows UN population estimates and projections from 1950 to 2100 for world regions, with a vertical black line marking the currently selected year. Users can hover anywhere on the chart to update the selected year, which is highlighted by the line. The visualization uses D3 v5 with d3.nest() to group data by region, d3.scaleTime() and d3.scaleLinear() for axes, and SVG line paths with a curveBasis interpolation. A color legend and axis labels are also rendered, with data loaded from two CSV files.

Ffbudwill
94% 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
93% match