-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
374 lines (351 loc) · 13.1 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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Air Quality: How much can we trust official data?</title>
<link rel="stylesheet" type="text/css" href="scrollymaps/styles.css" />
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,800|Raleway:900&display=swap"
rel="stylesheet"
/>
<!-- scrollama.js -->
<script src="https://unpkg.com/[email protected]/intersection-observer.js"></script>
<script src="https://unpkg.com/scrollama"></script>
<!-- D3 -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- polyfill for position:sticky -->
<script src="lib/stickyfill.min.js"></script>
<!-- Leaflet (CSS "*must* be loaded before JS)-->
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""
/>
<script
src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""
></script>
<!-- shared data parsing functions -->
<script src="shared/parseData.js"></script>
</head>
<body>
<div id="background"></div>
<main>
<section id="intro">
<hr />
<h1>Air Quality: How much can we trust official data?</h1>
<h2>Investigating PM10 data for Münster</h2>
<hr />
<p>
The air we breathe carries some harmful particles called
<a href="https://en.wikipedia.org/wiki/Particulates#Health_effects"
>PM</a
>
or Particulate Matter.They are broadly categorized into PM10 and PM
2.5 corresponding to particulate matter smaller than 10 micrometers
and 2.5 micrometers respectively.
</p>
<br />
<p>
Unfortunately, these particles have major effects on our health. A
2013 report by
<a href="https://www.who.int/airpollution/ambient/health-impacts/en/"
>WHO</a
>
states that poor ambient air quality can cause cancer, inflammation of
lungs which can cause premature deaths.
</p>
<br />
<p>
We are notified about the air quality around us through measurement
instruments deployed in various parts of our cities. There are two
official air quality measurement stations in Münster. But the
measurements reported have some uncertainties or errors associated
with them. These can be broadly divided into three categories:
</p>
<br />
<div id="sectionList">
<a class="colourSectionA" href="#headingA">
<b>Measurement (hardware-based) uncertainty</b> <br />
The capability and accuracy of the instrument vary with its hardware
quality. A cheaper instrument may be less accurate.
</a>
<a class="colourSectionB" href="#headingB">
<b>Temporal (time-based) uncertainty</b> <br />
An arithmetic average of all values of measurements over one hour or
a day does not really reflect the true measurement at a point in
time. An hourly average can be misleading
</a>
<a class="colourSectionC" href="#headingC">
<b>Spatial (distance-based) uncertainty</b> <br />
A fixed instrument at a location might not be able to accurately
measure air quality at the other end of the city. One value for an
entire city can be misleading as well.
</a>
<br />
</div>
</section>
<div class="colourSectionA sectionContainer">
<h2 id="headingA">Measurement Uncertainty</h2>
<section id="scrollyA" class="scrolly">
<!-- individual text boxes on the left -->
<article>
<div class="step height1" data-step="1">
<div class="stepInner">
<p>
Instruments like this have been deployed all over Germany to
measure the quality of air. But these instruments are neither
cheap nor small. This hinders easy and widespread deployment.
</p>
<br />
<p>
For the state of North Rhine-Westphalia, you can see an
overview of the hourly updated measured values of various
parameters on the
<a
href="https://www.lanuv.nrw.de/umwelt/luft/immissionen/aktuelle-luftqualitaet/partikel-pm25-feinstaub"
>LANUV</a
>
website and a calculated air quality index (AQI) on
<a href="https://www.aqicn.org/map/germany/">aqicn.org</a>.
</p>
<br />
<p>
But that’s not all.
</p>
</div>
</div>
<div class="step height1" data-step="2">
<div class="stepInner">
<p>
The Institute of Geoinformatics at the University of Münster
has its citizen science project called
<a href="https://sensebox.github.io/en/">senseBox</a>. They
provide Do-It-Yourself air quality measurement kits. It is
capable of measuring PM10 and PM2.5 with a wide range of
sensors configurations. But the quality of hardware introduces
accuracy issues.
</p>
<p>
The data can be shared using their
<a href="https://opensensemap.org/">openSenseMap</a>.
</p>
<br />
<p>
Along with such initiatives, there are researchers working on
measuring air quality as well.
</p>
</div>
</div>
<div class="step height1" data-step="3">
<div class="stepInner">
<p>
An example would be the Landscape ecology group at the
University of Münster and their mobile air quality measurement
instrument. They have retrofitted a bicycle with an air
quality measurement instrument.
</p>
<p>
This bike can be ridden around the city and can measure air
quality while moving. As the bike is capable of carrying a
larger load, the quality of the sensors is between senseBox
and LANUV. But the bike has a power limitation since it relies
on batteries for sensors.
</p>
</div>
</div>
<div class="step height1" data-step="4">
<div class="stepInner">
<p>
All in all, three levels of measurement instruments can be
identified. senseBox as the most affordable, the bike as a
mobile sensor with a better instrument and LANUV as the
industrial sensor used for official purposes
</p>
</div>
</div>
</article>
<!-- this is the block on the right -->
<figure>
<!-- <p> -->
<img src="img/lanuv.jpg" alt="test pic" />
<!-- </p> -->
</figure>
</section>
</div>
<div class="colourSectionB sectionContainer">
<h2 id="headingB">Temporal (time-based) Uncertainty</h2>
<section id="scrollyB" class="scrolly">
<!-- individual text boxes on the left -->
<article>
<div class="step height2" data-step="1">
<div class="stepInner">
<p>
The official stations in Münster only publish data averaged
over one hour. But it just so happens that the air quality
around you can be disrupted by, for example, the vehicles
driving around you. This is an instantaneous change and will
not be reflected in an hourly update.
</p>
<p>
The map shows two stations in Münster with the values of PM10
throughout the day. As you scroll, the timer on the map
changes and so do the measurements. Different colors show
different values. The scale on the bottom right shows the
range of measurements.
</p>
<p>
We know PM2.5 is considered more dangerous than PM10 but the
official stations in Münster do not measure PM2.5 at all.
</p>
</div>
</div>
<div class="step height1" data-step="2">
<div class="stepInner">
<p>
Therefore, we used the bike to cover the area around one of
the stations (Münster-Geist) to understand if the air quality
differs drastically in one hour.
</p>
<p>
We found a considerable variation in PM10 values. Some
anomalies were introduced by cars passing by corresponding to
the high values on the map. Officially, we have a single value
of PM10 for the entire bike ride to compare to. You can see
how much the air quality varies.
</p>
</div>
</div>
<div class="step height3" data-step="3">
<div class="stepInner">
<p>
For a more consistent comparison, we also deployed a senseBox
next to the LANUV station. The senseBox measures PM10 every
1/4<sup>th</sup> second. This made it a perfect crossover
between LANUV and the bike. As seen here, the PM10 values
measured by senseBox also vary a lot in one hour.
</p>
</div>
</div>
<div class="step height3" data-step="4">
<div class="stepInner">
<p>
We can say that the data published by LANUV can be misleading
as it does not reflect changes in that hour. The bike data
shows changes within the hour but it only measures once at a
location and moves on. A senseBox can be a preliminary source
if enough of them are deployed but again,sensor quality
matters.
</p>
</div>
</div>
</article>
<!-- this is the block on the right -->
<figure>
<div id="mapB"></div>
<div id="timeB">
<p></p>
</div>
<div id="legendB"></div>
</figure>
</section>
</div>
<div class="colourSectionC sectionContainer">
<h2 id="headingC">Spatial (distance-based) Uncertainty</h2>
<section id="scrollyC" class="scrolly">
<!-- individual text boxes on the left -->
<article>
<div class="step height1" data-step="1">
<div class="stepInner">
<p>
Imagine you are at the red spot and you want to know the air
quality where you stand.
</p>
</div>
</div>
<div class="step height1" data-step="2">
<div class="stepInner">
<p>
A simplistic approach would be to check the measurement at the
nearest station, say the one at Weseler Strasse which is a
busy street. The measurement would be way higher than it is at
your location as you would be standing on a quiet street.
</p>
</div>
</div>
<div class="step height1" data-step="3">
<div class="stepInner">
<p>
A scientific approach to this would involve calculating
interpolations based on the measurements from the bike. This
method gives you an estimate of the air quality.
</p>
</div>
</div>
<div class="step height1" data-step="4">
<div class="stepInner">
<p>
However, it is still an estimate. The bike route does not pass
close by the location where you stand. The accuracy of
interpolations reduces as you move away from the actual
measurement. Moreover, no information on the surroundings
(buildings, resulting in air circulation, type of road,
traffic, industry, etc.) was taken into account.
</p>
</div>
</div>
</article>
<!-- this is the block on the right -->
<figure>
<div id="mapC"></div>
<div id="legendC"></div>
</figure>
</section>
</div>
<section id="outro">
<br />
<br />
<p>
Air quality measurement is not an easy task considering the
uncertainties it introduces in the measurement. The accuracy of
measurements will increase with the number of instruments. The three
types of instruments mentioned above can be a reliable source of
information as they cover up the most important uncertainties.
</p>
<br />
<p>
But there are so many factors which still affect air quality. Weather
is one of such factors. A strong wind or rain affects air quality
drastically. Sunshine causes some pollutants to undergo chemical
reactions, producing smog. Higher temperatures speed up chemical
reactions in the air as well.
</p>
<br />
<p>
This website is designed to be an information platform about the
various challenges in air quality measurement. It is a top-down
perspective about measurement uncertainties over an entire city. We
also created an AR app for an immersive experience. It shows air
quality information at your location. Click the button below.
</p>
<br />
<div id="outrobuttons">
<div><a href="AR" id="arbutton">See Air Quality in AR</a></div>
<p>or scan</p>
<div><img src="img/QR.png" /></div>
</div>
</section>
</main>
<script type="text/javascript" src="scrollymaps/script.js"></script>
<script src="scrollymaps/particles.min.js"></script>
<!-- prettier-ignore -->
<script type="text/javascript">
particlesJS.load('background', 'scrollymaps/particlesjs-config.json', function() {
console.log('callback - particles.js config loaded');
});
</script>
</body>
</html>