World electricity: the generation mix dashboard

An operations-style dashboard in one HTML page: four KPI tiles with sparklines and deltas, a 100% stacked column chart, a donut for the latest year and a sortable table, laid out on a twelve-column CSS grid. It answers one question at a glance: how much of the world's electricity still comes from burning fossil fuels, and how fast is that changing?

How it's built

• The layout is a twelve-column CSS grid inside the site's standard content column: a container query, not the viewport, decides that KPI tiles span three columns and the column chart and donut share a row 7 + 5 once the grid is 40rem wide.
• Status color is used only for the deltas, always with an arrow and the word "Improving", so it never carries meaning alone. Series colors are reserved for sources and stay the same in every chart, the legend and the table.
• The columns and the donut are SVG drawn from one array of numbers: seven series, stacked with a 1px gap, a crosshair-free hover that highlights the hovered year, and the donut's arcs computed with plain trigonometry.
• The table is a plain <table>, which htmlpress sorts by a click on any header, so sorting comes for free.

Source: Ember, Yearly Electricity Data and the Energy Institute's Statistical Review of World Energy, as compiled by Our World in Data. 2025 values are Ember's first estimate for the year.