Skip to main content
SimilarExport ZIP
100%

Selecting a Year on a Line Cart

✓ Published0🌍 Public
Bblkhar
Last edited May 8, 2020
Created on May 8, 2020

This interactive line chart displays population projections from 1950 to 2100 for different world regions, differentiated by color. A vertical black line marks the currently selected year, and hovering over the chart updates this selection. The visualization uses D3 v5 APIs such as `scaleTime`, `axisBottom`, and `line` to render the data, sourced from CSV files for historical estimates and medium-variant projections.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Selecting a year on a line chart

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.

MMatthiasVanCampen
92% match
Loading thumbnail…

Selecting a Year on a Line Chart

This line chart visualizes population over time for different world regions, from 1950 to 2100, using a dashed vertical line to mark a user-selected year. Hovering over the chart updates the selection, which re-renders the visualization. The code employs D3 v5's `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line`, and `nest` APIs, with SVG rendering. Data is loaded from UN population estimate and medium-variant CSV files, processed via a custom melt function that filters region names.

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

Fork of Selecting a Year on a Line Chart

This interactive line chart displays population estimates and projections for world regions from 1950 to 2100. Users can hover over the chart to select a specific year, which draws a vertical black line and updates the selected year used for sorting the color-coded legend. The visualization uses d3.line with curveBasis for smoothed paths, d3.scaleTime and d3.scaleLinear for axes, and a d3.mouse event handler to trigger year selection. Data comes from UN population estimates loaded via d3.csv.

Aabhimanyu-dhar
92% match
Loading thumbnail…

Selecting a Year on a Line Chart

This line chart displays global population trends for regions from 1950 to 2100, with a movable vertical line that lets the user select a specific year. The chart highlights population values for that chosen year via circles on each regional line, with a color legend identifying each region. Built with D3 v5, the visualization uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG chart. Data comes from UN population estimates and medium variant projections, loaded via `csv` and processed through `nest` and `melt` functions. Hover interactions are handled by the `mouse` callback on an invisible rectangle.

FflexKeks
92% 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
92% 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
91% match