Skip to main content
SimilarExport ZIP
100%

Selecting a year on a line chart

✓ Published0🌍 Public
MMatthiasVanCampen
Last edited Mar 3, 2020
Created on Feb 14, 2020

This line chart visualizes population estimates and projections for world regions from 1950 to 2100, using data from the UN Population Estimates and Medium Variant datasets. A vertical line marks the currently selected year, and moving the mouse across the chart updates this selection, with the year recomputed from the mouse position via the x-scale’s inverse mapping. The chart is built with D3 v5, using SVG rendering, scales, axes, and a basis-curve line generator, while a custom legend assigns colors to regions through a categorical ordinal scale.

AI-generated description
MIT Licensed

Similar vizzes

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

Selecting a Year on a Line Chart

This line chart shows population estimates and projections over time for global regions from 1950 to 2100. A vertical black line marks the currently selected year, which changes dynamically as the user moves the mouse across the chart. The visualization uses d3.line with curveBasis for smooth paths, d3.scaleTime and d3.scaleLinear for axes, and d3.mouse to detect hover position, triggering a re-render with the new year. Data comes from UN population estimates and medium-variant projections, rendered as SVG with a categorical color legend.

RRajib Kumar Chanda
95% match
Loading thumbnail…

Selecting a year on line chart

This line chart displays world population estimates by region from 1950 to 2100, using data from the UN Population Estimates and Medium Variant datasets. A vertical line marks the currently selected year, which updates as the user moves the mouse across the chart. The visualization is built with D3 v5, using `d3.nest` to group data by region, `d3.line` with `curveBasis` for smooth paths, and `d3.axisBottom` and `d3.axisLeft` for axes. Hovering triggers `d3.mouse` and `xScale.invert` to detect the year, then re-renders the selection line.

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

Selecting a Year on a Line Chart

This line chart displays population estimates and projections for global regions from 1950 to 2100, using data from the UN Population Estimates. A vertical black line marks the currently selected year, which updates when the user moves the mouse across the chart. The visualization uses d3.scaleTime, d3.scaleLinear, d3.nest, and d3.line with curveBasis to render the paths. A color legend built with custom SVG elements identifies each region. The mouse interceptor rect calls setSelectedYear on mousemove to change the highlighted year.

PPotikorn
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…

D3 Selecting a Year on a Line Chart

An interactive line chart displays UN population estimates and projections from 1950 to 2100 for global regions, with a vertical line marking the currently selected year. Moving the mouse across the chart updates the selected year, repositioning the line and highlighting the population values at that moment. The visualization uses d3.line, d3.scaleTime, and d3.scaleLinear for rendering, with a mouse interceptor rectangle capturing pointer events and d3.mouse to convert pixel positions back into dates. A color legend encodes region identities, and the chart is built with SVG elements and D3's data-join pattern.

Rrdeichert
94% match