Electricidad mundial: panel del mix de generación

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?

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 (datos anuales de electricidad) y la Statistical Review of World Energy del Energy Institute, recopilados por Our World in Data. Los valores de 2025 son la primera estimación de Ember para ese año.