谁在排放全球的 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(全球碳预算),人口数据来自联合国 World Population Prospects(世界人口展望),由 Our World in Data 汇编。欧盟作为一个整体计算;“世界其他地区”包括国际航空和航运。
用 ❤ 和 Htmlpress 构建