Energy Consumption Streamgraph

Each layer is one energy source, stacked from fossil fuels at the bottom to renewables at the top, and its thickness is the primary energy consumed that year, in terawatt-hours (TWh). Choose a region to redraw the chart, and hover a layer to read the exact value for a given year. Data from Our World in Data, from 1965 onwards.

data = transpose(energy_data).map(d => ({
  region: d.region,
  energy_source: d.energy_source,
  year: +d.year,              // Forcer en nombre
  consumption: +d.consumption // Forcer en nombre
}))

// 5. Création de l'interface utilisateur interactif
viewof selected_region = Inputs.radio(
  ["World", "Europe", "North America", "Asia", "South America", "Africa"],
  { value: "World", label: "Choose a region: " }
)

// On crée un dataset filtré qui va réagir immédiatement au changement du radio bouton
filtered_data = data.filter(d => d.region === selected_region)

energy_order = ["coal", "oil", "gas", "nuclear", "hydro", "wind", "solar", "other_renewables"]

// On associe chaque source d'énergie à une couleur spécifique
color_scale = d3.scaleOrdinal()
  .domain(energy_order)
  .range([
    "#333333", // coal (dark grey)
    "#664433", // oil (dark brown)
    "#997E65", // gas (light brown/taupe)
    "#AB82C5", // nuclear (distinct purple)
    "#4A90E2", // hydro (steel blue)
    "#50E3C2", // wind (bright teal/cyan)
    "#F5A623", // solar (bright yellow/orange)
    "#7ED321"  // other_renewables (bright green)
  ])

Plot.plot({
  width: width,   // Largeur adaptative (responsive)
  height: 500,    // Hauteur confortable
  marginLeft: 70, // Espace généreux pour les chiffres de l'axe Y
  style: {
    fontSize: "14px",
    fontFamily: "system-ui, sans-serif"
  },
  // Axe Y visible pour lire les valeurs, vu que la base est plate
  y: { 
    grid: true,
    label: "Consumption (TWh)"
  },
  // Axe X pour les années (sans les virgules des milliers via tickFormat)
  x: { 
    tickFormat: d3.format("d"), 
    grid: true 
  },
  // On utilise l'échelle de couleurs qu'on vient de créer pour la légende
  color: {
    domain: color_scale.domain(),
    range: color_scale.range(),
    legend: true
  },
  marks: [
    // Le cœur visuel : Plot.areaY crée les strates
    Plot.areaY(filtered_data, {
      x: "year",
      y: "consumption",
      z: "energy_source",
      fill: d => color_scale(d.energy_source), // Application de notre couleur
      // Base plate (plus de streamgraph 'wiggle')
      order: energy_order,    // Ordonner les couches (fossiles en bas, renouvelables en haut)
      // L'interaction de base
      title: d => `${d.energy_source}\n${d.year}: ${d.consumption.toFixed(0)} TWh`,
      // On rend les zones un peu transparentes
      fillOpacity: 0.9,
      // Ces propriétés activent la douceur et les animations lors du changement de région
      curve: "monotone-x", // Rendre les bords courbes
      tip: true            // Activer un super pop-up d'informations natif au survol !
    })
  ],
  // Ajout de la source de données en bas du graphique
  caption: html`Source: <a href="https://ourworldindata.org/energy" target="_blank">Our World in Data</a>`
})

Data & method

Data. Our World in Data, energy dataset (https://github.com/owid/energy-data, CC BY 4.0), based on the Energy Institute Statistical Review of World Energy and other sources. The site uses an extract of the primary energy consumption in TWh for six regions since 1965 (see data/owid/README.md).
Processing. Eight sources are stacked, from coal at the bottom to other renewables at the top; missing values are treated as zero. Changing the region redraws the chart with the same colour scale.
Tools. R (dplyr, tidyr) for the pre-processing, Observable Plot for the streamgraph.