# 世界人口

> 一张信息图海报：醒目的关键数字、按地区划分的交互式堆叠面积图，以及每增加十亿人的条形时间线，数据来自联合国《世界人口展望》（World Population Prospects）。

一个 HTML 页面里的信息图海报：三个关键数字、一张交互式堆叠面积图、一条条形时间线和一条跨越一万两千年的迷你走势图。每张图都是内联 SVG，由几行脚本根据页面中的数字绘制；每种颜色都是一个令牌，会随站点的深色模式切换。

## 一览

**82.3亿** 2025 年在世人口，是 1950 年的三倍多

**103亿** 预计的峰值，在 2080 年代中期达到，随后缓慢下降

**×17** 非洲 1950 至 2100 年的增长倍数，从 2.28 亿增至 38 亿

## 各地区人口

亿人，1950–2100 年 · 悬停查看数值

- **亚洲
- **非洲
- **欧洲
- **拉丁美洲
- **北美洲
- **大洋洲

亚洲人口约在 2055 年达到 52.9 亿的峰值；此后，几乎所有增长都来自非洲。

## 每增加十亿人所用的年数

1. **20 亿**1927122
2. **30 亿**196033
3. **40 亿**197515
4. **50 亿**198712
5. **60 亿**199811
6. **70 亿**201012
7. **80 亿**202212
8. **90 亿**203715
9. **100 亿**206124

条形单位为年；\* 为联合国中位方案预测。第一个十亿：1805 年。

## 过去一万两千年

亿人

其中 11800 年里曲线几乎是平的：直到 1805 年人口才达到 10 亿，而此后只用了 220 年就达到 80 亿。

数据表（单位：亿人）

| 年份 | 亚洲 | 非洲 | 欧洲 | 拉丁美洲 | 北美洲 | 大洋洲 | 世界 |
| -- | -- | -- | -- | ---- | --- | --- | -- |

## 实现方式

- **关键数字**是一行可换行的 flex 布局，1px 的间隙透出边框颜色，于是各个卡片之间有了细分隔线，却不需要任何一条边框规则。
- **堆叠面积图**在浏览器中计算：每个地区的色带是一条从底线到顶线的路径，一个不可见的覆盖层把十字准线吸附到最近的五年刻度。`ResizeObserver` 按实际宽度重绘图表，所以标签在手机上仍然是 11px。
- **十亿时间线**完全没有用图表库：每根条形都是一个 `::before`，宽度来自自定义属性 `--years`，预测的行则改用斜线填充。

来源： [联合国《世界人口展望 2024》（World Population Prospects 2024）](https://population.un.org/wpp/)，长期序列来自 HYDE 和 Gapminder，由 [Our World in Data](https://ourworldindata.org/population-growth) 汇编。