-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
310 lines (286 loc) · 19.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
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
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="lib/ol/ol.css" type="text/css">
<link rel="stylesheet" href="lib/bootstrap-3.3.6-dist/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<title>Plastic Adrift</title>
</head>
<body>
<div id="main" class="container container-full">
<nav class="navbar navbar-default">
<div class="col-lg-2"></div>
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img id="logo" class="img-responsive" src="img/plasticadriftlogo.png" alt="Adrift"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a id="howlink" href="#howBox">How do we know?</a></li>
<li><a id="faqlink" href="#faqBox">FAQ</a></li>
<li><a id="teamlink" href="#teamBox">Team</a></li>
<li><a id="plasticlink" href="#plasticBox">Duckies & Other Plastic</a></li>
<li><a id="downloadlink" href="#downloadBox">Download</a></li>
<li><a id="languagelink" href="#languageBox">Language</a></li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div id="mapContainer" class="col-md-12 content-container">
<!-- Infoboxes -->
<div style="display: none">
<!-- Forward Backward -->
<div id= "fwdbwdBox" class="textbox" ><h3>Choose the direction of your experiment</h3>
<div class="infoBoxPopUp">
<div id="backward" class="arrowBox" style="">
<a href="#backward">
<img src="img/fwdbwd/bwdbutton.png" class="img-responsive" alt="Forward">
<h4 class="infoBoxCaption">Backward</h4>
</a>
</div>
<div id="forward" class="arrowBox" style="">
<a href="#forward">
<img src="img/fwdbwd/fwdbutton.png" class="img-responsive" alt="Forward">
<h4 class="infoBoxCaption">Forward</h4>
</a>
</div>
</div>
</div>
</div>
<div style="display: none">
<div id= "howBox" class="textbox" >
<h3>How do we know?</h3>
<p>
The scientific methods used to calculate the paths of floating debris through our ocean for 10 years after release are quite complicated. It is perhaps best summarised in the video below
</p>
<iframe width="750" height="422" src="https://www.youtube.com/embed/M4UK9Yt6A-s" frameborder="0" allowfullscreen></iframe>
<p>
Our ocean makes up 70 per cent of the Earth's surface and is in constant motion. Driven by the sun and the wind our ocean develops mighty currents and <a target="_blank" href="http://oceanservice.noaa.gov/facts/eddy.html">eddies</a>, some of which can take centuries to loop through all of our planet's ocean basins.
</p>
<p>
These currents also move through three dimensions. Many rise from the deep ocean near coastlines while other currents descend to the deepest parts of the ocean. These vertically descending currents are often, but not always, in the middle of the ocean in regions known as the <a target="_blank" href="http://en.wikipedia.org/wiki/Ocean_gyre">five great gyres</a>. These gyres are giant vortices spanning the whole ocean basin where water at the surface slowly spirals inwards until it sinks.
</p>
<p>
However, almost all plastic materials and lighter than water objects (such as those messages in a bottles) stay on the surface.
</p>
<p>
Since the late 1970s, ocean scientists have tracked drifting buoys but it wasn't until 1982 the World Climate Research Programme put forward the idea of a standardised global array of drifting buoys. These buoys float with the currents just like plastics except - like Twitter from the sea - they send a short message to scientists every few hours about where they are and the conditions in that location.
</p>
<p>
With this information, we have been able to create a statistical model of the surface pathways of our ocean. The plasticadrift website uses this model and generates an animation of the likely path and destination of floating debris over a ten year period, either into the future or into the past.
</p>
<p>
For the full details go to the papers <a target="_blank" href="https://iopscience.iop.org/article/10.1088/1748-9326/7/4/044040">Origin, dynamics and evolution of ocean garbage patches from observed surface drifters</a> and <a target="_blank" href="http://dx.doi.org/10.1016/j.jembe.2014.09.002">Adrift.org.au - a free, quick and easy tool to quantitatively study planktonic surface drift in the global ocean</a>. If you have any further questions you can <a target="_blank" href="https://www.uu.nl/staff/EvanSebille">contact Erik van Sebille</a>.
</p>
</div>
</div>
<div style="display: none">
<div id= "faqBox" class="textbox" >
<h3> Frequently Asked Questions</h3>
<p>
<i><b>Q:</b> Why does my plastic litter stay in the Mediterranean Sea?</i>
</p>
<p>
<b>A:</b> Again, this is a coverage issue, see also the map above. In the whole 30 years of the drifter project, there has never been a drifting buoy that crossed the Gibraltar Strait. In our transition matrix, the Mediterranean Ocean is therefore completely disconnected from the rest of the global ocean.
</p>
<p>
<i><b>Q:</b> What exactly does the scale mean?</i>
</p>
<p>
<b>A:</b> The scale on the bottom right runs from 0% to 1%. This may sound like a small number, but that is just because the plastic very quickly spreads over a large area. We have max-ed out areas where the plastic concentration is higher than 1%, in order to focus on the spread of the plastic after a few years.
</p>
<p>
<i><b>Q:</b> Why can I see only plastic litter for the coming 10 years?</i>
</p>
<p>
<b>A:</b> The 10 years maximum is a trade-off between more information and faster response times. In principle, we can advect the plastic much longer than 10 years, but it will then take much longer before you see the result. If you really want to see plastic evolution on longer time scales, <a target="_blank" href="https://www.uu.nl/staff/EvanSebille">contact us directly</a>.
</p>
<p>
<i><b>Q:</b> Can I export the raw data from the experiment? / Can I have multiple release points?</i>
</p>
<p>
<b>A:</b> You can download the data from each simulation using the 'Download' button on the top right. If you want something more 'fancy' than what the site can provide, either <a target="_blank" href="https://surfdrive.surf.nl/files/index.php/s/ZhXmLMgqUyT03EX">download the transit matrix</a> and start analysing it yourself, or <a target="_blank" href="https://www.uu.nl/staff/EvanSebille">contact me</a>.
</p>
<p>
<i><b>Q:</b> What does the clumn 'probability' in the csv file that I downloaded mean?</i>
</p>
<p>
<b>A:</b> The probability is the fraction of plastic that is in a certain grid cell at a certain time. For example, if the probability is 0.05, then 5% of the plastic is in that grid cell, and the other 95% is in other grid cells.
</p>
<p>
<i><b>Q:</b> Why do I see longitude values larger than 180 in the downloaded csv file?</i>
</p>
<p>
<b>A:</b> The longitude values in the csv file are in the range [0, 360]. If you see a value of 200, this is equivalent to a value of -160 (i.e. 160W).
</p>
<p>
<i><b>Q:</b> How can I filter the downloaded data more specifically to a region or country?</i>
</p>
<p>
<b>A:</b> You will have to do that in a spreadsheet program such as Excel. You can filter the data by latitude and longitude, and you can also filter the data by time. For example, if you want to know how much plastic is in the Indian Ocean as a function of time, you need to filter the data by latitude (30S to 30N) and longitude (20E to 120E) and sum over each year. In Excel, you can use the SUMIF() fucntion for this, or use a Pivot Table.
</p>
</div>
</div>
<div style="display: none">
<div id= "teamBox" class="textbox" >
<h3>Team members</h3>
<div class="team_member col-md-4">
<img src="img/erik.jpg" class="team-member-image img-responsive" alt="erik">
<p></p>
<p>
<b>Prof Erik van Sebille</b> is a physical oceanographer at Utrecht University, who studies the large-scale circulation of the ocean. He is particularly interested in the connection between ocean basins and the processes that determine how much water 'leaks' from one ocean basin into another. These connections are important for global climate and for the pathways of both marine organisms and debris. For more information, see <a target="_blank" href="https://www.uu.nl/staff/EvanSebille"> https://www.uu.nl/staff/EvanSebille</a>. </p>
</div>
<div class="team_member col-md-4">
<img src="img/david.jpg" class="team-member-image img-responsive" alt="david">
<p></p>
<p>
<b>David Fuchs</b> is a solutions architect with more than thirteen years of experience in software ranging from voice over IP to applications of machine learning techniques to large data sets. David brings combined experience in both engineering and science and is currently interested in software applications to large amount of data in general and climate data in particular. </p>
</div>
<div class="team_member col-md-4">
<img src="img/jack.jpg" class="team-member-image img-responsive" alt="jack">
<p></p>
<p>
<b>Jack Murray</b> is a software engineer specializing in web application development with experience in writing code for both frontend and backend. Jack helped with the initial implementation of the frontend and backend.
</div>
</div>
</div>
<div style="display: none">
<div id= "plasticBox" class="textbox" >
<h3>Duckies and Other Plastic</h3>
<p>
We show you a cute rubber duckie on the map, but the experiment you are doing when you click on the map is actually very sad. You are investigating <a target="_blank" href="https://plasticsoep.sites.uu.nl/en/">how floating plastics move in the ocean</a>.
</p>
<p>
Plastic pollution is one of the <a target="_blank" href="https://plasticsoep.sites.uu.nl/en/the-cost-of-the-plastic-soup/">biggest problems in our ocean</a>. It can <a target="_blank" href="https://plasticsoep.sites.uu.nl/en/animal-suffering/">entangle marine animals, or they can mistake it for food and eat it</a>. If that happens, the plastic <a target="_blank" href="https://plasticsoep.sites.uu.nl/en/plastic-diet/">gets into the food-chain</a>, and in particular the <a target="_blank" href="https://plasticsoep.sites.uu.nl/en/plastic-on-our-plate/">chemicals in the plastics</a> can be very harmful.
</p>
<p>
Fortunately, there are <a target="_blank" href="https://plasticsoep.sites.uu.nl/en/what-you-can-do/">things you can do yourself</a> to prevent or clean up the plastis in the ocean: use less plastic, recycle and of course <a target="_blank" href="https://plasticsoep.sites.uu.nl/en/research-into-plastic-soup/">help the scientists</a>.
</p>
</div>
</div>
<div style="display: none">
<div id= "downloadBox" class="textbox" >
<h3>Download data</h3>
<p>
You can download the data of the experiment on the screen via the link below.
</p>
<p>
<div id="downloadbar_text">
<i>First click on a point on the map</i>
</div>
</p>
<p>
The data is a comma-separated file that could be loaded into for example Excel. It has five columns: the year, the month, the latitude, the longitude and the probability (the fraction of plastic that is in a certain grid cell at a certain time; see also the FAQ). Each row in the file corresponds to one grid point on the map, and rows with the same year and month data are shown as one snapshot in the animation. The sum of probabilities for a given year and month is always 1, except for that grid cells where the probability is smaller than 0.00025 are not listed.
</p>
<p>
You are welcome and free to use the data in the file above for your scientific work. I just ask that you cite <a href="http://iopscience.iop.org/1748-9326/7/4/044040/">this scientific article</a> in any publications that use the data. Both the data and the paper are licensed under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution license</a>. Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.
</p>
<p>
If you have any questions on how to use the data, please <a href="https://www.uu.nl/staff/EvanSebille">contact me</a>.
</p>
</div>
</div>
<div style="display: none">
<div id= "languageBox" class="textbox" >
<h3><a href="index.html">English</a></h3>
<p></p>
<h3><a href="nl/index.html">Nederlands (Dutch)</a></h3>
</div>
</div>
<div style="display: none">
<div id= "accessBox" class="textbox" >
<h3>Web Content Accessibility Statement</h3>
<p>
The PlasticAdrift.org Website has not been formally assessed for compliance against Web Content Accessibility Guidelines (WCAG).
</p><p>
The software providers (Imperial College and Utrecht University) have undertaken a lot of usability improvements to the pages to improve the experience for users with disabilities and visual impairments.
</p><p>
The Website is considered to be partially conformant with WCAG 2.1 AA standards,. Partially conformant means that some parts of the content do not conform to the accessibility standards.
</p><p>
We will do our best to address all reasonable requests regarding this website and its use. Please contact <a href="https://www.uu.nl/staff/EvanSebille">contact me</a>. I endeavour to respond within 7 days.
</p>
</div>
</div>
<!-- the main map div -->
<div id="testingDiv">
<div id="mapClass" class="mapClass">
<!-- The loading bars -->
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
<div id="warningBox" class="infoBox">
Please click a point in the ocean
</div>
<div id="fwdbwd" class="infoBox"><a id="fwdbwdlink" href="#fwdbwdBox">Showing where plastic ends up</a></div>
<div id="dateBox" class="infoBox">Click a point on the ocean</div>
</div>
</div>
</div> <!-- testing div -->
</div>
<div class="push"></div>
</div>
<div class="footer">
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-1 col-lg-1">
<a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">
<img id="ccbutton" src="img/by.png" class="img-responsive" alt="CC">
</a>
</div>
<div class="col-xs-10 col-sm-10 col-md-5 col-lg-5">
You are welcome and free to use the data from this website for your scientific work. I just ask that you cite <a href="http://iopscience.iop.org/1748-9326/7/4/044040/">this scientific article</a> in any publications that use the data. Both the data and the paper are licensed under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution license</a>. Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>. The code of this page is <a href="https://github.com/adriftICL/adriftOpenLayers"> on GitHub</a>. <a id="accesslink" href="#accessBox">Web Content Accessibility Statement</a>.
If you have any questions on how to use the data, please <a href="https://www.uu.nl/staff/EvanSebille">contact me</a>.
</div>
<div class="col-xs-4 col-sm-4 col-md-2 col-lg-2">
<a href="https://www.imperial.ac.uk/" target="_blank">
<img id="impLogo" src="img/imperialLogo.png" class="img-responsive" alt="Imperial College London">
</a>
</div>
<div class="col-xs-4 col-sm-4 col-md-2 col-lg-2">
<a href="https://www.uu.nl/" target="_blank">
<img id="UULogo" src="img/UU_logo_EN_RGB.jpg" class="img-responsive" alt="Utrecht University">
</a>
</div>
<div class="col-xs-4 col-sm-4 col-md-2 col-lg-2">
<a href="http://www.climatescience.org.au/" target="_blank">
<img id="cofeLogo" src="img/cofe.png" class="img-responsive" alt="ARC Centre of Excellence for Climate System Science">
</a>
</div>
</div>
</div>
<div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="lib/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="lib/ol/ol.js" type="text/javascript"></script>
<script src="js/mapScript.js"></script>
<script src="js/analytics.js"></script>
<script src="lib/colorbox/jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="css/colorbox.css" type="text/css">
<script>
/* colorbox script TESTING*/
$(document).ready(function(){
console.log("running the colorbox function");
$(".inlineTextBox").colorbox({inline:true, width:"40%"});
$("#fwdbwdlink").colorbox({inline:true, width:"40%"});
$("#howlink").colorbox({inline:true, width:"70%"});
$("#faqlink").colorbox({inline:true, width:"70%"});
$("#teamlink").colorbox({inline:true, width:"70%"});
$("#plasticlink").colorbox({inline:true, width:"70%"});
$("#downloadlink").colorbox({inline:true, width:"70%"});
$("#languagelink").colorbox({inline:true, width:"300px"});
$("#accesslink").colorbox({inline:true, width:"70%"});
});
</script>
</body>
</html>