-
Notifications
You must be signed in to change notification settings - Fork 0
/
webPostcodeVerbruik.html
114 lines (102 loc) · 3.61 KB
/
webPostcodeVerbruik.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<html>
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="graphDiv", style="height:100%">
<script>
Plotly.d3.csv('https://raw.githubusercontent.com/rowangroeneveld/teststite/master/hoi.csv', function(err, rows){
var classArray = unpack(rows, 'SJ');
var classes = [...new Set(classArray)];
function unpack(rows, key) {
return rows.map(function(row) { return row[key]; });
}
var initlist = unpack(rows, 'SJV');
var listt = JSON.parse("[" + initlist + "]")
var outlist = []
for (i = 0;i < initlist.length; i++) {
outlist.push(parseFloat(initlist[i]/1000))
}
scl = [[0, 'rgb(150,0,90)'],[0.125, 'rgb(0, 0, 200)'],[0.25,'rgb(0, 25, 255)'],[0.375,'rgb(0, 152, 255)'],[0.5,'rgb(44, 255, 150)'],[0.625,'rgb(151, 255, 0)'],[0.75,'rgb(255, 234, 0)'],[0.875,'rgb(255, 111, 0)'],[1,'rgb(255, 0, 0)']];
var data = classes.map(function(classes) {
var rowsFiltered = rows.filter(function(row) {
return (row.class === classes);
});
return {
type: 'scattermapbox',
mode: 'markers',
text: unpack(rows, 'SJV'),
lat: unpack(rowsFiltered, 'longitude'),
lon: unpack(rowsFiltered, 'latitude'),
// hoverinfo='text',
marker: {
color: unpack(rows, 'SJV'),
colorscale: scl,
cmin: 0,
cmax: Math.max(...unpack(rows, 'SJV')),
reversescale: true,
opacity: 0.8,
size: outlist,
colorbar:{
thickness: 10,
titleside: 'right',
outlinecolor: 'rgba(68,68,68,0)',
ticks: 'outside',
ticklen: 3,
shoticksuffix: 'last',
ticksuffix: 'W/H',
dtick: 5000
}
},
name: classes,
};
});
var layout = {
title: 'Energieverbruik per postcode-6',
font: {
color: 'white'
},
dragmode: 'zoom',
mapbox: {
center: {
lat: 52.371734,
lon: 4.896645
},
domain: {
x: [0, 1],
y: [0, 1],
},
style: 'dark',
zoom: 12
},
margin: {
r: 20,
t: 40,
b: 20,
l: 20,
pad: 0
},
paper_bgcolor: '#191A1A',
plot_bgcolor: '#191A1A',
showlegend: true,
annotations: [{
x: 0,
y: 0,
xref: 'paper',
yref: 'paper',
showarrow: true
}]
};
Plotly.setPlotConfig({
mapboxAccessToken: 'pk.eyJ1IjoiZXRwaW5hcmQiLCJhIjoiY2luMHIzdHE0MGFxNXVubTRxczZ2YmUxaCJ9.hwWZful0U2CQxit4ItNsiQ'
});
Plotly.plot('graphDiv', data, layout);
});
</script>
</div>
</body>
</html>