Sankey diagram component

This diagram show how energy is converted or transmitted before being consumed or lost: supplies are on the left, and demands are on the right. Data: Department of Energy & Climate Change via Tom Counsell

Energy Flow Links

How do I use this code? 🤔

To use this chart outside of Observable, copy-paste the entire function SankeyChart below including the copyright notice into your application. You’ll also need to install ( e.g., yarn add d3 d3-sankey) and import ( e.g., import * as d3 from "d3", import * as d3Sankey from "d3-sankey") D3; see D3’s README for details.

Example Code

chart=SankeyChart({
    links: energy
}, {
    nodeGroup: d => d.id.split(/\W/)[0],  // take first word for color
    nodeAlign,                            // e.g., d3.sankeyJustify; set by input above
    linkColor,                            // e.g., "source" or "target"; set by input above
    format: (f => d => `${f(d)} TWh`)(d3.format(",.1~f")),
    width,
    height: 600
});

To use this chart on Observable, import it into your notebook:

import {SankeyChart} from "@d3/sankey-component"

Then call SankeyChart(data, options) as shown above.

Customizing the Chart

To customize this chart, click the Fork button at the top of the page to create your own copy of this notebook and save your changes.