Skip to main content
SimilarExport ZIP
100%

Selecting a Year on a Line Chart

✓ Published2🌍 Public
AArriannePandaraoan
Last edited May 9, 2020
Created on May 4, 2020

This visualization shows United Nations population projections from 1950 to 2100 as a multi-line chart, with each line representing a regional grouping such as "More developed regions" or "Less developed regions." A vertical black line marks the currently selected year, and moving the mouse across the chart updates this selection, allowing users to compare population values across regions at a specific point in time. The chart is built with D3 v5, using `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` for smooth paths. A `colorLegend` module renders the categorical color scale, while data is loaded from two CSV files using `csv` and processed via a `melt` function that reshapes the wide format into tidy long-form rows.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Selecting a Year on a Line Chart

This visualization shows United Nations population projections from 1950 to 2100 for world regions as a multi-line chart. The year 2018 is initially marked by a vertical line, and moving the mouse across the chart updates the selected year, which moves the line and adjusts the highlighted point. The chart uses d3.line, d3.scaleTime, d3.scaleLinear, and d3.axisLeft/Bottom to render the SVG, with data from two CSV files melted into a single dataset. A d3.scaleOrdinal with schemeCategory10 colors each region, and a custom colorLegend component displays the categories.

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

Selecting a Year on a Line Chart

This line chart visualizes UN population estimates and projections by region from 1950 to 2100, with a vertical line marking a selected year. A clickable mouse-interceptor rectangle lets users hover to update the selected year via `setSelectedYear`, which re-renders the chart. The visualization uses d3.scaleTime, d3.scaleLinear, d3.line with curveBasis, and d3.nest for grouping, rendering as SVG with an ordinal color scale legend. Data comes from two CSV files loaded with d3.csv, combining estimates and medium-variant projections.

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