This repository has been archived by the owner on Dec 4, 2024. It is now read-only.
forked from TIMAMP/timamp.github.io
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
executable file
·468 lines (415 loc) · 25.5 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
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>TIMAMP - Time Integrated Multi-Altitude Migration Patterns</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/agency.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<link href="css/timamp.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" class="index">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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 page-scroll" href="#page-top">TIMAMP</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden"><a href="#page-top"></a></li>
<li><a class="page-scroll" href="#project">Project</a></li>
<li><a class="page-scroll" href="#portfolio-1">Results</a></li>
<li><a class="page-scroll" href="#team">Team</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<header>
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">An experimental bird migration visualization</div>
<div class="intro-heading">Time Integrated <br> Multi-Altitude <br>Migration Patterns</div>
<a href="#project" class="page-scroll btn btn-xl">About the project</a>
</div>
</div>
</header>
<!-- Services Section -->
<section id="project">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">The project</h2>
<!-- <h3 class="section-subheading text-muted">The Problem</h3>-->
</div>
</div>
<div class="row text-center">
<div class="col-sm-6">
<h4 class="service-heading">The Problem</h4>
<p class="text-muted text-justify">Every year hundreds of millions of birds migrate to and from their wintering and breeding grounds, often traveling hundreds, if not thousands of kilometers twice a year. Many of these individuals make concentrated movements under the cover of darkness, and often at high altitudes, making it exceedingly difficult to precisely monitor the passage of these animals.</p>
<p class="text-muted text-justify">However one tool, radar, has the ability to measure the mass flow of migrants both day and night at a temporal and spatial resolution that cannot be matched by any other monitoring tool. Weather surveillance radars such as those of the <a href="http://www.eumetnet.eu/radar-network">EUMETNET/OPERA</a> and <a href="http://www.roc.noaa.gov/WSR88D/Maps.aspx">NEXRAD</a> networks continually monitor and collect data in real-time, monitoring meteorological phenomena, but also biological scatters (birds, bats, and insects). For this reason radar offers a unique tool for collecting large-scale data on biological movements. However, visualizing these data in a comprehensive manner that facilitates insight acquisition, remains a challenge.</p>
</div>
<div class="col-sm-6">
<h4 class="service-heading">Our contribution</h4>
<p class="text-muted text-justify">To help tackle this challenge, the <a href="http://www.enram.eu">European Network for the Radar Surveillance of Animal Movement (ENRAM)</a> organized the <a href="http://enram.challengepost.com">Bird Migration Visualization Challenge & Hackathon</a> in March 2015 with the support of the <a href="http://www.cost.eu">European Cooperation in Science and Technology (COST)</a> programme. We participated and explored a particular approach.</p>
<p class="text-muted text-justify">Using radar measures of bioscatter (birds, bats, and insects), algorithms can estimate the density, speed, and direction of migration movement at different altitudes around a radar. By interpolating these data both spatially and temporally, and mapping these geographically in the form of flow lines, a visualization might be obtained that offers insights in the migration patterns when applied to a large-scale dataset. The result is an experimental interactive web-based visualization that dynamically loads data from the given <a href="https://github.com/enram/case-study">case</a> study served by the <a href="http://cartodb.com">CartoDB</a> system.</p>
</div>
</div>
<div class="row" style="margin-top: 1em">
<div class="col-lg-12 text-center">
<a href="#portfolio-1" class="page-scroll btn btn-xl">See the results</a>
</div>
</div>
</div>
</section>
<!-- Portfolio-1 Grid Section -->
<section id="portfolio-1" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Results</h2>
<h3 class="section-subheading text-muted">Examples</h3>
</div>
</div>
<div class="row text-justify">
<div class="col-sm-6">
<!--<h4 class="service-heading">Radar locations and measures</h4>-->
<p class="text-muted">The visualizations utilizes data from five radar locations from The Netherlands and Belgium; Den Helder, De Bilt, Jabbeke, Zaventem, and Wideumont. These visualizations depict general migratory patterns from radar measures interpolated across a sequence of 20-minute time windows.
Flow line color indicates height of observation (0.3-3.9 km), density of lines reflects bird density (birds/km<sup>3</sup>), line length corresponds with ground speed (m/s), and direction of line segments matches the average movement direction (degree).</p>
<p class="text-muted">The flow lines are initialized at random positions within the radar domain (radius 100 km). The amount of lines corresponds linearly to the average density over the full duration of the shown period. </p>
</div>
<div class="col-sm-6">
<p class="text-muted">Each flow line consists of a number of segments, one for each time window. The direction of each segment is the average direction observed during the given time window at the given altitude. The length of each section reflects the distance traveled during the time window at the average speed observed during the given time window at the given altitude. Both the speed and the direction are interpolated at the (starting) position of each segment on the map using inverse distance weighting with power 2.</p>
<p class="text-muted">The following examples show the time-integrated flow lines for six consecutive nights for approximately six hours from 21h00 till 3h00 during the spring migration season in 2013. </p>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<img src="img/screenshots/tiflows-130406-2100-0300.png" class="img-responsive" alt="">
<div class="portfolio-caption">
<h4>Night of April 6, 2013, 21h-03h</h4>
<p class="text-muted">Night of April 6 2013, 21h-03h</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<img src="img/screenshots/tiflows-130407-2100-0300.png" class="img-responsive" alt="">
<div class="portfolio-caption">
<h4>Night of April 7, 2013, 21h-03h</h4>
<p class="text-muted">Night of April 7 2013, 21h-03h</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<img src="img/screenshots/tiflows-130408-2100-0300.png" class="img-responsive" alt="">
<div class="portfolio-caption">
<h4>Night of April 8, 2013, 21h-03h</h4>
<p class="text-muted">Night of April 8 2013, 21h-03h</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<img src="img/screenshots/tiflows-130409-2100-0300.png" class="img-responsive" alt="">
<div class="portfolio-caption">
<h4>Night of April 9, 2013, 21h-03h</h4>
<p class="text-muted">Night of April 9 2013, 21h-03h</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<img src="img/screenshots/tiflows-130410-2100-0300.png" class="img-responsive" alt="">
<div class="portfolio-caption">
<h4>Night of April 10, 2013, 21h-03h</h4>
<p class="text-muted">Night of April 10, 2013, 21h-03h</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<img src="img/screenshots/tiflows-130411-2100-0300.png" class="img-responsive" alt="">
<div class="portfolio-caption">
<h4>Night of April 11, 2013, 21h-03h</h4>
<p class="text-muted">Night of April 10, 2013, 21h-03h</p>
</div>
</div>
</div>
<div class="row" style="margin-top: 1em">
<div class="col-lg-12 text-center">
<a href="#portfolio-2" class="page-scroll btn btn-xl">Test the interactive visualizations</a>
</div>
</div>
</div>
</section>
<!-- Portfolio-2 Grid Section -->
<section id="portfolio-2" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Results</h2>
<h3 class="section-subheading text-muted">Interactive visualizations</h3>
</div>
</div>
<div class="row text-justify">
<div class="col-md-2"></div>
<div class="col-md-8">
<p class="text-muted">The following interactive visualizations allow you to explore the migration data in the case studies, which covers seven consecutive days during the spring migration season in 2013.</p>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4 portfolio-item">
<!-- <div class="col-md-6 col-sm-6 portfolio-item">-->
<a href="http://timamp.github.io/timamp/v2/case-eu.html" class="portfolio-link" data-toggle="modal">
<img src="img/screenshots/tipaths_v2_eu.png" class="img-responsive" alt="Screenshot of the interactive European Case Study Interface">
</a>
<div class="portfolio-caption">
<h4>North-West Europe Case Study (v2)</h4>
</div>
</div>
<div class="col-md-4 col-sm-4 portfolio-item">
<!-- <div class="col-md-6 col-sm-6 portfolio-item">-->
<a href="http://timamp.github.io/timamp/v2/case-us.html" class="portfolio-link" data-toggle="modal">
<img src="img/screenshots/tipaths_v2_us.png" class="img-responsive" alt="Screenshot of the interactive USA Case Study Interface">
</a>
<div class="portfolio-caption">
<h4>North-East U.S.A. Case Study (v2)</h4>
</div>
</div>
</div><!-- end: row -->
<div class="row">
<div class="col-md-4 col-sm-4 portfolio-item">
<!-- <div class="col-md-6 col-sm-6 portfolio-item">-->
<a href="timamp/tipaths/tipaths_01/" class="portfolio-link" data-toggle="modal">
<img src="img/screenshots/tipaths1.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Time Integrated 4-Strata Migration Flows (v1)</h4>
</div>
</div>
<div class="col-md-4 col-sm-4 portfolio-item">
<a href="timamp/tipaths/tipaths_03/" class="portfolio-link" data-toggle="modal">
<img src="img/screenshots/tipaths3.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Time Integrated Multi-Altitude Migration Flows (v1)</h4>
</div>
</div>
<div class="col-md-4 col-sm-4 portfolio-item">
<!-- <div class="col-md-6 col-sm-12 portfolio-item">-->
<a href="timamp/tipaths/animation_01/" class="portfolio-link" data-toggle="modal">
<img src="img/screenshots/animation_01.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Animated Migration Flows (v1)</h4>
</div>
</div>
</div><!-- end: row -->
<div class="row" style="margin-top: 1em">
<div class="col-lg-12 text-center">
<a href="#details" class="page-scroll btn btn-xl">Learn more...</a>
</div>
</div>
</div>
</section>
<!-- Team Section -->
<section id="details" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Further reading</h2>
</div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
This project is described in more detail in the following PLOS ONE publication:<br />
<a href="http://dx.doi.org/10.1371/journal.pone.0160106">Judy Shamoun-Baranes et al., <emph>Innovative Visualizations Shed Light on Avian Nocturnal Migration.</emph> PLOS ONE, August 24, 2016</a>
</div>
<div class="col-md-2"></div>
</div><!-- end: row -->
<div class="row" style="margin-top: 1em">
<div class="col-lg-12 text-center">
<a href="#team" class="page-scroll btn btn-xl">Meet the team...</a>
</div>
</div>
</div>
</section>
<!-- Team Section -->
<section id="team" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">The Team</h2>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="team-member">
<img src="img/team/1.jpg" class="img-responsive img-circle" alt="">
<h4>Wouter Van den Broeck</h4>
<p class="text-muted">Data & Analytics Research Engineer at <a href="http://imec.be">imec</a>, BE.</p>
<ul class="list-inline social-buttons">
<li><a href="http://addith.be" target="_blank"><i class="fa fa-home"></i></a></li>
<li><a href="http://be.linkedin.com/in/woutervandenbroeck" target="_blank"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
<div class="col-sm-3">
<div class="team-member">
<img src="img/team/2.jpg" class="img-responsive img-circle" alt="">
<h4>Jan Klaas Van Den Meersche</h4>
<p class="text-muted">Web Development Lecturer at Erasmus University College Brussels, BE</p>
<ul class="list-inline social-buttons">
<li><a href="https://www.linkedin.com/pub/jan-klaas-van-den-meersche/30/58b/547" target="_blank"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
<div class="col-sm-3">
<div class="team-member">
<img src="img/team/4.jpg" class="img-responsive img-circle" alt="">
<h4>Kyle Horton</h4>
<p class="text-muted">PhD Student in Ecology and Evolutionary Biology, University of Oklahoma, US</p>
<ul class="list-inline social-buttons">
<li><a href="https://www.linkedin.com/pub/kyle-horton/71/271/b43" target="_blank"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
<div class="col-sm-3">
<div class="team-member">
<img src="img/team/3.jpg" class="img-responsive img-circle" alt="">
<h4>Sérgio Branco</h4>
<p class="text-muted">Student in Electrical Engineering, University of Minho, PT</p>
<ul class="list-inline social-buttons">
<li><a href="https://www.linkedin.com/profile/view?id=315468238"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 text-justify">
<h4>Thanks to: </h4>
Judy Shamoun-Baranes and Willem Bouten at University of Amsterdam (NL), Peter Desmet at INBO (BE), Hans van Gasteren and Arie Dekker at Royal Netherlands Air Force (NL), Hidde Leijnse at KNMI (NL), Jose Alves at University of East Anglia (UK), Suzannah Chapman at Rothamsted Research (UK), CartoDB (ES), Kobe Vermeire, Frank Lanssens and Danny Siroyt at Erasmus University College Brussels (BE), Patrik Oosterlynck at INBO (BE) and Klara Verhaert.
</div>
<div class="col-md-3"></div>
</div>
</div>
</section>
<footer>
<div class="license-div">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons Licence" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Time Integrated Multi-Altitude Migration Patterns</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://timamp.github.io" property="cc:attributionName" rel="cc:attributionURL">Wouter Van den Broeck, Jan Klaas Van Den Meersche, Kyle Horton and Sérgio Branco</a><br>is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.
</div>
</footer>
<!-- Portfolio Modals -->
<!-- Use the modals below to showcase details about your portfolio projects! -->
<!-- Portfolio Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 col-lg-offset-0">
<div class="modal-body">
<!-- Project Details Go Here -->
<iframe src="timamp/tipaths/tipaths_01/index.html" width="800" height="900" style="border:0"></iframe>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 2 -->
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 col-lg-offset-0">
<div class="modal-body">
<!-- Project Details Go Here -->
<iframe src="timamp/tipaths/tipaths_03/index.html" width="800" height="900" style="border:0"></iframe>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 3 -->
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 col-lg-offset-0">
<div class="modal-body">
<!-- Project Details Go Here -->
<iframe src="timamp/tipaths/animation_01/index.html" width="800" height="900" style="border:0"></iframe>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/agency.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-61546165-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>