# 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](http://www.decc.gov.uk/en/content/cms/tackling/2050/calculator_on/calculator_on.aspx) via [Tom Counsell](https://tamc.github.io/Sankey/)

| Source                         | TWh            |
|--------------------------------|----------------|
| Agricultural 'waste'          | 124.7          |
| Bio-conversion                 | 388.9          |
| Biofuel imports                | 35             |
| Biomass imports                | 35             |
| Coal imports                   | 11.6           |
| Coal reserves                  | 64             |
| Coal                           | 75.6           |
| District heating               | 79.3           |
| Electricity grid               | 918.6          |
| Gas imports                    | 40.7           |
| Gas reserves                   | 82.2           |
| Gas                            | 204.1          |
| Geothermal                     | 7              |
| H2 conversion                  | 27.1           |
| H2                             | 20.9           |
| Hydro                           | 7              |
| Liquid                         | 647.6          |
| Marine algae                   | 4.4            |
| Ngas                           | 123            |
| Nuclear                        | 840            |
| Oil imports                    | 504.3          |
| Oil reserves                   | 107.7          |
| Oil                            | 612            |
| Other waste                    | 134.4          |
| Pumped heat                    | 263.7          |
| Solar PV                       | 59.9           |
| Solar Thermal                  | 19.3           |
| Solar                          | 79.2           |
| Solid                          | 447.5          |
| Thermal generation             | 1,392          |
| Tidal                          | 9.5            |
| UK land based bioenergy       | 182            |
| Wave                           | 19             |
| Wind                           | 289.4          |
| Losses                         | 878.3          |
| Industry                       | 568.9          |
| Heating and cooling - commercial| 134.2          |
| Heating and cooling - homes     | 372.2          |
| Over generation / exports      | 104.5          |
| Road transport                 | 194.5          |
| Agriculture                    | 11             |
| Rail transport                 | 12.3           |
| Lighting & appliances - commercial| 90           |
| Lighting & appliances - homes   | 93.5          |
| International shipping         | 128.7          |
| Domestic aviation              | 14.5           |
| International aviation         | 206.3          |
| National navigation            | 33.2           |

### Energy Flow Links

| Source                                 | Target                             | TWh          |
|----------------------------------------|------------------------------------|--------------|
| Agricultural 'waste' → Bio-conversion | 124.7                               |
| Bio-conversion → Liquid                | 0.6                                |
| Bio-conversion → Losses                | 26.9                               |
| Bio-conversion → Solid                 | 280.3                               |
| Biofuel imports → Liquid               | 81.1                               |
| Biomass imports → Solid                | 35                                 |
| Coal imports → Coal                     | 35                                 |
| Coal reserves → Coal                    | 11.6                               |
| Coal → Solid                            | 64                                 |
| District heating → Industry             | 75.6                               |
| Electricity grid → Over generation / exports| 46.2                           |
| Electricity grid → Heating and cooling - homes| 104.5                         |
| Gas → Heating and cooling - commercial  | 82.2                               |
| H2 conversion → H2                     | 7                                  |
| Hydro → Electricity grid                | 20.9                               |
| Liquid → Industry                       | 7                                  |
| Marine algae → Bio-conversion          | 4.4                                |
| Nuclear → Thermal generation            | 123                                |
| Oil → Liquid                            | 107.7                               |
| Solid → Thermal generation              | 0.9                                |

### 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](https://github.com/d3/d3/blob/main/README.md) for details.

### Example Code
```javascript
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](/content/@observablehq/introduction-to-imports/index.html) into your notebook:

```javascript
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.