跳到正文 Htmlpress静态站点生成器 Htmlpress静态站点生成器

切换主题

键盘快捷键

谁在排放全球的 CO₂,谁的人均排放最多

更新于

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

占全球排放的份额,2024 年

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

总量与人均

十亿吨 CO₂/年
    • 中国
    • 美国
    • 印度
    • 其他国家

    排名如何翻转

    在 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 构建

    操作

    在 GitHub 上编辑以 Markdown 查看

    目录