World population: the climb to ten billion
An infographic poster in one HTML page: three hero numbers, an interactive stacked area chart, a bar timeline and a sparkline of twelve thousand years. Every chart is inline SVG drawn by a few lines of script from the numbers in the page, and every color is a token that switches with the site's dark mode.
At a glance
Population by region
billions, 1950–2100 · hover for values- Asia
- Africa
- Europe
- Latin America
- Northern America
- Oceania
Asia peaks at 5.29 billion around 2055; after that, nearly all growth is African.
Years to add each billion
- 2 bn122
- 3 bn33
- 4 bn15
- 5 bn12
- 6 bn11
- 7 bn12
- 8 bn12
- 9 bn15
- 10 bn24
Bars in years; * UN medium-variant projection. The first billion: 1805.
The last 12,000 years
billionsFor 11,800 of those years the line is flat: it took until 1805 to reach one billion, and only 220 more to reach eight.
Data table
| Year | Asia | Africa | Europe | Latin America | N. America | Oceania | World |
|---|
How it's built
- Hero numbers are a wrapping flex row whose 1px gap shows the border color through, so the tiles get hairline dividers without a single border rule.
-
The stacked area is computed in the browser: each region's band is a
path from its baseline to its top, and an invisible overlay snaps the crosshair to the
nearest five-year step. A
ResizeObserverredraws it at the real width, so the labels stay 11px on a phone. -
The billion timeline is no chart library at all: each bar is a
::beforewhose width is a--yearscustom property, and the projected rows switch to a hatched fill.
Source: UN World Population Prospects 2024, with the long-run series from HYDE and Gapminder, as compiled by Our World in Data.
Created with ❤ and Htmlpress