-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
150 lines (120 loc) · 6.9 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
140
141
142
143
144
145
146
147
148
149
150
<!-- Name: Michael Zonneveld
Studentnumber: 11302984
Date: 28/06/18 -->
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="vendor/css/scrolling-nav.css" rel="stylesheet">
<!-- d3 libaries -->
<script src="external_libraries/d3.v4.js"></script>
<script src="external_libraries/d3-legend.js"></script>
<script src="external_libraries/colorbrewer.min.js"></script>
<!-- source code -->
<script src=code/javascript/dendrogram.js></script>
<script src=code/javascript/linegraph.js></script>
<script src=code/javascript/main.js></script>
<script src=code/javascript/onload.js></script>
<script src=code/javascript/update.js></script>
<script src=code/javascript/importData.js></script>
<link rel="stylesheet" href="code/css/canvas.css">
<title>Dutch Trust</title>
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Programmeerproject</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#story">Nederlands vertrouwen</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#firstVis">Lijngrafiek</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#secondVis">Dendrogram</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="seperator"></div>
<header id="bigheader" style="background-color: #223e8d" class="bg-primary text-white">
<div class="container text-center" style="background-color: #223e8d">
<h1>Verschillen in Participatie, Interesse en Vertrouwen in de Nederlandse Politiek (2012 - 2017)</h1>
<p class="lead">Door Michael Zonneveld</p>
<p>11302984</p>
</div>
</header>
<!-- nice picture of the Hague's Binnenhof -->
<div class="parallax"></div>
<section id="story">
<div class="container">
<div class="col-sm-8 mx-auto">
<h2>Nederlands vertrouwen</h2>
<p class="lead">Sinds de Brexit, het afschaffen van de dividendbelasting, de overwinning van Trump en het touwtje uit de brievenbus van Jan Terlouw, bekommert men zich over het vertrouwen in elkaar en in de politiek. Hebben we echt minder vertrouwen gekregen de afgelopen jaren? En wat zouden hier de redenen achter kunnen zijn? Op deze website kunt u een gedeeltelijk antwoord krijgen op deze vraag aan de hand van datavisualisaties. </p>
</div>
</div>
</section>
<section id="firstVis" class="bg-light">
<div class="container">
<div class="row">
<h2>Vertrouwen in de overheid, publieke instanties, de pers en elkaar</h2>
<p class="lead"> Hier onder is in een multi-lijngrafiek waar het vertrouwen in de overheid, publieke instanties, de pers en elkaar weergeven is in percentages vanaf jaar 2012 tot en met 2017. Onderaan is een menu waar u een bevolkingsgroep kan kiezen op basis van migratieachtergrond. Zoals u ziet is over het algmeen het vertrouwen in andere mensen over de jaren heen toegenomen onder de Nederlandse bevolking. Eveneens is het vertrouwen in de Tweede Kamer en de Europese Unie gegroeid. Er zijn geen verandering qua vertrouwen in de pers over de jaren heen. Als u op een jaar klikt wordt de Dendrogram verder op de pagina aangepast op basis van uw keuze. </p>
<div class="col-md-auto" id="linegraph"></div>
<div class="col-md-auto" id="linegraphLegend"></div>
<!-- DROPDOWN -->
<div class = "col-sm-auto", id="description">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Kies bevolkingsgroep</button>
<ul class ="dropdown-menu", id="dropit=">
<li><a id ="selectTotaal" href="#totaal">Het totale gemiddelde van de bevolking</a></li>
<li><a id ="selectNederlands" href="#nederlands"> Nederlanders zonder migratieachtergrond</a></li>
<li><a id ="selectWesters" href="#westers"> Nederlanders met een westerse migratieachtergrond</a></li>
<li><a id ="selectNietWesters" href="#nietWesters"> Nederlanders met een niet-westerse migratieachtergrond</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section id="secondVis">
<div class="container">
<div class="row" id="dendrogram">
<h2 id="denTitle">Politieke participatie en interesse, mate van internetgebruik en uitgevoerde acties op dienstverleningswebsites</h2>
<p id ="denLead" class="lead">Hieronder ziet u percentages wat betreft politieke participatie, politieke interesse, mate van internetgebruik en uitgevoerde acties op dienstverleningswebsites in een dendrogram met horizontale staafdiagram.
De selecties die u hierboven heeft uitgevoerd worden hier weergeven.
U kunt hier ontdekken of er een verschil ligt tussen Nederlandse bevolkingsgroepen wat betreft politieke participatie en interesse.
Zo is er een stijging te zien van mensen die niet geïntereseerd zijn in politiek.
Ook kunt u gegevens zien over de frequentie van het internet gebruik en hoe vaak men acties uitvoert op dienstverleningwebsites.
Deze gegevens zijn relevant omdat officiele documentatie van de overheid mogelijk een effect kan hebben op het vertrouwen dat men heeft in de overheid.</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Michael F. Zonneveld 2018</p>
<p class="m-0 text-center text-white">Data source: CBS 2018</p>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom JavaScript for this theme -->
<script src="vendor/js/scrolling-nav.js"></script>
</body>
</html>