# Panel de electricidad

> Un panel de estilo operativo sobre el mix eléctrico mundial: tarjetas de KPI con minigráficos, un gráfico de columnas apiladas al 100 %, un gráfico de anillo y una tabla ordenable, con datos de Ember.

Un panel de estilo operativo en una sola página HTML: cuatro tarjetas de KPI con minigráficos y variaciones, un gráfico de columnas apiladas al 100 %, un gráfico de anillo para el último año y una tabla ordenable, dispuestos en una cuadrícula CSS de doce columnas. Responde a una pregunta de un vistazo: ¿cuánta electricidad del mundo sigue saliendo de quemar combustibles fósiles, y a qué ritmo está cambiando eso?

## La generación de un vistazo

Datos anuales de Ember · 2000–2025

Cuota baja en carbono **42,6%**

*▲ +9,1 p. p.* desde 2015 · Mejora

Solar **8,8%**

*▲ +7,7 p. p.* desde 2015 · Mejora

Eólica **8,5%**

*▲ +5,1 p. p.* desde 2015 · Mejora

Carbón **33,0%**

*▼ −5,7 p. p.* desde 2015 · Mejora

## Cuota por fuente, 2000–2025

% de la generación · pasa el cursor por un año



## El mix de 2025

pasa el cursor por un sector

La solar superó a la eólica en 2025, y juntas ya generan más que la hidráulica.

## Variación por fuente

% de la generación · haz clic en un encabezado para ordenar

| Fuente | 2000 | 2015 | 2025 | vs. 2015, p. p. |
| ------ | ---- | ---- | ---- | --------------- |

Otras incluye el petróleo (2,7 % en 2025), la bioenergía (2,2 %) y la geotérmica, la mareomotriz y otras renovables (0,3 %).

## Cómo está hecho

- **La maquetación** es una cuadrícula CSS de doce columnas dentro de la columna de contenido estándar del sitio: una consulta de contenedor, no el viewport, decide que las tarjetas de KPI ocupen tres columnas y que el gráfico de columnas y el de anillo compartan una fila 7 + 5 cuando la cuadrícula alcanza los 40rem de ancho.
- **El color de estado** se usa solo para las variaciones, siempre con una flecha y la palabra «Mejora», así que nunca transmite el significado por sí solo. Los colores de las series se reservan para las fuentes y son los mismos en todos los gráficos, la leyenda y la tabla.
- **Las columnas y el anillo** son SVG dibujados a partir de un único array de números: siete series apiladas con 1px de separación, un hover sin retícula que resalta el año señalado y los arcos del anillo calculados con trigonometría básica.
- **La tabla** es una `<table>` simple, que htmlpress ordena con un clic en cualquier cabecera, así que la ordenación viene incluida.

Fuente: [Ember, Yearly Electricity Data](https://ember-energy.org/data/) (datos anuales de electricidad) y la Statistical Review of World Energy del Energy Institute, recopilados por [Our World in Data](https://ourworldindata.org/electricity-mix). Los valores de 2025 son la primera estimación de Ember para ese año.