#Sankey
#Energy Flow Sankey
This VSeed example is reverse-derived from a Sankey spec. Each link is converted into one tidyData row, with source and target stored as node names and value used as the flow measure. The example also enables tooltip and legend interactions, so hover highlighting and legend filtering are both available.
import { VSeedRender } from '@components'
export default () => {
const vseedConfig = {
"chartType": "sankey",
"dataset": [
{
"sourceNode": "Agricultural 'waste'",
"targetNode": "Bio-conversion",
"value": 124.729
},
{
"sourceNode": "Bio-conversion",
"targetNode": "Liquid",
"value": 0.597
},
{
"sourceNode": "Bio-conversion",
"targetNode": "Losses",
"value": 26.862
},
{
"sourceNode": "Bio-conversion",
"targetNode": "Solid",
"value": 280.322
},
{
"sourceNode": "Bio-conversion",
"targetNode": "Gas",
"value": 81.144
},
{
"sourceNode": "Biofuel imports",
"targetNode": "Liquid",
"value": 35
},
{
"sourceNode": "Biomass imports",
"targetNode": "Solid",
"value": 35
},
{
"sourceNode": "Coal imports",
"targetNode": "Coal",
"value": 11.606
},
{
"sourceNode": "Coal reserves",
"targetNode": "Coal",
"value": 63.965
},
{
"sourceNode": "Coal",
"targetNode": "Solid",
"value": 75.571
},
{
"sourceNode": "District heating",
"targetNode": "Industry",
"value": 10.639
},
{
"sourceNode": "District heating",
"targetNode": "Heating and cooling - commercial",
"value": 22.505
},
{
"sourceNode": "District heating",
"targetNode": "Heating and cooling - homes",
"value": 46.184
},
{
"sourceNode": "Electricity grid",
"targetNode": "Over generation / exports",
"value": 104.453
},
{
"sourceNode": "Electricity grid",
"targetNode": "Heating and cooling - homes",
"value": 113.726
},
{
"sourceNode": "Electricity grid",
"targetNode": "H2 conversion",
"value": 27.14
},
{
"sourceNode": "Electricity grid",
"targetNode": "Industry",
"value": 342.165
},
{
"sourceNode": "Electricity grid",
"targetNode": "Road transport",
"value": 37.797
},
{
"sourceNode": "Electricity grid",
"targetNode": "Agriculture",
"value": 4.412
},
{
"sourceNode": "Electricity grid",
"targetNode": "Heating and cooling - commercial",
"value": 40.858
},
{
"sourceNode": "Electricity grid",
"targetNode": "Losses",
"value": 56.691
},
{
"sourceNode": "Electricity grid",
"targetNode": "Rail transport",
"value": 7.863
},
{
"sourceNode": "Electricity grid",
"targetNode": "Lighting & appliances - commercial",
"value": 90.008
},
{
"sourceNode": "Electricity grid",
"targetNode": "Lighting & appliances - homes",
"value": 93.494
},
{
"sourceNode": "Gas imports",
"targetNode": "Ngas",
"value": 40.719
},
{
"sourceNode": "Gas reserves",
"targetNode": "Ngas",
"value": 82.233
},
{
"sourceNode": "Gas",
"targetNode": "Heating and cooling - commercial",
"value": 0.129
},
{
"sourceNode": "Gas",
"targetNode": "Losses",
"value": 1.401
},
{
"sourceNode": "Gas",
"targetNode": "Thermal generation",
"value": 151.891
},
{
"sourceNode": "Gas",
"targetNode": "Agriculture",
"value": 2.096
},
{
"sourceNode": "Gas",
"targetNode": "Industry",
"value": 48.58
},
{
"sourceNode": "Geothermal",
"targetNode": "Electricity grid",
"value": 7.013
},
{
"sourceNode": "H2 conversion",
"targetNode": "H2",
"value": 20.897
},
{
"sourceNode": "H2 conversion",
"targetNode": "Losses",
"value": 6.242
},
{
"sourceNode": "H2",
"targetNode": "Road transport",
"value": 20.897
},
{
"sourceNode": "Hydro",
"targetNode": "Electricity grid",
"value": 6.995
},
{
"sourceNode": "Liquid",
"targetNode": "Industry",
"value": 121.066
},
{
"sourceNode": "Liquid",
"targetNode": "International shipping",
"value": 128.69
},
{
"sourceNode": "Liquid",
"targetNode": "Road transport",
"value": 135.835
},
{
"sourceNode": "Liquid",
"targetNode": "Domestic aviation",
"value": 14.458
},
{
"sourceNode": "Liquid",
"targetNode": "International aviation",
"value": 206.267
},
{
"sourceNode": "Liquid",
"targetNode": "Agriculture",
"value": 3.64
},
{
"sourceNode": "Liquid",
"targetNode": "National navigation",
"value": 33.218
},
{
"sourceNode": "Liquid",
"targetNode": "Rail transport",
"value": 4.413
},
{
"sourceNode": "Marine algae",
"targetNode": "Bio-conversion",
"value": 4.375
},
{
"sourceNode": "Ngas",
"targetNode": "Gas",
"value": 122.952
},
{
"sourceNode": "Nuclear",
"targetNode": "Thermal generation",
"value": 839.978
},
{
"sourceNode": "Oil imports",
"targetNode": "Oil",
"value": 504.287
},
{
"sourceNode": "Oil reserves",
"targetNode": "Oil",
"value": 107.703
},
{
"sourceNode": "Oil",
"targetNode": "Liquid",
"value": 611.99
},
{
"sourceNode": "Other waste",
"targetNode": "Solid",
"value": 56.587
},
{
"sourceNode": "Other waste",
"targetNode": "Bio-conversion",
"value": 77.81
},
{
"sourceNode": "Pumped heat",
"targetNode": "Heating and cooling - homes",
"value": 193.026
},
{
"sourceNode": "Pumped heat",
"targetNode": "Heating and cooling - commercial",
"value": 70.672
},
{
"sourceNode": "Solar PV",
"targetNode": "Electricity grid",
"value": 59.901
},
{
"sourceNode": "Solar Thermal",
"targetNode": "Heating and cooling - homes",
"value": 19.263
},
{
"sourceNode": "Solar",
"targetNode": "Solar Thermal",
"value": 19.263
},
{
"sourceNode": "Solar",
"targetNode": "Solar PV",
"value": 59.901
},
{
"sourceNode": "Solid",
"targetNode": "Agriculture",
"value": 0.882
},
{
"sourceNode": "Solid",
"targetNode": "Thermal generation",
"value": 400.12
},
{
"sourceNode": "Solid",
"targetNode": "Industry",
"value": 46.477
},
{
"sourceNode": "Thermal generation",
"targetNode": "Electricity grid",
"value": 525.531
},
{
"sourceNode": "Thermal generation",
"targetNode": "Losses",
"value": 787.129
},
{
"sourceNode": "Thermal generation",
"targetNode": "District heating",
"value": 79.329
},
{
"sourceNode": "Tidal",
"targetNode": "Electricity grid",
"value": 9.452
},
{
"sourceNode": "UK land based bioenergy",
"targetNode": "Bio-conversion",
"value": 182.01
},
{
"sourceNode": "Wave",
"targetNode": "Electricity grid",
"value": 19.013
},
{
"sourceNode": "Wind",
"targetNode": "Electricity grid",
"value": 289.366
}
],
"dimensions": [
{
"id": "sourceNode",
"alias": "Source",
"encoding": "source"
},
{
"id": "targetNode",
"alias": "Target",
"encoding": "target"
}
],
"measures": [
{
"id": "value",
"alias": "Flow"
}
],
"color": {
"colorScheme": [
"#0B6CFF",
"#3B8BFF",
"#00A6A6",
"#4DC3B2",
"#FF8A00",
"#FFB347",
"#7B61FF",
"#B39DFF",
"#4CAF50",
"#8BC34A"
]
},
"label": {
"enable": true,
"showDimension": true,
"showValue": true,
"labelFontSize": 10
},
"tooltip": {
"enable": true
},
"legend": {
"enable": true,
"position": "top",
"maxSize": 2,
"shapeType": "rectRound"
}
}
return <VSeedRender vseed={vseedConfig} />
}#Pivot Sankey Diagram
A Sankey diagram pivoted by region and year. Region is mapped to rows, year is mapped to columns, and each pivot cell renders an independent source-target flow graph.
import { VSeedRender } from '@components'
export default () => {
const vseedConfig = {
"chartType": "sankey",
"dataset": [
{
"region": "East",
"year": "2023",
"sourceNode": "Coal",
"targetNode": "Power",
"value": 120
},
{
"region": "East",
"year": "2023",
"sourceNode": "Solar",
"targetNode": "Power",
"value": 80
},
{
"region": "East",
"year": "2023",
"sourceNode": "Power",
"targetNode": "Industry",
"value": 90
},
{
"region": "East",
"year": "2023",
"sourceNode": "Power",
"targetNode": "Homes",
"value": 70
},
{
"region": "East",
"year": "2024",
"sourceNode": "Coal",
"targetNode": "Power",
"value": 90
},
{
"region": "East",
"year": "2024",
"sourceNode": "Wind",
"targetNode": "Power",
"value": 110
},
{
"region": "East",
"year": "2024",
"sourceNode": "Power",
"targetNode": "Industry",
"value": 85
},
{
"region": "East",
"year": "2024",
"sourceNode": "Power",
"targetNode": "Homes",
"value": 95
},
{
"region": "West",
"year": "2023",
"sourceNode": "Gas",
"targetNode": "Power",
"value": 100
},
{
"region": "West",
"year": "2023",
"sourceNode": "Hydro",
"targetNode": "Power",
"value": 70
},
{
"region": "West",
"year": "2023",
"sourceNode": "Power",
"targetNode": "Industry",
"value": 80
},
{
"region": "West",
"year": "2023",
"sourceNode": "Power",
"targetNode": "Transport",
"value": 60
},
{
"region": "West",
"year": "2024",
"sourceNode": "Gas",
"targetNode": "Power",
"value": 85
},
{
"region": "West",
"year": "2024",
"sourceNode": "Hydro",
"targetNode": "Power",
"value": 95
},
{
"region": "West",
"year": "2024",
"sourceNode": "Power",
"targetNode": "Industry",
"value": 75
},
{
"region": "West",
"year": "2024",
"sourceNode": "Power",
"targetNode": "Transport",
"value": 88
}
],
"dimensions": [
{
"id": "sourceNode",
"alias": "Source",
"encoding": "source"
},
{
"id": "targetNode",
"alias": "Target",
"encoding": "target"
},
{
"id": "region",
"alias": "Region",
"encoding": "row"
},
{
"id": "year",
"alias": "Year",
"encoding": "column"
}
],
"measures": [
{
"id": "value",
"alias": "Flow"
}
],
"color": {
"colorScheme": [
"#0B6CFF",
"#3B8BFF",
"#00A6A6",
"#4DC3B2",
"#FF8A00",
"#FFB347",
"#7B61FF",
"#B39DFF"
]
},
"label": {
"enable": true,
"showDimension": true,
"showValue": true
},
"tooltip": {
"enable": true
},
"legend": {
"enable": true,
"position": "top"
}
}
return <VSeedRender vseed={vseedConfig} />
}