ProgrammeerProject/data.html at master · TimMolleman/ProgrammeerProject · GitHub

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Data</title>

	<!-- load css files -->
	<link rel="stylesheet" href="/ProgrammeerProject/site/css/external/bootstrap.css"/ProgrammeerProject/>
	<link rel="stylesheet" href="/ProgrammeerProject/site/css/slider.css"/ProgrammeerProject/>
	<link rel="stylesheet" href="/ProgrammeerProject/site/css/general.css"/ProgrammeerProject/>

	<!-- load all external .js files -->
	<script src="/ProgrammeerProject/site/js/external/d3.v3.js"></script>
	<script src="/ProgrammeerProject/site/js/external/topojson.v1.js"></script>
	<script src="/ProgrammeerProject/site/js/external/datamaps.world.js"></script>
	<script src="/ProgrammeerProject/site/js/external/d3queue3.0.3.js"></script>
	<script src="/ProgrammeerProject/site/js/external/tip.js"></script>
	<script src="/ProgrammeerProject/site/js/external/jquery3.1.1.js"></script>
	<script src="/ProgrammeerProject/site/js/external/bootstrap3.3.7.js"></script>

	<!-- load rest of .js files -->
	<script src="/ProgrammeerProject/site/js/data.js"></script>
	<script src="/ProgrammeerProject/site/js/map.js"></script>
	<script src="/ProgrammeerProject/site/js/bar.js"></script>
	<script src="/ProgrammeerProject/site/js/line.js"></script>
	<script src="/ProgrammeerProject/site/js/circles.js"></script>
</head>

<body>
	<div id="header">
		<a href="index.html"><h1>Europe's Migration Crisis</h1></a>
		<div id="navigation">
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="data.html" class="current">Visualized Data</a></li>
			</ul>
		</div>
	</div>
	<div class="clear">
	</div>
	<div class="info">
		<h1>The Data Visualized</h1>
		Sources:<br>
		<a href="http://popstats.unhcr.org/en/asylum_seekers_monthly" target="_blank">United Nations High Commissioner for Refugees</a><br>
		<a href="https://en.wikipedia.org/wiki/European_migrant_crisis" target="_blank">http://en.wikipedia.org</a>

		<p>Below, a number of visualisations are available that contain information on illegal immigration to Europe between the years 2006 and 2016. For almost every European country, information is available on how many people applied for asylum in each of these years. If you click on any coloured country in the map, a bargraph below the map will show the countries of origin where most first time asylum applicants came from in the selected year. The slider can be used to select a year, and the map and barchart will update accordingly.
		</p>
		<p>
		The map also contains information on the use of <a href="http://frontex.europa.eu/trends-and-routes/migratory-routes-map/" target="_blank">migratory routes</a> to Europe by illegal immigrants. The timeslider will adjust the size of the circles - representing migratory routes - on the map based on to the number of illegal border crossings into European countries by immigrants who used these routes. Lastly, a linegraph is available that shows the usage of all migratory routes from 2006 to 2016. Clicking on one of the lines, or a migratory route in the map, will update the linegraph to only contain information on the selected route.
		</p>
	</div>
	<div id="mapcontainer" style="position: relative">
		<text class="maptitle"></text>
		<div id="map" style="position: relative"></div>
	</div>
	<div class="show-year">
		<text></text>
	</div>
	<input id="slider" type="range" name="points" min="2006" max="2016">
	<div class ="graphcontainer">
		<div class="bar">
		</div>
		<div class="line">
			<div class="butcontainer">
				<button class="linetoggle btn btn-default" type="button">All Routes</button>
			</div>
		</div>
	</div>
	<footer>
		<p>Tim Molleman, Universiteit van Amsterdam</p>
	</footer>

	<script src="/ProgrammeerProject/site/js/index.js"></script>

</body>
</html>