# 二氧化碳排放

> 交互式比较全球 CO₂ 由谁排放：一张显示各国占比的方形化矩形树图，以及一个可在排放总量和人均排放之间切换的动画条形排名。

一个只用一个 HTML 页面完成的交互式比较。方形化矩形树图展示了 2024 年全球 386 亿吨化石 CO₂ 在各国之间的分布；下方的排名可在排放总量和人均排放之间切换，条形会滑动到新的位置。三个最大的排放国始终保持各自的颜色，排名翻转时你也能一路追踪它们。

## 占全球排放的份额，2024 年

化石燃料与工业 · 矩形面积即份额 · 悬停查看某一矩形

## 总量与人均

十亿吨 CO₂/年

总量 人均



- **中国
- **美国
- **印度
- **其他国家
- **全球平均，4.7 吨

## 排名如何翻转

在 16 个最大排放国中的排名，总量 → 人均：

**中国** 第 1 → 第 7 占总量 32%，人均 8.7 吨

**美国** 第 2 → 第 3 占总量 13%，人均 14.2 吨

**印度** 第 3 → 第 16 占总量 8%，人均 2.2 吨

数据表

| 国家 | 总量（Gt） | 占全球份额 | 人均（吨） |
| -- | ------ | ----- | ----- |

## 实现方式

- **矩形树图**采用方形化（squarified）布局：矩形沿较短的一边逐行排布，只有当加入新矩形能让这一行的矩形更接近正方形时，这一行才继续增长。整个算法只有二十行脚本；只有矩形放得下时才绘制标签。
- **排名**是一个 HTML 列表，而不是 SVG。每一行位于 `translateY(calc(var(--rank) * 2rem))`，每个条形的宽度为 `width: var(--w)`，因此切换时每行只需改写两个自定义属性，重新排序的动画交给 CSS 过渡完成。
- **颜色跟随国家**，而不是排名：中国、美国和印度在两种模式和矩形树图中都保持各自的色相，其他所有国家统一使用中性灰，于是三种颜色就讲完了整个故事。

来源： [Global Carbon Budget 2025](https://globalcarbonbudget.org/)（全球碳预算），人口数据来自联合国 World Population Prospects（世界人口展望），由 [Our World in Data](https://ourworldindata.org/co2-emissions) 汇编。欧盟作为一个整体计算；“世界其他地区”包括国际航空和航运。