-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
222 lines (209 loc) · 12.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Analysis of refugee migration patterns to create useful insights for aid organizations.">
<script src="vendor/jquery-3.3.1.slim.min.js"></script>
<script src="vendor/popper.min.js"></script>
<script src="vendor/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
<script src="vendor/d3-4.11.0.min.js"></script>
<script src="vendor/topojson-3.0.2.min.js"></script>
<script src="vendor/jeezy-1.12.11.min.js"></script>
<script src="vendor/data2grid-1.0.0.min.js"></script>
<script src="vendor/chroma-1.3.5.min.js"></script>
<script src="src/js/tooltip.js"></script>
<script src="src/js/main.js"></script>
<script src="src/js/matrix.js"></script>
<script src="src/js/scatter.js"></script>
<script src="src/js/event.js"></script>
<link rel="stylesheet" href="vendor/bootstrap-4.3.1-dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="src/css/map.css">
<link rel="stylesheet" type="text/css" href="src/css/matrix.css">
<link rel="stylesheet" type="text/css" href="src/css/styling.css">
<link rel="stylesheet" type="text/css" href="src/css/scatter.css">
<title>Refugee Migration Patterns</title>
</head>
<body>
<div class="welcome">
<div class="box center col-12">
<h1>Analysis of Refugee Migration Patterns</h1>
<h4>Insights for Aid Organizations and Policy Makers</h4>
<div class="introduction">
<p>
Worldwide, more than 68 million people are forcibly displaced.<br>
About 40 million of them are internally displaced, 25 million are refugees and 3 million are asylum-seekers.<br>
Source: <a href="https://www.unhcr.org/figures-at-a-glance.html">UNHCR</a>
</p>
<p>
This project analyzes data on migration patterns of persons of concern. Our aim is to create new insights that are useful for aid organizations and policy makers alike.
</p>
</div>
<div class='icon-scroll'></div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="map-column col-12 col-lg-6">
<div id="slider">
<div class="year-selection">
<label for="year-selector"><b>Year:</b> </label><span id="selected-year"></span>
<input type="range" class="custom-range" min="2008" max="2016" id="year-selector" onchange="refresh_year(this.value)">
</div>
<div class="threshold-selection">
<label for="threshold-selector"><b>Threshold:</b> </label><span id="selected-threshold"></span>
<input type="range" class="custom-range" min="0" max="0.0005" step="0.00005" id="threshold-selector">
</div>
</div>
<div id="map"></div>
</div>
<div class="analysis-column col-12 col-lg-6">
<div id="carouselIndicators" class="carousel slide" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carouselIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselIndicators" data-slide-to="1"></li>
<li data-target="#carouselIndicators" data-slide-to="2"></li>
<li data-target="#carouselIndicators" data-slide-to="3"></li>
<li data-target="#carouselIndicators" data-slide-to="4"></li>
<li data-target="#carouselIndicators" data-slide-to="5"></li>
<li data-target="#carouselIndicators" data-slide-to="6"></li>
<li data-target="#carouselIndicators" data-slide-to="7"></li>
<li data-target="#carouselIndicators" data-slide-to="8"></li>
<li data-target="#carouselIndicators" data-slide-to="9"></li>
<li data-target="#carouselIndicators" data-slide-to="10"></li>
<li data-target="#carouselIndicators" data-slide-to="11"></li>
<li data-target="#carouselIndicators" data-slide-to="12"></li>
<li data-target="#carouselIndicators" data-slide-to="13"></li>
<li data-target="#carouselIndicators" data-slide-to="14"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<h4>Summary</h4>
<p>
<b>Asylum-Seeker: </b> A person seeking international protection. Once this protection is granted, the person is recognized as a refugee.</br>
<b>Refugee: </b> A person who had to flee their home country due to persecution.<br/>
Source: <a href="https://www.amnesty.org.au/refugee-and-an-asylum-seeker-difference/">Amnesty International</a></br>
If not otherwise specified, the analyses show the movement of refugees based on <a href="http://popstats.unhcr.org/en/time_series">UNHCR data</a>.
</p>
<p>
In our analysis of refugee migration patterns, we collected data and represented it as a network that you can see on the map. Countries are connected if a sufficiently high number of people flee from one country to another. You can change the threshold for "sufficiently high" with the threshold slider. Similarly, you can change the year you want to look at.
</p>
<p>
We obtained values from network analysis for each country over time, such as centrality measures and network constraints, and combined with index values to use as features to train a prediction model. Without tuning, our time series model predicts with approximately 30% MAPE.
</p>
<p>
The countries are colored according to their Fragile States Index where red indicates a high fragility and blue represents stability.
If you hover on countries, you can see their Human Development Index (HDI) value (and rank) as well as their Fragile States Index (FSI) value (and rank).
</p>
<p>
Use the arrows at the top to look at different analyses.
</p>
</div>
<div class="carousel-item">
<h3>Degree Distribution</h3>
<p>
The degree distribution shows the probabilty with which a randomly picked country has a specific indegree (outdegree).
As degrees are not continuous, they are binned.
</p>
<img id="degree_plot" class="d-block w-100" src="src/media/2008_degree_distribution.png" alt="Degree Distribution plots" style="object-fit: contain">
</div>
<div class="carousel-item">
<h3>Power Law</h3>
<p>
The plot shows us the probability with which a chosen country has more than a specific number x refugees coming in (leaving). A power law distribution would mean that the y-value changes proportional to the x-value. By using the logarithmic values on both, we should get a straight line. This is not the case here as you can see in the plot.
</p>
<img id="power_plot" class="d-block w-100 contain" src="src/media/2008_powerlaw.png" alt="Powerlaw Plots for Number of Refugees">
</div>
<div class="carousel-item" style="overflow: visible;">
<h4>Correlation Matrix</h4>
<p>
The correlation matrix allows you to see between which measures there is a positive or negative correlation.
</p>
<div id="matrix_legend"></div>
</br>
</br>
</br>
<div id="matrix_grid"></div>
</div>
<div class="carousel-item">
<h4>Eigenvector Centrality - Closeness Centrality</h4>
<p>
There is a visible correlation between the measures eigenvector centrality and closeness centrality. This is not surprising as both are centrality measures.
</p>
<div id="scatter_first" class="contain"></div>
</br>
<div id="scatter_second" class="contain"></div>
</div>
<div class="carousel-item">
<h4>HDI - Indegree Centrality</h4>
<p>
As we can see the HDI correlates with the indegree centrality. As the HDI measures long-term development of countries, it is not surprising to see that countries with a high HDI value get refugees from a lot of different countries.
</p>
<svg class="plot" id="hdi-indegree-centrality"></svg>
</div>
<div class="carousel-item">
<h4>FSI - Indegree Centrality</h4>
<p>
Similarly to the HDI, it is not surprising that stable countries, i.e. countries with a low FSI, host refugees from many different countries.
</p>
<svg class="plot" id="fgi-indegree-centrality"></svg>
</div>
<div class="carousel-item">
<h4>HDI - Outdegree Centrality</h4>
<p>
One might expect a similar correlation between HDI and outdegree centrality. HDI, however, mostly measures long-term development, e.g. the life expectancy. Short-term developments such as the outbreak of a war are not necessarily visible in the HDI which explains large numbers of refugees for countries with fairly high HDI values.
</p>
<svg class="plot" id="hdi-outdegree-centrality"></svg>
</div>
<div class="carousel-item">
<h4>FSI - Outdegree Centrality</h4>
<p>
The FSI takes questions specific to refugees and IDPs into account, so that we can also see a correlation when we look at the outdegree.
</p>
<svg class="plot" id="fgi-outdegree-centrality"></svg>
</div>
<div class="carousel-item">
<h4>HDI - Number of Refugees (Out)</h4>
<svg class="plot" id="hdi-refugees-out"></svg>
</div>
<div class="carousel-item">
<h4>HDI - Number of Asylum-Seekers (Out)</h4>
<svg class="plot" id="hdi-asylum-out"></svg>
</div>
<div class="carousel-item">
<h4>HDI - Number of Asylum-Seekers + Refugees (Out)</h4>
<svg class="plot" id="hdi-asylum-refugees-out"></svg>
</div>
<div class="carousel-item">
<h4>HDI - Number of Refugees (In)</h4>
<svg class="plot" id="hdi-refugees-in"></svg>
</div>
<div class="carousel-item">
<h4>HDI - Number of Asylum-Seekers (In)</h4>
<svg class="plot" id="hdi-asylum-in"></svg>
</div>
<div class="carousel-item">
<h4>HDI - Number of Asylum-Seekers + Refugees (In)</h4>
<svg class="plot" id="hdi-asylum-refugees-in"></svg>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="row">
<div class="footer center col-12">
<a href="https://courses.helsinki.fi/en/data16001/124845659">"Network Analysis"</a> at the University of Helsinki · <a href="https://github.com/hcorinna/refugee-migration-patterns">GitHub</a> · Made with ❤️ by <a href="https://github.com/karenhelsinki">Karen</a>, <a href="https://github.com/gorupria">Puru</a> and <a href="https://github.com/hcorinna">Corinna</a>
</div>
</div>
</div>
</body>
</html>