Skip to main content
SimilarExport ZIP
100%

Selecting a Year on a Line Chart

✓ Published0🌍 Public
LLongYuu
Last edited Nov 29, 2020
Created on Nov 29, 2020

Multiple colored lines trace regional population changes from 1950 to 2100, using data from the UN Population Estimates and Medium Variant datasets. A vertical black line marks the currently selected year, which updates when the user hovers over the chart via a mouse-interceptor rectangle that calls `setSelectedYear` with `xScale.invert`. The chart uses d3.scaleTime, d3.scaleLinear, d3.line with curveBasis, and d3.axisLeft/axisBottom; a separate color legend built with `colorLegend.js` identifies each region.

AI-generated description
MIT Licensed

Similar vizzes

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

A line chart displays population estimates and projections for world regions from 1950 to 2100, sourced from UN population data. Moving the mouse across the chart updates a vertical black line marking the selected year, with each region’s line colored via a categorical scale. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `line` with `curveBasis`, and `nest` to group data, while mouse interaction relies on `mouse` and `xScale.invert`. A custom `colorLegend` component renders the color key.

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

Selecting a Year on a Line Chart

This interactive visualization displays UN population estimates and projections by global region from 1950 to 2100 as a multi-line chart, with color-coded lines sorted by final population. A vertical line marks the currently selected year, which updates as the user moves the mouse across the chart, triggering a re-render that highlights the selected position. The implementation uses d3.scaleTime and d3.scaleLinear for axes, d3.nest for grouping data by region, and d3.line with curveBasis for smooth paths. A custom colorLegend component renders the categorical d3.schemeCategory10 scale, while the mouse interceptor uses d3.mouse to detect cursor position and update the selection.

AAnne Kerr
93% 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
92% 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
92% match
Loading thumbnail…

Selecting a Year on a Line Chart

Lines show U.N. population estimates and projections by global region from 1950 to 2100, colored with a categorical scale. Hovering over the chart updates a vertical line marking the selected year, and the visualization redraws accordingly. The code uses d3.csv, d3.nest, d3.line, d3.scaleTime, d3.scaleLinear, and d3.axisBottom to render SVG paths and axes. A legend built with d3.scaleOrdinal and custom colorLegend.js shows region colors.

HHernanls
92% match
Loading thumbnail…

Selecting a Year on a Line Chart

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.

ZZ-Richard
92% match