Selecting a Year on a Line Chart

100%

Selecting a Year on a Line Chart

✓ Published0🌍 Public

Last edited Oct 29, 2018

Created on Oct 29, 2018

Forked from 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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Selecting a Year on a Line Chart

This interactive line chart visualizes population trends over time by region, with a focus on a selected year. The visualization displays multiple region lines and a movable vertical line; as the user moves the mouse across the chart, the selected year is updated and crosshairs track the cursor. Data is sourced from UN population estimates, and the chart is built with D3 v5, specifically using `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `curveBasis`. The rendering uses SVG and includes a color legend. Interaction is handled via an overlay rectangle’s `mousemove` event, which inverts the D3 scales to update the selection.

AAnShed

96% 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

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

96% 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 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 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

95% match

Loading thumbnail…

Selecting a Year on a Line Chart

A line chart displays population trends over time for global regions, with an interactive vertical line marking a selected year. Users hover over the chart to update the selection, which shifts the line and highlights the corresponding data point. The visualization uses d3.line, d3.scaleTime, d3.scaleLinear, and d3.nest to group data from UN population estimates, rendered as SVG paths with a color legend.

Bbprokopowicz

95% match

Loading thumbnail…

Selecting a Year on a line chart

This interactive line chart displays population changes over time for multiple world regions, using a vertical black line to mark a user-selected year. Moving the mouse across the chart updates the selected year, which is reflected in the line’s position. The visualization is built with D3 v5, using `d3.line` for the paths, `d3.axisBottom` and `d3.axisLeft` for axes, and a `mousemove` event listener on a transparent overlay rect to trigger year changes. Data comes from UN population estimates and medium variant projections, rendered as SVG.

NNeepaB

95% match