Skip to content

Commit 59b09b0

Browse files
kurklekurkle
committed
Chore
1 parent 2477d3e commit 59b09b0

File tree

3 files changed

+230
-24
lines changed

3 files changed

+230
-24
lines changed

‎samples/energy.html

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>Sankey diagram</title>
6+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.js"></script>
7+
<script src="utils.js"></script>
8+
<link rel="stylesheet" type="text/css" href="style.css">
9+
</link>
10+
</head>
11+
12+
<body>
13+
<div class="canvas-holder">
14+
<canvas id="chart-area"></canvas>
15+
</div>
16+
17+
<script>
18+
/* global Utils, Chart */
19+
20+
const colors = [
21+
'#1F77B4',
22+
'#FF7F0E',
23+
'#2CA02C',
24+
'#D62728',
25+
'#9467BD',
26+
'#8C564B',
27+
'#E377C2',
28+
'#7F7F7F',
29+
'#BCBD22'
30+
];
31+
32+
const category = {
33+
"Agricultural 'waste'": 'Agricultural',
34+
'Bio-conversion': 'Bio-conversion',
35+
Liquid: 'Liquid',
36+
Losses: 'Losses',
37+
Solid: 'Solid',
38+
Gas: 'Gas',
39+
'Biofuel imports': 'Biofuel',
40+
'Biomass imports': 'Biomass',
41+
'Coal imports': 'Coal',
42+
Coal: 'Coal',
43+
'Coal reserves': 'Coal',
44+
'District heating': 'District',
45+
Industry: 'Industry',
46+
'Heating and cooling - commercial': 'Heating',
47+
'Heating and cooling - homes': 'Heating',
48+
'Electricity grid': 'Electricity',
49+
'Over generation / exports': 'Over',
50+
'H2 conversion': 'H2',
51+
'Road transport': 'Road',
52+
Agriculture: 'Agriculture',
53+
'Rail transport': 'Rail',
54+
'Lighting & appliances - commercial': 'Lighting',
55+
'Lighting & appliances - homes': 'Lighting',
56+
'Gas imports': 'Gas',
57+
Ngas: 'Ngas',
58+
'Gas reserves': 'Gas',
59+
'Thermal generation': 'Thermal',
60+
Geothermal: 'Geothermal',
61+
H2: 'H2',
62+
Hydro: 'Hydro',
63+
'International shipping': 'International',
64+
'Domestic aviation': 'Domestic',
65+
'International aviation': 'International',
66+
'National navigation': 'National',
67+
'Marine algae': 'Marine',
68+
Nuclear: 'Nuclear',
69+
'Oil imports': 'Oil',
70+
Oil: 'Oil',
71+
'Oil reserves': 'Oil',
72+
'Other waste': 'Other',
73+
'Pumped heat': 'Pumped',
74+
'Solar PV': 'Solar',
75+
'Solar Thermal': 'Solar',
76+
Solar: 'Solar',
77+
Tidal: 'Tidal',
78+
'UK land based bioenergy': 'UK',
79+
Wave: 'Wave',
80+
Wind: 'Wind',
81+
};
82+
83+
const catColors = {};
84+
let colorIndex = 0;
85+
86+
const getColor = (item) => {
87+
const cat = category[item];
88+
if (!catColors[cat]) {
89+
catColors[cat] = colors[colorIndex % 9];
90+
colorIndex++;
91+
}
92+
return catColors[cat];
93+
};
94+
95+
const data = [
96+
{from: "Agricultural 'waste'", to: 'Bio-conversion', flow: 124.729},
97+
{from: 'Bio-conversion', to: 'Liquid', flow: 0.597},
98+
{from: 'Bio-conversion', to: 'Losses', flow: 26.862},
99+
{from: 'Bio-conversion', to: 'Solid', flow: 280.322},
100+
{from: 'Bio-conversion', to: 'Gas', flow: 81.144},
101+
{from: 'Biofuel imports', to: 'Liquid', flow: 35},
102+
{from: 'Biomass imports', to: 'Solid', flow: 35},
103+
{from: 'District heating', to: 'Industry', flow: 10.639},
104+
{from: 'District heating', to: 'Heating and cooling - commercial', flow: 22.505},
105+
{from: 'District heating', to: 'Heating and cooling - homes', flow: 46.184},
106+
{from: 'Electricity grid', to: 'Over generation / exports', flow: 104.453},
107+
{from: 'Electricity grid', to: 'Heating and cooling - homes', flow: 113.726},
108+
{from: 'Electricity grid', to: 'H2 conversion', flow: 27.14},
109+
{from: 'Electricity grid', to: 'Industry', flow: 342.165},
110+
{from: 'Electricity grid', to: 'Road transport', flow: 37.797},
111+
{from: 'Electricity grid', to: 'Agriculture', flow: 4.412},
112+
{from: 'Electricity grid', to: 'Heating and cooling - commercial', flow: 40.858},
113+
{from: 'Electricity grid', to: 'Losses', flow: 56.691},
114+
{from: 'Electricity grid', to: 'Rail transport', flow: 7.863},
115+
{from: 'Electricity grid', to: 'Lighting & appliances - commercial', flow: 90.008},
116+
{from: 'Electricity grid', to: 'Lighting & appliances - homes', flow: 93.494},
117+
{from: 'Gas imports', to: 'Ngas', flow: 40.719},
118+
{from: 'Gas reserves', to: 'Ngas', flow: 82.233},
119+
{from: 'Gas', to: 'Heating and cooling - commercial', flow: 0.129},
120+
{from: 'Gas', to: 'Losses', flow: 1.401},
121+
{from: 'Gas', to: 'Thermal generation', flow: 151.891},
122+
{from: 'Gas', to: 'Agriculture', flow: 2.096},
123+
{from: 'Gas', to: 'Industry', flow: 48.58},
124+
{from: 'Geothermal', to: 'Electricity grid', flow: 7.013},
125+
{from: 'H2 conversion', to: 'H2', flow: 20.897},
126+
{from: 'H2 conversion', to: 'Losses', flow: 6.242},
127+
{from: 'H2', to: 'Road transport', flow: 20.897},
128+
{from: 'Hydro', to: 'Electricity grid', flow: 6.995},
129+
{from: 'Liquid', to: 'Industry', flow: 121.066},
130+
{from: 'Liquid', to: 'International shipping', flow: 128.69},
131+
{from: 'Liquid', to: 'Road transport', flow: 135.835},
132+
{from: 'Liquid', to: 'Domestic aviation', flow: 14.458},
133+
{from: 'Liquid', to: 'International aviation', flow: 206.267},
134+
{from: 'Liquid', to: 'Agriculture', flow: 3.64},
135+
{from: 'Liquid', to: 'National navigation', flow: 33.218},
136+
{from: 'Liquid', to: 'Rail transport', flow: 4.413},
137+
{from: 'Marine algae', to: 'Bio-conversion', flow: 4.375},
138+
{from: 'Ngas', to: 'Gas', flow: 122.952},
139+
{from: 'Nuclear', to: 'Thermal generation', flow: 839.978},
140+
{from: 'Oil imports', to: 'Oil', flow: 504.287},
141+
{from: 'Oil reserves', to: 'Oil', flow: 107.703},
142+
{from: 'Oil', to: 'Liquid', flow: 611.99},
143+
{from: 'Other waste', to: 'Solid', flow: 56.587},
144+
{from: 'Other waste', to: 'Bio-conversion', flow: 77.81},
145+
{from: 'Pumped heat', to: 'Heating and cooling - homes', flow: 193.026},
146+
{from: 'Pumped heat', to: 'Heating and cooling - commercial', flow: 70.672},
147+
{from: 'Solar PV', to: 'Electricity grid', flow: 59.901},
148+
{from: 'Solar Thermal', to: 'Heating and cooling - homes', flow: 19.263},
149+
{from: 'Solar', to: 'Solar Thermal', flow: 19.263},
150+
{from: 'Solar', to: 'Solar PV', flow: 59.901},
151+
{from: 'Solid', to: 'Agriculture', flow: 0.882},
152+
{from: 'Solid', to: 'Thermal generation', flow: 400.12},
153+
{from: 'Solid', to: 'Industry', flow: 46.477},
154+
{from: 'Thermal generation', to: 'Electricity grid', flow: 525.531},
155+
{from: 'Thermal generation', to: 'Losses', flow: 787.129},
156+
{from: 'Thermal generation', to: 'District heating', flow: 79.329},
157+
{from: 'Tidal', to: 'Electricity grid', flow: 9.452},
158+
{from: 'UK land based bioenergy', to: 'Bio-conversion', flow: 182.01},
159+
{from: 'Wave', to: 'Electricity grid', flow: 19.013},
160+
{from: 'Wind', to: 'Electricity grid', flow: 289.366}
161+
];
162+
163+
Utils.load(() => {
164+
Chart.defaults.fontSize = 9;
165+
const ctx = document.getElementById('chart-area').getContext('2d');
166+
window.chart = new Chart(ctx, {
167+
type: 'sankey',
168+
data: {
169+
datasets: [{
170+
label: 'My sankey',
171+
colorFrom: (c) => getColor(c.dataset.data[c.dataIndex].from),
172+
colorTo: (c) => getColor(c.dataset.data[c.dataIndex].to),
173+
data
174+
}]
175+
},
176+
options: {
177+
responsive: true,
178+
maintainAspectRatio: false,
179+
tooltips: {
180+
callbacks: {
181+
title() {
182+
return '';
183+
// return data[tooltipItem.index].from;
184+
},
185+
label(tooltipItem) {
186+
const item = data[tooltipItem.index];
187+
return [item.from + ' -> ' + item.to, item.flow];
188+
}
189+
}
190+
},
191+
scales: {
192+
y: {
193+
type: 'linear',
194+
reverse: true,
195+
offset: true,
196+
min: 0,
197+
max: 5200
198+
},
199+
x: {
200+
type: 'linear',
201+
offset: true,
202+
min: 0,
203+
max: 8
204+
}
205+
}
206+
}
207+
});
208+
209+
});
210+
</script>
211+
</body>
212+
213+
</html>

