Skip to main content
SimilarExport ZIP
100%

Selecting a Year on a Line Chart

✓ Published0🌍 Public
Wwishcsdev
Last edited Apr 9, 2019
Created on Apr 3, 2019

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`.

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

Selecting a Year on a Line Chart

This visualization displays population trends over time for global regions, with a vertical line marking the currently selected year. Users can hover over the chart to change the selection, which updates the highlighted year. The chart uses D3 v5 with SVG rendering, employing scales like `scaleTime` and `scaleLinear` for axes, and `d3.line` with `curveBasis` for smooth paths. Data comes from UN population estimates and medium variant projections, processed via `d3.csv` and `d3.nest`. A custom color legend shows region names, and the selection uses mouse events to update the year.

FflexKeks
95% match
Loading thumbnail…

Selecting a Year on a Line Chart

This interactive line chart displays population over time by global region, compiled from UN population estimates and medium-variant projections. A vertical line marks the currently selected year, which the viewer can change by moving the mouse over the chart. The visualization uses `d3.line` with basis curves for each region’s series, colored via an ordinal scale. The `mouse` utility captures pointer position to update the selected year, triggering a re-render that redraws the selection line and axis. The SVG is rendered using D3’s selection API, with axes, labels, and a legend generated programmatically.

Rrigt
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

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