-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
384 lines (327 loc) · 24.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
<!DOCTYPE html>
<!-- Naam: Sanne Berendschot
Studentnummer: 10269290
Programmeerproject, UvA -->
<html>
<link rel="shortcut icon" type="image/png" href="Refugees/images/favicon.ico"/>
<title>Refugees</title>
<!-- Load all libraries -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="Refugees/javascripts/libraries/datamaps.world.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Load own scripts -->
<!-- Load css-->
<link rel="stylesheet" href="Refugees/css/refugees.css">
<!-- Load global variables and function -->
<script src="Refugees/javascripts/makeGlobalVariables.js"></script>
<script src="Refugees/javascripts/makeArrayYears.js"></script>
<!-- Load scripts for making the map -->
<script src="Refugees/javascripts/getMinMax.js"></script>
<script src="Refugees/javascripts/makeDatasetMap.js"></script>
<script src="Refugees/javascripts/makeLegend.js"></script>
<script src="Refugees/javascripts/makeSlider.js"></script>
<script src="Refugees/javascripts/makeMap.js"></script>
<!-- Load scripts for making timeline country -->
<script src="Refugees/javascripts/makeDatasetTimelineCountry.js"></script>
<script src="Refugees/javascripts/makeAxisTimelineCountry.js"></script>
<script src="Refugees/javascripts/makeTooltipTimelineCountry.js"></script>
<!-- Load scripts for making timeline total -->
<script src="Refugees/javascripts/makeDatasetTimelineTotal.js"></script>
<script src="Refugees/javascripts/makeAxisTimelineTotal.js"></script>
<script src="Refugees/javascripts/makeTooltipTimelineTotal.js"></script>
<script src="Refugees/javascripts/makeTimelines.js"></script>
<!-- Load script for making changes timelines and map -->
<script src="Refugees/javascripts/makeChangesTimelineMap.js"></script>
<!-- Load scripts for making barchart -->
<script src="Refugees/javascripts/makeDatasetBarchart.js"></script>
<script src="Refugees/javascripts/makeAxisBarchart.js"></script>
<script src="Refugees/javascripts/makeBarchart.js"></script>
<script src="Refugees/javascripts/makeChangesBarchart.js"></script>
<!-- Load scripts for making two-sided barchart -->
<script src="Refugees/javascripts/makeDatasetTwoSided.js"></script>
<script src="Refugees/javascripts/makeDomainTwoSided.js"></script>
<script src="Refugees/javascripts/makeAxisTwoSided.js"></script>
<script src="Refugees/javascripts/makeTwoSided.js"></script>
<script src="Refugees/javascripts/makeChangesTwoSided.js"></script>
<!-- Load script for making all visualisations -->
<script src="Refugees/javascripts/makeVisualisations.js"></script>
<body>
<!-- Make scroll bar -->
<div class="w3-top">
<div class="w3-bar" id="myNavbar">
<a class="w3-bar-item w3-button w3-hover-black w3-hide-medium w3-hide-large w3-right" href="javascript:void(0);" onclick="toggleFunction()" title="Toggle Navigation Menu">
<i class="fa fa-bars"></i></a>
<a href="#home" class="w3-bar-item w3-button"><i class="fa fa-home"></i> HOME</a>
<a href="#story" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-book"></i> STORY</a>
<a href="#world" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-globe"></i> WORLD OVERVIEW</a>
<a href="#conflict" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-star"></i> CONFLICT AREAS</a>
<a href="#contact" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-envelope"></i> CONTACT</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-right w3-hover-red">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<!-- Make title -->
<div class="bgimg-1 w3-display-container w3-opacity-min" id="home">
<div class="w3-display-middle" style="white-space:nowrap;">
<span class="w3-center w3-padding-large w3-black w3-xlarge w3-wide w3-animate-opacity">REFUGEES</span>
</div>
</div>
<!-- Story Section -->
<div class="w3-content w3-container w3-padding-64" id="story">
<h2 class="w3-center">Refugees around the world and in conflict areas</h2>
<p class="w3-center"><em>Data visualisations to get understanding of current developments</em></p>
<p class="w3-center"><br>On 19 June 2017, the BBC has an alarming statement: <a href="http://www.bbc.com/news/world-40321287" target="_blank" style="color: #777;"><em>"According to UN Refugee Agency, a record of people are displaced worldwide"</em></a>.<br>
This news item is one of many disturbing messages appearing these days.<br>
On this website, a variety of data visualisations is used to give insight in the available data about refugees.<br></p>
<!-- Make visualisation -->
<div class="w3-container">
<div class="w3-row w3-center">
<div class="w3-col m6 w3-center w3-padding-large" id="container5" style="position: relative; width: 500px; height: 600px;">
</div>
<div class="dropdown w3-right" id="buttonTotal">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Select absolute or percentage
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a onclick="updateGraphTotal(0)">Absolute values</a></li>
<li><a onclick="updateGraphTotal(1)">Percentage of population</a></li>
</ul>
</div>
</div>
</div>
<!-- Give information -->
<p class="w3-center"><em>"Refugees are people who are recognized as refugees under the 1951 Convention Relating to the Status of Refugees or its 1967 Protocol, the 1969 Organization of African Unity Convention Governing the Specific Aspects of Refugee Problems in Africa, people recognized as refugees in accordance with the UNHCR statute, people granted refugee-like humanitarian status, and people provided temporary protection. Asylum seekers--people who have applied for asylum or refugee status and who have not yet received a decision or who are registered as asylum seekers--are excluded. Palestinian refugees are people (and their descendants) whose residence was Palestine between June 1946 and May 1948 and who lost their homes and means of livelihood as a result of the 1948 Arab-Israeli conflict. Country of asylum is the country where an asylum claim was filed and granted." </em> - The World Bank</p>
</div>
<!-- World Overview Section -->
<div class="bgimg-2 w3-display-container w3-opacity-min" id="world">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-white w3-wide">WORLD OVERVIEW</span>
</div>
</div>
<!-- Make menu -->
<div class="w3-row w3-center w3-dark-grey w3-padding-16">
<div class="w3-fifth">
<div class="w3-half w3-section" id="abs">
<span id="hand" class="w3-xlarge" onclick="updateButton(2)">Absolute values</span>
</div>
<div class="w3-half w3-section" id="perc">
<span id="hand" class="w3-xlarge" onclick="updateButton(3)">Percentages</span>
</div>
</div>
<div class="w3-fifth">
<div class="w3-section">
</div>
</div>
<div class="w3-fifth">
<div class="w3-half w3-section" id="org">
<span id="hand" class="w3-xlarge" onclick="updateButton(0)">Origin</span>
</div>
<div class="w3-half w3-section" id="asy">
<span id="hand" class="w3-xlarge" onclick="updateButton(1)">Asylum</span>
</div>
</div>
<div class="w3-fifth">
<div class="w3-section">
</div>
</div>
<div class="w3-fifth">
<div class="w3-half w3-section" id="lin">
<span id="hand" class="w3-xlarge" onclick="updateButton(4)">Linear</span>
</div>
<div class="w3-half w3-section" id="log">
<span id="hand" class="w3-xlarge" onclick="updateButton(5)">Logarithmic</span>
</div>
</div>
</div>
<!-- Make visualisations -->
<div id="container1" style="position: relative; width: 1200px; height: 600px;">
<br><br>
<div class="w3-row-padding w3-center">
<h3 class="graphTitle" style="color: black;">Refugees in the world</h3>
</div>
<br>
<p style="width: 500px; margin: auto">
<label for="YearSlider" style="display: inline-block; width: 500px; text-align: center">
Year: <span id="YearSlider-value">…</span>
</label>
<input type="range" min="1990" max="2015" id="YearSlider">
</p>
</div>
<div id="container2" style="position: relative; width: 400px; height: 500px;">
</div>
<!-- Give information -->
<div class="w3-center w3-padding-64 w3-section w3-row-padding" id="worldoverview">
<div class="w3-third w3-section" id="third1">
<h4 class="w3-center">BBC News</h4>
<a href="http://www.bbc.com/news/world-40321287" target="_blank" style="color: #777;"><em>"The UN said it hoped Monday's record breaking numbers of displaced would encourage wealthy countries to think again: not just to accept more refugees, but to invest in peace promotion, and reconstruction. Mr Grandi also warned of the burden being placed on many of the world's poorest states, as some 84% of the world's displaced people are living in poor and middle income countries. "How am I to ask countries with far less resources, in Africa, in the Middle East, in Asia, to take millions of refugees if the richer countries are refusing to do so?" he said." </em></a> - BCC
</div>
<div class="w3-third w3-section" id="third2">
<h4 class="w3-center">Explanation</h4>
Above, an overview of refugees in the world is given. Click on a country to see the devolpment of refugees over time. The buttons in the menu can also be clicked, to change from absolute values to percentages of inhabitants, from origin to asylum and from linear scale to logarithmic scale. An overview of the whole world over time can be found, when changing the slider. Lastly, the countries with a golden border are identified as conflict areas, about which more information can be found below.
</div>
<div class="w3-third w3-section" id="third3">
<h4 class="w3-center">Remarkable data</h4>
As can be seen, Syria has an enormous amount of refugees at the moment. When going back to 1990, the map shows that an even higher amount of refugees fled from Afghanistan. More than 6.3 million refugees from Afghanistan, a precentage of 52.5% of the inhabitants, against almost 4.9 million refugees from Syria, a percentage of 26.3% of the inhabitants. When looking at the country of asylum, the map shows that Jordan is the country that, in terms of percentage of its inhabitants, gives shelter to most refugees in all years. Regarding absolute values, besides Jordan, Turkey cares for most refugees nowadays, while back in 1990 Iran was the country that accomodates by far most refugees.
</div>
</div>
<!-- Conflict Areas Section -->
<div class="bgimg-3 w3-display-container w3-opacity-min" id="conflict">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-white w3-wide">CONFLICT AREAS</span>
</div>
</div>
<!-- Make menu -->
<div class="w3-row w3-center w3-dark-grey w3-padding-16">
<div class="w3-fifth w3-section" id="SYR">
<span id="hand" class="w3-xlarge" onclick="newCountryClickedButton(0)">Syria</span>
</div>
<div class="w3-fifth w3-section" id="SSD">
<span id="hand" class="w3-xlarge" onclick="newCountryClickedButton(1)">South Sudan</span>
</div>
<div class="w3-fifth w3-section" id="SOM">
<span id="hand" class="w3-xlarge" onclick="newCountryClickedButton(4)">Somalia</span>
</div>
<div class="w3-fifth w3-section" id="COD">
<span id="hand" class="w3-xlarge" onclick="newCountryClickedButton(2)">Democratic Republic of the Congo</span>
</div>
<div class="w3-fifth w3-section" id="CAF">
<span id="hand" class="w3-xlarge" onclick="newCountryClickedButton(3)">Central African Republic</span>
</div>
</div>
<!-- Make visualisations -->
<div class="w3-row-padding w3-center">
<div id="container3" style="position: relative; width: 800px; height: 500px;">
</div>
<div id="container4" style="position: relative; width: 1000px; height: 500px;">
<div class="dropdown w3-center" id="agegroups">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Select all age groups or only youth
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a onclick="changeTwoSided(0)">Show only youth</a></li>
<li><a onclick="changeTwoSided(1)">Show all age groups</a></li>
</ul>
</div>
<br><br><br><br>
</div>
<!-- Give information -->
<div class="w3-padding-64" id="worldoverview">
<div>
<div class="w3-fifth">
<div class="w3-section">
</div>
</div>
<div class="w3-third w3-section" id="third6">
<h4 class="w3-center">Explanation</h4>
<p class="w3-center">Five countries are subject to conflicts at the moment. Most refugees nowadays flee from Syria, South Sudan, Somalia, Democratic Republic of the Congo and Central African Republic, in descending order. Take a look at the data of these conflict areas and read more about it below.<br>
At the menu, one of the five different conflict areas can be chosen. The barchart shows the countries to which refugees flee. In the two-sided barchart, the gender and age is visualised. When clicking on a country in the barchart, the two-sided barchart will show the data of the corresponding country. Besides that, the age groups displayed can be changed by either clicking on the two-sided barchart or by means of the dropdown menu.</p>
</div>
<div class="w3-third w3-section" id="third7">
<h4 class="w3-center">Remarkable data</h4>
<p class="w3-center">As can be seen in the barchart, most refugees from Syria flee to Turkey: almost 60%. The majority of these people is male and adult. These statistics about gender and age account for Somalia as well, but is the exact opposite for the other conflict areas. In particular from South Sudan, almost 63.5% of the refugees is youth, against 60.5% from Central African Republic and 52% from Democratic Republic of the Congo. From these three countries, the majority of the refugees are female.<br>
Remarkable is that, from Syria, most male and adults go to Turkey and Egypt, while most youth and female flee to Jordan and Lebanon. Male and adult refugees from Somalia mainly go to Uganda, while most youth and female seek shelter in Kenya and Ethiopia. When only looking at the data of youth, it can be seen that from all conflict areas, the group of children between 5 and 11 years old is the biggest. Lastly, the group of people of 60+ is very small overall.</p>
</div>
</div>
<div class="w3-container">
<div class="w3-third w3-section" id="third1">
<h4 class="w3-center">Democratic Republic of the Congo</h4>
The conflict in Democratic Republic of the Congo is also known as 'DR Congo Kasai conflict'. <em><a href="http://www.bbc.com/news/world-africa-39587896" target="blank" style="color: #777;">"The roots of this conflict were local, but the violence has now spread to five central provinces. It began when the government refused to recognise a traditional chief who went by the title Kamuina Nsapu. He set up a militia and was killed in clashes with the government last August."</a></em> - BBC
</div>
<div class="w3-third w3-section" id="third2">
<h4 class="w3-center">Central African Republic</h4>
A group of rebels is active in Central African Republic, called Seleka. <em><a href="http://www.bbc.com/news/world-africa-20798007" target="blank" style="color: #777;">"Seleka is a reference to fighters from three groups - Union of Democratic Forces for Unity (UFDR), the Union of Republican Forces (UFR) and the Convention of Patriots for Justice and Peace (CPJP) - coming together to launch the rebellion. In 2007, these groups signed an accord with the government and agreed to be integrated into the army. But in late 2012, some of those rebels who joined the army deserted and took up arms once more. The rebels, who are mostly northerners, accuse President Francoise Bozize of not honouring the ceasefire deal, which promised the release of political prisoners and payment for fighters who disarmed."</a></em> - BBC
</div>
<div class="w3-third w3-section" id="third3">
<h4 class="w3-center">Somalia</h4>
<em><a href="http://www.bbc.com/news/world-middle-east-35806229" target="blank" style="color: #777;">"Somalia has experienced almost constant conflict since the collapse of its central government in 1991. The Islamist insurgent group al-Shabab, which has links to al-Qaeda, controls most southern and central areas, while the UN-backed government only runs the capital, Mogadishu and a few small areas."</a></em> - BBC
</div>
</div>
<div class="w3-container">
<div class="w3-fifth">
<div class="w3-section">
</div>
</div>
<div class="w3-third w3-section" id="third4">
<h4 class="w3-center">South Sudan</h4>
In the last decades, South Sudan has suffered several civil wars. Most recent uptdate is as follows. <em><a href="http://www.bbc.com/news/world-africa-14019202" target="blank" style="color: #777;">"President Kiir declares unilateral ceasefire, launches national dialogue."</a></em> - BBC
</div>
<div class="w3-third w3-section" id="third5">
<h4 class="w3-center">Syria</h4>
<em><a href="http://www.bbc.com/news/world-middle-east-35806229" target="blank" style="color: #777;">"What began as a peaceful uprising against Syria's President Bashar al-Assad six years ago became a full-scale civil war that has left more than 300,000 people dead, devastated the country and drawn in global powers."</a></em> - BBC
</div>
</div>
</div>
</div>
<div id="modal01" class="w3-modal w3-black" onclick="this.style.display='none'">
<span class="w3-button w3-large w3-black w3-display-topright" title="Close Modal Image"><i class="fa fa-remove"></i></span>
<div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
<img id="img01" class="w3-image">
<p id="caption" class="w3-opacity w3-large"></p>
</div>
</div>
<!-- Contact Section -->
<div class="bgimg-4 w3-display-container w3-opacity-min" id="contact">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-white w3-wide">CONTACT</span>
</div>
</div>
<div class="w3-content w3-container w3-padding-64">
<h3 class="w3-center">Sanne Berendschot</h3>
<br>
<div class="w3-center">
<div class="w3-large w3-margin-bottom">
<i class="fa fa-map-marker fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i> Amsterdam, Netherlands<br>
<i class="fa fa-phone fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i> Phone: +31 6 40220747<br>
<i class="fa fa-envelope fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i> Email: <a href="mailto:[email protected]?Subject=Refugees%20website">[email protected]</a><br>
</div>
</div>
</div>
<!-- Footer -->
<footer class="w3-center w3-black w3-padding-64 w3-opacity w3-hover-opacity-off">
<a href="#home" class="w3-button w3-light-grey"><i class="fa fa-arrow-up w3-margin-right"></i>To the top</a>
<p><br>Sources: <a href="http://www.worldbank.org/">The World Bank</a>, <a href="http://data2.unhcr.org/en/situations">UNHCR</a> and <a href="http://www.bbc.com/">BBC</a></p>
<p>Made by Sanne Berendschot, 10269290 <br>
Minor Programmeren, Programmeerproject <br>
Universiteit van Amsterdam</p>
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-text-green">w3.css</a></p>
</footer>
<!-- Script for html -->
<script>
// Modal Image Gallery
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.alt;
}
// Change style of navbar on scroll
window.onscroll = function() {myFunction()};
function myFunction() {
var navbar = document.getElementById("myNavbar");
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
navbar.className = "w3-bar" + " w3-card-2" + " w3-animate-top" + " w3-white";
} else {
navbar.className = navbar.className.replace(" w3-card-2 w3-animate-top w3-white", "");
}
}
// Used to toggle the menu on small screens when clicking on the menu button
function toggleFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
</html>