#Sankey
#Diagramme de Sankey des flux d'énergie
Cet exemple VSeed est dérivé à rebours d'une spécification Sankey. Chaque lien est reconverti en une ligne tidyData; source et target utilisent les noms de noeuds, et value représente l'ampleur du flux. L'exemple active aussi tooltip et la légende, ce qui permet la surbrillance au survol et le filtrage par légende.
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} />
}#Diagramme de Sankey pivoté
Un diagramme de Sankey pivoté par région et par année. La région est mappée sur les lignes, l'année sur les colonnes, et chaque cellule de pivot affiche un graphe de flux source-target indépendant.
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} />
}