# Emisiones de CO₂

> Una comparación interactiva de quién emite el CO₂ del mundo: un treemap cuadriculado de cuotas y una clasificación de barras animada que alterna entre emisiones totales y por persona.

Una comparación interactiva en una sola página HTML. Un treemap cuadriculado muestra cómo se repartieron entre los países las 38.600 millones de toneladas de CO₂ fósil emitidas en el mundo en 2024; debajo, una clasificación alterna entre emisiones totales y por persona, y las barras se deslizan a su nuevo puesto. Los tres mayores emisores conservan su color en todo momento, así que puedes seguirlos mientras el orden se da la vuelta.

## Cuota de las emisiones mundiales, 2024

combustibles fósiles e industria · el área de cada recuadro es su cuota · pasa el cursor por un recuadro

## Total frente a por persona

miles de millones de toneladas de CO₂ al año

Total Por persona



- **China
- **Estados Unidos
- **India
- **Otros países
- **Media mundial, 4,7 t

## Cómo se da la vuelta la clasificación

Puesto entre los 16 mayores emisores, total → por persona:

**China** 1.º → 7.º 32 % del total, 8,7 t por persona

**Estados Unidos** 2.º → 3.º 13 % del total, 14,2 t por persona

**India** 3.º → 16.º 8 % del total, 2,2 t por persona

Tabla de datos

| País | Total, Gt | Cuota mundial | Por persona, t |
| ---- | --------- | ------------- | -------------- |

## Cómo está hecho

- **El treemap** usa la disposición cuadriculada (squarified): los recuadros se colocan en filas a lo largo del lado más corto, y una fila solo crece mientras eso haga sus recuadros más cuadrados. El algoritmo ocupa veinte líneas de script; las etiquetas solo se dibujan donde el recuadro tiene sitio.
- **La clasificación** es una lista HTML, no SVG. Cada fila se sitúa en `translateY(calc(var(--rank) * 2rem))` y cada barra en `width: var(--w)`, así que el selector solo reescribe dos propiedades personalizadas por fila y las transiciones CSS animan el reordenamiento.
- **El color sigue al país**, no a su puesto: China, Estados Unidos e India conservan su tono en ambos modos y en el treemap, y todos los demás países comparten un mismo gris neutro, así que tres colores cuentan toda la historia.

Fuente: [Global Carbon Budget 2025](https://globalcarbonbudget.org/), con la población de las World Population Prospects de la ONU, recopilados por [Our World in Data](https://ourworldindata.org/co2-emissions). La UE se cuenta como un solo bloque; «Resto del mundo» incluye la aviación y el transporte marítimo internacionales.