‎samples/sankey.html

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -94,11 +94,9 @@
9494

9595
const data = [
9696
{from: "Agricultural 'waste'", to: 'Bio-conversion', flow: 124.729},
97-
{from: 'Bio-conversion', to: 'Liquid', flow: 0.597},
9897
{from: 'Bio-conversion', to: 'Losses', flow: 26.862},
9998
{from: 'Bio-conversion', to: 'Solid', flow: 280.322},
10099
{from: 'Bio-conversion', to: 'Gas', flow: 81.144},
101-
{from: 'Biofuel imports', to: 'Liquid', flow: 35},
102100
{from: 'Biomass imports', to: 'Solid', flow: 35},
103101
{from: 'District heating', to: 'Industry', flow: 10.639},
104102
{from: 'District heating', to: 'Heating and cooling - commercial', flow: 22.505},
@@ -126,20 +124,9 @@
126124
{from: 'H2 conversion', to: 'Losses', flow: 6.242},
127125
{from: 'H2', to: 'Road transport', flow: 20.897},
128126
{from: 'Hydro', to: 'Electricity grid', flow: 6.995},
129-
{from: 'Liquid', to: 'Industry', flow: 121.066},
130-
{from: 'Liquid', to: 'International shipping', flow: 128.69},
131-
{from: 'Liquid', to: 'Road transport', flow: 135.835},
132-
{from: 'Liquid', to: 'Domestic aviation', flow: 14.458},
133-
{from: 'Liquid', to: 'International aviation', flow: 206.267},
134-
{from: 'Liquid', to: 'Agriculture', flow: 3.64},
135-
{from: 'Liquid', to: 'National navigation', flow: 33.218},
136-
{from: 'Liquid', to: 'Rail transport', flow: 4.413},
137127
{from: 'Marine algae', to: 'Bio-conversion', flow: 4.375},
138128
{from: 'Ngas', to: 'Gas', flow: 122.952},
139129
{from: 'Nuclear', to: 'Thermal generation', flow: 839.978},
140-
{from: 'Oil imports', to: 'Oil', flow: 504.287},
141-
{from: 'Oil reserves', to: 'Oil', flow: 107.703},
142-
{from: 'Oil', to: 'Liquid', flow: 611.99},
143130
{from: 'Other waste', to: 'Solid', flow: 56.587},
144131
{from: 'Other waste', to: 'Bio-conversion', flow: 77.81},
145132
{from: 'Pumped heat', to: 'Heating and cooling - homes', flow: 193.026},

‎src/controller.js

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,20 @@ function sortedNodeKeys(nodes) {
9999
});
100100
}
101101

102+
function addPadding(nodes, padding) {
103+
let i = 0;
104+
let curX = 0;
105+
sortedNodeKeys(nodes).forEach(key => {
106+
const node = nodes.get(key);
107+
if (curX !== node.x) {
108+
i = 0;
109+
curX = node.x;
110+
}
111+
node.y += i * padding;
112+
i++;
113+
});
114+
}
115+
102116
export function calculateY(nodes) {
103117
let tmpY = 0;
104118
let curX = 0;
@@ -123,17 +137,9 @@ export function calculateY(nodes) {
123137
maxCount = Math.max(count, maxCount);
124138
});
125139
const padding = maxY / maxCount / 20;
126-
let i = 0;
127-
curX = 0;
128-
sortedNodeKeys(nodes).forEach(key => {
129-
const node = nodes.get(key);
130-
if (curX !== node.x) {
131-
i = 0;
132-
curX = node.x;
133-
}
134-
node.y += i * padding;
135-
i++;
136-
});
140+
141+
addPadding(nodes, padding);
142+
137143
return maxY + maxCount * padding;
138144
}
139145

0 commit comments

Comments
 (0)