Skip to main content
SimilarExport ZIP
100%

Population time-series

✓ Published3🌍 Public
BB Sundaresan
Last edited Jul 20, 2020
Created on Jul 20, 2020

This example shows animated population time-series lines for world regions from 1950 to 2100, ordered by their final population values. The chart uses d3.line, d3.scaleTime, and d3.scaleLinear to render the paths, with a color legend built via d3.scaleOrdinal. Data is loaded from two CSV files and melted into tidy rows using d3.nest and d3.range, with axes formatted by d3.axisBottom and d3.axisLeft. The SVG updates through a transition on the legend circles, while the line paths use CSS mix-blend-mode for overlapping lines.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Population time-series

This example shows population trends over time for world regions, with each region drawn as a colored line against year and population axes. A color legend on the right identifies each region, and the lines are sorted by their final population values. The visualization uses React with D3 v5, including `d3.line`, `d3.nest`, `d3.scaleOrdinal`, and `d3.schemeCategory10` for styling. Data comes from UN population estimates CSV files, processed via a custom melt function, and rendered as animated SVG paths with transitions on the legend.

Sszy1900
92% match
Loading thumbnail…

Population time-series

This visualization displays population trends for global regions from 1950 to 2100, using animated line charts that color-code each region via a categorical scale. The data, sourced from UN population estimates, is processed through a custom melt function and rendered as SVG with D3 v5, React, and the `d3.axisBottom`, `d3.axisLeft`, and `d3.line` APIs. A color legend with animated transitions clarifies the mapping, while styled tick lines and labels enhance readability.

MManoj Betawar
92% match
Loading thumbnail…

Population time-series

This interactive visualization displays population trends for global regions from 1950 to 2100, using animated line charts that show each region’s growth over time. The data comes from UN population estimates, processed and merged from two CSV files. The visualization is built with React and D3.v5, using d3.line for path generation, d3.scaleTime for the x-axis, and d3.scaleOrdinal with color legends to distinguish regions. The SVG rendering includes axis labels, a chart title, and interactive color legend, with animations applied to legend transitions.

JJorge Emilio Zapata Godoy
91% match
Loading thumbnail…

Population time-series

This visualization shows population trends over time for world regions, with each region's trajectory drawn as a distinct colored line. A color legend identifies the regions, and the chart title clearly labels the relationship between population and year. The visualization uses D3 v5 APIs including `nest` for data grouping, `scaleTime` and `scaleLinear` for axes, and `line` for generating SVG paths. Data comes from UN population estimates and historical datasets processed via Promise loading. The color legend component updates with transitions, while lines use blend modes for overlapping clarity.

Rreo440
89% match
Loading thumbnail…

Untitled

This example visualizes population growth over time for global regions, drawing on UN population estimates (1950–2014) and medium-variant projections (2015–2100). It renders multiline time-series curves using d3.line with curveBasis, scaled by d3.scaleTime and d3.scaleLinear, while a categorical d3.scaleOrdinal with schemeCategory10 assigns region colors. The chart includes axes, gridlines, and a custom color legend built via d3-selection. Data is processed by melting a wide CSV format into tidy rows, filtering for regions only, and concatenating the historical and projected datasets.

Ccyanea1
86% match
Loading thumbnail…

Line Chart

This line chart visualizes world population over time by region, with each region drawn as a distinct colored line on an SVG canvas. The chart uses D3 v5 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with curveBasis, and `d3.nest` to group data. Population estimates from 1950–2014 and medium-variant projections from 2015–2100 come from UN datasets loaded via `d3.csv`. A color legend using `d3.scaleOrdinal` maps regions, and a vertical line marks the year 2021, with mouse interaction logging hovered years to the console.

BBKirst3
86% match
Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes population over time by region, showing six major world regions as distinct colored lines from 1950 to 2100. The chart uses a line generator with curveBasis for smooth paths, while a color legend identifies each region. The code melts wide-format UN population data into tidy rows, combining estimates and medium-variant projections from CSV files. It employs d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.nest, and d3.axisBottom/axisLeft, rendering as SVG with custom tick formatting for abbreviated population values.

Ppplomith
85% match
Loading thumbnail…

Line Chart with Multiple Lines

This visualization shows population trends over time for multiple world regions, with each region represented as a distinct colored line and a legend identifying the regions. A vertical black line marks the currently selected year, and users can move their mouse across the chart to dynamically change that year. The code uses d3.line, d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to render SVG paths, along with d3.nest to group the data by region. Population data comes from UN estimates and medium-variant projections, covering 1950 to 2100.

RRoger Yu-Hsiang Lo
85% match