Skip to main content
SimilarExport ZIP
100%

Selecting a Year on Line Chart

✓ Published1🌍 Public
KKazushige Okuma
Last edited Oct 8, 2019
Created on Oct 3, 2019

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Selecting the Year on a Line Chart

This line chart displays world population trends from 1950 to 2100, with each country shown as a colored line. Users can select a specific year by moving the mouse across the chart, which updates a vertical black line to the corresponding time point. The visualization uses D3.js with d3.csv for data loading, d3.nest for grouping data by country, and d3.scaleTime/Linear for axes. A d3.axisBottom and d3.axisLeft render the gridlines, while the line generator uses curveBasis for smoothing. Population data comes from UN estimates and projections.

MMuhammad Jarir Kanji
94% match
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
94% 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
93% 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
93% match