Skip to content HtmlpressStatic site generator HtmlpressStatic site generator

Change theme

Keyboard shortcuts

World population: the climb to ten billion

Updated

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

8.23bn people alive in 2025, more than three times the 1950 count
10.3bn the projected peak, reached in the mid-2080s before a slow decline
×17 Africa's growth from 1950 to 2100, from 228 million to 3.8 billion

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

  1. 2 bn122
  2. 3 bn33
  3. 4 bn15
  4. 5 bn12
  5. 6 bn11
  6. 7 bn12
  7. 8 bn12
  8. 9 bn15
  9. 10 bn24

Bars in years; * UN medium-variant projection. The first billion: 1805.

The last 12,000 years

billions

For 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 ResizeObserver redraws 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 ::before whose width is a --years custom 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

Actions

Edit on GitHubView as Markdown

Contents