-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
164 lines (155 loc) · 15.3 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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/index.css">
<title>Zero Waste Amsterdam</title>
</head>
<body>
<nav>
<ul>
<li><a href="#heatmap">Waar in Amsterdam?</a></li>
<li><a href="#comparison-chart">Vergelijk branches</a></li>
<!-- <li><a href="#bar-chart">Bar Chart</a></li> -->
<li><a href="#conclusie">Samenvatting</a></li>
</ul>
</nav>
<svg viewBox="0 0 261 211">
<g>
<circle cx="3.5" cy="3.5" r="3.5"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(27 0)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(54 0)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(81 0)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(108 0)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(135 0)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(162 0)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(189 0)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(216 0)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(243 0)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(270 0)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(0 27)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(27 27)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(54 27)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(81 27)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(108 27)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(135 27)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(162 27)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(189 27)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(216 27)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(243 27)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(270 27)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(0 54)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(27 54)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(54 54)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(81 54)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(108 54)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(135 54)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(162 54)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(189 54)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(216 54)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(243 54)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(270 54)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(0 81)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(27 81)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(54 81)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(81 81)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(108 81)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(135 81)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(162 81)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(189 81)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(216 81)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(243 81)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(270 81)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(0 108)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(27 108)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(54 108)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(81 108)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(108 108)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(135 108)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(162 108)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(189 108)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(216 108)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(243 108)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(270 108)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(0 135)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(27 135)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(54 135)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(81 135)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(108 135)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(135 135)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(162 135)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(189 135)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(216 135)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(243 135)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(270 135)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(0 162)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(27 162)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(54 162)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(81 162)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(108 162)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(135 162)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(162 162)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(189 162)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(216 162)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(243 162)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(270 162)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(0 189)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(27 189)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(54 189)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(81 189)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(108 189)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(135 189)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(162 189)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(189 189)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(216 189)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(243 189)"/>
<circle cx="3.5" cy="3.5" r="3.5" transform="translate(270 189)"/>
</g>
</svg>
<svg viewBox="0 0 1920.501 414.358">
<g transform="translate(0.500 -367.5)">
<path d="M-1839.237-584.142a93.569,93.569,0,0,1-19.705-2.2,126.456,126.456,0,0,1-19.613-6.049,175.935,175.935,0,0,1-19.224-9.063c-6-3.26-12.234-7.045-18.541-11.247-24.137-16.083-45.694-35.8-61.434-50.193l-.062-.057c-5.065-4.631-9.439-8.631-13.184-11.862-8.052-6.946-14.734-12.388-21.031-17.127a224.714,224.714,0,0,0-21.218-14.26c-15.3-9.008-32.058-16.111-52.75-22.353a53.142,53.142,0,0,0-15.357-2.193c-22.283,0-46.505,12.415-72.149,25.559-20.087,10.3-40.858,20.941-62.494,26.669a110.522,110.522,0,0,1-13.282,2.684,91.741,91.741,0,0,1-12.341.86,81.52,81.52,0,0,1-13.3-1.082,80.532,80.532,0,0,1-12.351-3.08,98.016,98.016,0,0,1-22.533-11.151c-14.287-9.317-27.362-21.909-41.2-35.24-2.46-2.369-5.246-5.052-7.985-7.659-13.383-12.735-35.877-36.539-61.923-64.1l-.01-.011-.006-.006c-22.359-23.661-47.7-50.48-70.529-73.656-26.209-26.61-45.028-44.282-57.532-54.024a85.682,85.682,0,0,0-18.18-10.715,116.392,116.392,0,0,0-20.16-6.632,178.775,178.775,0,0,0-40.693-4.315A246.623,246.623,0,0,0-2658-944.783V-998.5H-738v62.8a38.744,38.744,0,0,1-9,2.372c-7.205.722-15.481,2.725-25.3,6.124a307.825,307.825,0,0,0-30.052,12.52c-21.3,10.026-44.361,22.7-68.771,36.113l-.015.008c-11.117,6.109-22.612,12.427-33.86,18.434-6.055,3.233-12.143,6.886-18.094,10.857-5.671,3.785-11.4,7.983-17.04,12.478a333.87,333.87,0,0,0-31.51,28.879c-20.063,20.684-38.78,44.165-56.882,66.873l-.043.053c-6.674,8.372-13.574,17.028-20.431,25.4a293.957,293.957,0,0,1-36.453,37.164,299.719,299.719,0,0,1-42.172,30.128,284.722,284.722,0,0,1-46.109,21.962A253.6,253.6,0,0,1-1222-613.661a126.22,126.22,0,0,1-19.483,1.541,121.222,121.222,0,0,1-15.685-1.024,126.813,126.813,0,0,1-14.921-2.888,154.147,154.147,0,0,1-27.944-10.277c-17.918-8.487-34.762-19.877-51.052-30.893-8.794-5.947-17.888-12.1-26.915-17.613-8.225-5.027-15.621-9.753-22.147-13.923-31.4-20.064-50.352-32.174-99.852-39.818a163.865,163.865,0,0,0-24.849-2.021,120.481,120.481,0,0,0-26.684,2.86,120.677,120.677,0,0,0-23.1,7.763c-14.612,6.538-28.249,15.667-42.687,25.333l-.006,0c-3.771,2.525-7.67,5.135-11.67,7.756-3.8,2.489-8.115,5.355-12.686,8.389l0,0c-23.122,15.349-54.79,36.369-88.424,54.928a493.846,493.846,0,0,1-50.667,24.685c-8.588,3.513-16.8,6.448-24.4,8.723a161.013,161.013,0,0,1-22.815,5.2A78.722,78.722,0,0,1-1839.237-584.142Z" transform="translate(2658 1366)" fill="#fbb673"/>
<path d="M-1830.676-606.195h-.009a94.413,94.413,0,0,1-18.529-1.879,112.609,112.609,0,0,1-18-5.275,146.474,146.474,0,0,1-17.5-8.135c-5.5-2.992-11.227-6.511-17.017-10.457-22.379-15.255-43.354-35.114-63.639-54.319l-.005-.005c-13.617-12.892-26.479-25.069-39.1-35.238q-2.051-1.653-4-3.227c-14.383-11.6-24.775-19.988-33.972-25.489-9.5-5.678-17.479-8.1-26.7-8.1-15.5,0-35.066,6.9-70.582,19.42l-3.964,1.4c-25.237,8.894-40.552,13.865-52.862,17.159-13.347,3.572-23.354,5.165-32.449,5.165a85.6,85.6,0,0,1-20.551-2.63c-7.082-1.69-14.65-4.09-24.231-7.129l-.1-.032c-2.559-.812-5.206-1.651-8.022-2.533-6.092-1.909-13.328-5.825-21.508-11.641a252.026,252.026,0,0,1-24.924-20.734c-15.324-14.264-32.937-32.979-52.347-55.625-17.272-20.152-32.792-39.74-42.77-52.625-10.272-13.263-16.957-22.36-17.685-23.354l-.015-.02c-.217-.2-22.469-20.4-49.452-42.251-15.771-12.771-29.982-23.538-42.238-32-15.316-10.575-27.6-17.556-36.51-20.75-11.52-4.129-25.136-6.222-40.47-6.222a203.184,203.184,0,0,0-34.239,3.111c-8.561,1.5-14.19,3.045-14.425,3.11h-.006v-12H-738v14.284c-1.668,2.3-3.185,3.555-4.507,3.715a88.734,88.734,0,0,0-15.544,3.765c-6.017,1.925-13.056,4.548-20.919,7.8-14.993,6.194-33.121,14.731-52.426,24.687-39.527,20.386-80.058,44.592-108.42,64.75a299.073,299.073,0,0,0-30.167,24.862c-9.449,8.772-19.271,18.717-30.026,30.4-20.021,21.754-39.668,45.594-60.47,70.833-18.673,22.657-37.981,46.086-57.616,67.9a131.808,131.808,0,0,1-23.971,21,125.434,125.434,0,0,1-25.8,13.381,137.549,137.549,0,0,1-26.585,7.073,163.92,163.92,0,0,1-26.338,2.069,220.205,220.205,0,0,1-49.925-6.145,322.451,322.451,0,0,1-34.678-10.373c-13.092-4.638-32.4-18.03-54.752-33.537-15.557-10.791-31.643-21.949-48.127-31.95-18.852-11.438-34.67-19.129-48.358-23.513-20.842-6.674-36.592-9.651-51.07-9.651a105.576,105.576,0,0,0-16.435,1.291,141.243,141.243,0,0,0-16.615,3.707c-11.135,3.137-23.218,7.637-39.073,13.652-9.593,3.64-21.272,9.8-36.754,19.372-13.818,8.548-29.005,18.793-45.083,29.64l-.023.015c-22.683,15.3-46.139,31.128-70.2,45.3-27.468,16.179-50.786,27.192-71.285,33.669a93.664,93.664,0,0,1-13.9,3.263A89.572,89.572,0,0,1-1830.676-606.195Z" transform="translate(2658 1366)" fill="#f5da93"/>
</g>
</svg>
<img src="css/images/zerowaste.gif" alt="Letters 'zero waste' on top of leaves">
<article>
<h1>Afval in Amsterdam</h1>
<p>Momenteel rijden er verschillende vrachtwagens op verschillende tijdstippen door Amsterdam om bedrijfsafval op te halen. Dit wordt gedaan door verschillende particuliere bedrijven. Dit betekent dat er soms wel <strong>16 vrachtwagens per dag</strong> door drukke winkelstraten rijden! Allemaal om net op een ander moment het afval op te halen. De Gemeente Amsterdam wil met betrokken partijen dit verbeteren en werkt samen met de Hogeschool van Amsterdam om tot nieuwe oplossingen te komen. Om hierbij te helpen is op deze site gevisualiseerd hoeveel afval er wordt opgehaald en waar dat het meest gebeurd. Daarbij is ook gekeken naar routes die de vrachtwagens nu rijden. Deze visualisaties zijn ter ondersteuning voor het gesprek tussen alle betrokken partijen.</p>
<section id="heatmap">
<div>
<h2>Waar in Amsterdam komt veel afval vrij?</h2>
<h3>Uitleg over de kaart</h3>
<p>Op de kaart is te zien hoeveel afval er in verschillende stadsdelen wordt geproduceerd. Hoe donkerder de kleur, hoe meer afval er is. Klik op een stadsdeel om in te zoomen op de buurten. De gedetailleerde informatie is te zien <a href="#comparison-chart">hieronder</a>.</p>
<h3>Informatie</h3>
<p>Hiernaast kan je bekijken in welke stadsdelen er veel afval vrij komt. Ook kan je op de kaart klikken om specifiek te bekijken welke buurten dat zijn. Daarnaast kan je bekijken op welke dagen en welke branches er het meeste afval vrij komt binnen en bepaald stadsdeel.</p>
</div>
</section>
<section id="comparison-chart">
<div>
<h2>Vergelijk op welke dagen en binnen welke branches er afval wordt opgehaald</h2>
<p>In de tabel hieronder is te zien hoeveel afval er op welke dag en in verschillende branches wordt opgehaald. Klik op een vierhoek om het te vergelijken met het gemiddelde hoeveelheid afval van de branch op de gekozen dag.</p>
</div>
</section>
<p>Er is te zien dat in Amsterdam Zuid in de branches <i>Cultuur, sport en recreatie</i>, <i>Advisering, onderzoek en overigespecialistische zakelijkedienstverlening</i>, <i>Groot- en detailhandel; reparatie van auto’s</i>, <i>Financiële instellingen</i> en <i>Onderwijs</i> veel afval wordt opgehaald op <b>maandag</b>.</p>
<section id="bar-chart">
<h2>Hoeveel afval komt er vrij per dag binnen een branche in vergelijking tot de branche?</h2>
<h3>Uitleg afval branche</h3>
<p>In de staafdiagram is te zien hoeveel afval er vrij komt op de gekozen dag binnen die branche. Dit wordt vergeleken met het gemiddelde van de gehele branche.</p>
<img src="./css/images/barchart.png" alt="">
</section>
<section id="conclusie">
<h2>Samenvatting</h2>
<h3>Afval in Amsterdam</h3>
<p>Er is te zien dat er nog veel verbeterd kan worden. Met deze visualisaties kunnen de Gemeente en Urban Analytics van de Hogeschool van Amsterdam in gesprek gaan om te kijken op welke punten er verbeterd kan worden.</p>
</section>
</article>
<script src="https://d3js.org/d3.v5.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/[email protected]/dist/topojson.min.js" type="text/javascript"></script>
<script src="libs/d3/d3.v5.min.js" type="text/javascript"></script>
<script src="libs/topojson/topojson.min.js" type="text/javascript"></script>
<script src="./js/index.js" type="text/javascript"></script>
</body>
</html>