-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathvisualization.html
More file actions
170 lines (131 loc) · 6.23 KB
/
Copy pathvisualization.html
File metadata and controls
170 lines (131 loc) · 6.23 KB
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!-- Joos Akkerman (11304723)
MPROG Project
This file visualizes three graphs that are linked, and visualize changes in political preferences in
the Netherlands -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="project.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta charset="utf-8">
<title>Politieke Verschuivingen</title>
<!-- Import D3 V5 -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
d3v5 = d3;
window.d3 = null;
</script>
<script src="d3-tip.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="js/project.js"></script>
<script src="js/drawmap.js"></script>
<script src="js/helpers.js"></script>
<script src="js/drawLineParty.js"></script>
<script src="js/drawLineRile.js"></script>
<script src="js/drawpie.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul>
<li><a href="index.html">Uitlegpagina</a></li>
<li><a href="visualization.html">Visualisatie</a></li>
<li><a href="casestudy.html">Case Study: PvdA</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<br><br><br><h class="title"><b>Verschuivingen in Politieke voorkeur per gemeente (1946-2017)</b></h><br><br>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<p>
Deze kaart geeft in kleur aan hoe links of rechts de voorkeur
van de desbetreffende gemeente was bij de Tweede Kamerverkiezingen van 2017. Als u op
een van de gemeenten klikt, of een gemeente in het menu zoekt, kunt u verder op de pagina gedetailleerde
data van deze gemeente zien.
</p>
<div id="map"></div>
</div>
<div class="col-sm-1">
<div id="placeholder"></div>
<div id="legendmap"></div>
</div>
<div class="col-sm-6">
<b class="title">Verloop van politieke voorkeur:</b><br><br>
<p>
Kies hier om de absolute score van deze regio over tijd te zien, of de relatieve score ten opzichte het gemiddelde van Nederland.
De links-rechts-scores zijn afkomstig van <a href=https://manifesto-project.wzb.eu/"> The Manifesto Project</a>. Zij representeren
een door politicologen bepaalde score die voor elk jaar voor een set aan verkiezingsprogramma's is opgesteld. Voor meer informatie
over de manier van berekenen, bekijk de <a href="index.html">uitlegpagina</a>. De <span style="color: red">rode lijn</span> geeft
het verloop van Nederland weer, en de <span style="color: blue">blauwe lijn</span> geeft het verloop van de geselecteerde gemeenten weer.
</p>
<div>
<form>
<label><input class="relabs" type="radio" name="dataset" value="Absolute" checked>Absolute score</label>
<label><input class="relabs" type="radio" name="dataset" value="Relative" >Relatief ten opzichte van Nederland</label><br>
</form>
</div>
<button class="reset">Reset lijnen</button>
<div id="changechart"></div>
</div>
</div>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-3">
<h><b class="title">Data voor de regio:</b></h><br><br>
<select class="dropdownmunoptions"></select><br><br>
</div>
<div class="col-sm-3">
<p id="regionName"></p>
</div>
</div>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-10">
<div class="legendparties"></div>
</div>
<div class="col-sm-1"></div>
</div>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-6">
<div id="linechart"></div>
</div>
<div class="col-sm-3">
<div class="dropdown">
<select class="dropdownpieoptions"></select>
</div>
<div id="piechart"></div>
</div>
</div>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-6">
<p>Deze grafiek geeft de verkiezingsuitslagen van alle partijen die bij Tweede Kamerverkiezingen meer dan 1 procent van de stemmen hebben gekregen weer over een periode van 1946 tot 2017. Data is afkomstig van <a href="https://www.verkiezingsuitslagen.nl/verkiezingen/">de Kiesraad</a>.</p>
</div>
<div class="col-sm-4">
<p>Deze grafiek geeft de uitslag van alle partijen in een bepaald gedetailleerd weer. Klik op het menu om een jaar te selecteren.</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
<!-- Import D3 V3 and TopoJSON -->
<script src="datamaps.js"></script>
<!-- <script src="topojson.js"></script> -->
<!-- <script src="topojson.min.js"></script> -->
<script src="NL_mun_2017.geojson"></script>
<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script> -->
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
d3v3 = d3;
window.d3 = null;
</script>
</html>