-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
139 lines (134 loc) · 7.35 KB
/
index.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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html>
<head>
<title>Daten gefiltert</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css"/>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
<link href='./app.css' rel='stylesheet' />
</head>
<body>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet'/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<div id="header">
<img src="moers-wappen_fuer-alle_rgb.png">
<h1>Blitzer im Moerser Stadtgebiet im Zeitraum vom 01.01.2015 bis 31.12.2015</h1>
</div>
<div id="map"></div>
<div id="best">
</div>
<script>
var blitzerIcon = L.icon({
iconUrl: 'blitzer.png',
iconSize: [43,43],
iconAnchor: [21.5, 21.5], // point of the icon which will correspond to marker's location
popupAnchor: [0, -20] // point from which the popup should open relative to the iconAnchor
});
L.mapbox.accessToken ='pk.eyJ1IjoiYmVuZTc3IiwiYSI6ImNpb3h3cjgxOTAwZGR3OWtqYWpsc3YzbmwifQ.mD3vJO8KBcSuyElpHJCarw';
var map = L.mapbox.map('map', 'mapbox.streets')
.setView([51.453546, 6.626362], 14);
var markers = new L.MarkerClusterGroup();
var max = 0;
var max_str;
var maxbus = 0;
var maxbus_str;
var maxbus_tat;
var maxsumbus = 0;
var maxsumbus_str;
d3.csv("bussgelderfaharenderverkehr.csv", function (error, data) {
var nested_data = d3.nest()
.key(function (d) {
return d.Tatort;
})
.key(function (d) {
return d.Tatort2;
})
.entries(data);
for (var j = 0; j < nested_data.length; j++) {
if (nested_data[j].values.length == 2) {
var sum = nested_data[j].values[0].values.length + nested_data[j].values[1].values.length;
var sumbus1 = 0;
var sumbus2 = 0;
var sumbus = 0;
for (var k = 0; k < nested_data[j].values[0].values.length; k++) {
sumbus1 = sumbus1 + +nested_data[j].values[0].values[k].Geldbusse;
if (maxbus < nested_data[j].values[0].values[k].Geldbusse) {
maxbus = +nested_data[j].values[0].values[k].Geldbusse;
maxbus_str = nested_data[j].key;
maxbus_tat = nested_data[j].values[0].values[k].Tbnr1;
}
}
for (var k = 0; k < nested_data[j].values[1].values.length; k++) {
sumbus2 = sumbus2 + +nested_data[j].values[1].values[k].Geldbusse;
if (maxbus < nested_data[j].values[1].values[k].Geldbusse) {
maxbus = +nested_data[j].values[1].values[k].Geldbusse;
maxbus_str = nested_data[j].key;
maxbus_tat = nested_data[j].values[1].values[k].Tbnr1;
}
}
sumbus = sumbus1 + sumbus2;
if (maxsumbus < sumbus) {
maxsumbus = sumbus;
maxsumbus_str = nested_data[j].key;
}
if (max <= sum) {
max = sum;
max_str = nested_data[j].key;
}
var marker= L.marker(new L.latLng(nested_data[j].values[0].values[0].lat, nested_data[j].values[0].values[0].lng), {icon:blitzerIcon})
marker.bindPopup(nested_data[j].key + "<br>" + "Verstöße in " + nested_data[j].values[0].key + ": " + nested_data[j].values[0].values.length + "<br> "
+ "Verstöße in " + nested_data[j].values[1].key + ": " + nested_data[j].values[1].values.length + '<br>' + "Summe der Verstöße: " + settpoint(sum)
+ "<br>" + "Summe der Bußgelder: " + settpoint(sumbus) + "€"
);
markers.addLayer(marker);
}
else {
var sumbus1 = 0;
for (var k = 0; k < nested_data[j].values[0].values.length; k++) {
sumbus1 = sumbus1 + +nested_data[j].values[0].values[k].Geldbusse;
if (maxsumbus < sumbus1) {
maxsumbus = sumbus1;
maxsumbus_str = nested_data[j].key;
}
}
var marker1 = L.marker(new L.latLng(nested_data[j].values[0].values[0].lat, nested_data[j].values[0].values[0].lng), {icon:blitzerIcon})
marker1.bindPopup(nested_data[j].key + "<br> " + "Verstöße in " + nested_data[j].values[0].key + ": " + nested_data[j].values[0].values.length
+ "<br>" + "Summe Bußgelder: " + settpoint(sumbus1) + "€"
);
markers.addLayer(marker1);
}
}
document.getElementById('best').innerHTML ='<h2>Und hier noch ein paar interessante Zahlen</h2>'
+ '<p>Die meisten Verstöße wurden in der ' + max_str + ' begangen. Es waren: ' + settpoint(max) + ' Verstöße im Jahr 2015.' +
'<br>' + "Die höchste Bußgeldsumme wurde in der " + maxsumbus_str + " erzielt. Es waren: " + settpoint(maxsumbus) + "€." +
'<br>' + 'Das höchste Bußgeld wurde auf der ' + maxbus_str + ' erzielt. Es waren: ' + settpoint(maxbus) + '€.' +
'<br>' + 'Dabei wurde folgender Tatbestand festgestellt: ' + maxbus_tat + '. Die Tatbestandsnummer besagt, dass die Person innerhalb geschlossener Ortschaften zwischen 31-40 km/h zuschnell gefahren ist.' +
'<br>' + 'Den vollständigen Tatbestandskatalog finden sie unter <a href="http://www.kba.de/DE/ZentraleRegister/FAER/BT_KAT_OWI/bkat_owi_01052014_pdf.pdf?__blob=publicationFile&v=4">Bußgeldkatalog</a>. ' +
'<br>' + 'Es wurde 2015 an ' + nested_data.length + ' Orten geblitzt.</p>' + '<p>Für Anregungen können Sie uns gerne eine E-Mail schreiben an: <a href="mailto:offenedaten@moers.de">Offene Daten Moers</a></p>' + '<p><a href="https://www.moers.de/de/inhalt/impressum-und-rechtliche-hinweise/">Impressum</a></p>';
});
map.addLayer(markers);
function settpoint(zahl) {
zahl = '' + zahl;
if (zahl.length > 3) {
var mod = zahl.length % 3;
var erg = (mod > 0 ? (zahl.substring(0, mod)) : '');
for (var i = 0; i < Math.floor(zahl.length / 3); i++) {
if ((mod == 0) && (i == 0)) {
erg += zahl.substring(mod + 3 * i, mod + 3 * i + 3);
}
else {
erg += '.' + zahl.substring(mod + 3 * i, mod + 3 * i + 3);
}
}
return (erg);
} else return zahl;
}
</script>
</body>
</html>