Selecting a Year on a Line Chart

100%

Selecting a Year on a Line Chart

✓ Published0🌍 Public

Last edited Nov 24, 2018

Created on Nov 24, 2018

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

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 for world regions, using a vertical grey line to highlight a selected year (2021). The chart is rendered with SVG, and the code uses d3.scaleTime, d3.scaleLinear, d3.line with curveBasis, and d3.nest to group data by region. A transparent rectangle covers the plot area, and its mousemove event uses d3.mouse and xScale.invert to log the year under the cursor. Data comes from the UN population estimates and medium variant CSV datasets, processed with d3.csv and d3.timeParse.

BBKirst3

95% match

Loading thumbnail…

Selecting a Year on a Line Chart

This interactive line chart displays population over time for different world regions, with a vertical line marking the currently selected year. Users can hover anywhere on the chart to update the selection and the line position. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis`, plus `nest` for grouping data by region. The visualization renders as SVG and loads UN population estimates from CSV files, using `mouse` events to trigger selection updates.

SSuman Choudhary

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 line chart shows population growth over time for multiple regions, with a vertical line marking a selected year. Users can move the mouse across the chart to select a different year, which updates the line’s position. The visualization uses D3 v5 to render SVG elements, including axes, line paths with a curve basis, and a color legend. Population data is sourced from UN estimates and medium-variant projections, processed from CSV files. The chart includes interactive mouse events and uses D3’s `scaleTime` and `scaleLinear` for axes.

Ccornshoots

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 line chart shows population over time for different world regions, with a vertical line marking a selected year. Users can hover over the chart to change the selected year, which adjusts the line's position. The visualization uses D3.js v5 to render SVG elements, including a color legend, axes, and multiple line paths. It also employs D3's scale functions, line generator, and mouse event handling to update the chart dynamically based on the United Nations population dataset.

CCarloWK1202

94% match

Loading thumbnail…

Selecting a Year on Line Chart

A line chart shows population change from 1950 to 2100 across world regions, with a vertical black line marking a user-selected year. Clicking or dragging on the chart updates the line position, and hovering triggers the same interaction. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, `curveBasis`, and `nest`, plus a custom `colorLegend`. Data comes from UN population estimates and medium variant projections, loaded via D3's `csv` function and processed with `melt` to reshape the data into tidy format.

KKazushige Okuma

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

94% match