forked from null2/globalmigration
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
299 lines (255 loc) · 12.6 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
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Global international migration flows | Wittgenstein Centre</title>
<meta name=description content="Global Migration Data Sheet 2013: Unique estimates of migration flows between the top 50 sending and receiving countries.">
<meta name=viewport content="width=device-width, initial-scale=1.0">
<link rel="icon" href="favicon.png" type="image/png">
<link href="dist/app-v1.css" rel="stylesheet" media="all">
<!--[if lt IE 9]><script src=javascripts/html5shiv-printshiv.js></script><![endif]-->
<script src="dist/app-v1.js"></script>
</head>
<body>
<div id=container class="container">
<div class="social-wrap">
<div class="social">
<div class="fb-like" data-send="false" data-layout="button_count" data-width="90px" data-show-faces="false" data-font="lucida grande"></div>
<div id="plusone-div"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-text="The Global Flow of People"></a>
<div class="clear"></div>
</div>
</div>
<header role="banner">
<h1>The global flow of people</h1>
<div class="badge">
<a href="http://www.sciencemag.org/cgi/rapidpdf/343/6178/1520?ijkey=ypit4/xi7wo4M&keytype=ref&siteid=sci" target=_blank><img src="images/badge_published-in-science.png" alt="Published in Science / free access"></a>
</div>
<div class="lead-in">
Explore new estimates of migration flows between and within regions for five-year periods, 1990 to 2010. Click on a region to discover flows country-by-country.
</div>
<div class="credits">
by <a href="http://www.oeaw.ac.at/vid/staff/staff_nikola_sander.shtml">Nikola Sander</a>,
<a href="http://www.oeaw.ac.at/vid/staff/staff_guy_abel.shtml">Guy J. Abel</a> &
<a href="http://www.oeaw.ac.at/vid/staff/staff_ramon_bauer.shtml">Ramon Bauer</a> <br>
at the <a href="http://www.wittgensteincentre.org">Wittgenstein Centre for Demography and Global Human Capital</a>
</div>
<hr>
</header>
<div class="wrap">
<main role="main">
<nav role=navigation>
<div id="timeline"></div>
</nav>
<div id="diagram"></div>
</main>
</div>
<footer role="contentinfo">
<hr>
<div class="column-wrap-3">
<div class="column">
<h3>Further reading</h3>
<p>
Abel & Sander (2014).
<a href="http://www.sciencemag.org/cgi/rapidpdf/343/6178/1520?ijkey=ypit4/xi7wo4M&keytype=ref&siteid=sci" target="_blank">Quantifying Global International Migration Flows</a>.
Science, 343 (6178).
(<a href="http://www.sciencemag.org/cgi/content/abstract/343/6178/1520?ijkey=ypit4/xi7wo4M&keytype=ref&siteid=sci" target="_blank">Abstract</a>,
<a href="http://www.sciencemag.org/cgi/content/full/343/6178/1520?ijkey=ypit4/xi7wo4M&keytype=ref&siteid=sci" target="_blank">Full Text</a>)
</p>
<p>Abel (2013). <a href="http://www.demographic-research.org/volumes/vol28/18/28-18.pdf" target=_blank>Estimating global migration flow tables using place of birth data</a>. Demographic Research 28(18):505-546.</p>
<p>Sander et al. (2014). <a href="VID%20WP%20Visualising%20Migration%20Flow%20Data%20with%20Circular%20Plots.pdf">Visualising migration flow data with circular plots</a>. VID Working paper 02/14. Vienna Institute of Demography, Austria.</p>
</div>
<div class="column">
<h3>Contact</h3>
<p>
About the circular plots:<br>
<a href="mailto:nikola.sander@oeaw.ac.at">nikola.sander@oeaw.ac.at</a>
</p>
<p>
About the data:<br>
<a href="mailto:guy.abel@oeaw.ac.at">guy.abel@oeaw.ac.at</a>
</p>
</div>
<div class="column">
<h3>Credits</h3>
<p>
Provided by<br>
<a href="http://www.wittgensteincentre.org"><img src="images/wittgenstein.png"></a>
<a href="http://www.oeaw.ac.at/vid/"><img src="images/vid.png"></a>
</p>
<p>Coded by <a href="http://null2.net"><img src="images/null2.png"></a></p>
<p>Screendesign by <a href="http://elvirastein.com/">Elvira Stein</a></p>
<p>Inspired by Martin Krzywinski's <a href="http://circos.ca/">Circos</a> and Mike Bostock’s <a href="http://d3js.org/">D3.js library</a>.</p>
</div>
<div class="clear"></div>
</div>
<hr>
<div class="license">
Version <span class="version">1.0.19 (Febuary 2014)</span>.
This work is licensed under a <a href="http://creativecommons.org/licenses/by-nc/3.0/">Creative Commons Attribution-NonCommercial 3.0 Unported License.</a>
<a href="http://creativecommons.org/licenses/by-nc/3.0/"><img src="images/by-nc.png"></a>
</div>
<div class="column-wrap-2">
<div class="column">
<div class="column-item">
<h2>About the Data</h2>
<p>
The bilateral flows between 196 countries are estimated from sequential stock tables. They are comparable across countries and capture the number of people who changed their country of residence over five-year periods. The estimates reflect migration transitions and thus cannot be compared to annual movements flow data published by United Nations and Eurostat.
</p>
<div class="center">
<!-- data/Flow%20Data%20for%20Online%20Viz%20Version2.csv -->
<a href="Data%20on%20the%20global%20flow%20of%20people_Version%20March2014.csv" class="button">
Download the data
</a>
</div>
</div>
</div>
<div class="column">
<div class="column-item">
<h2>About the plot</h2>
<p>
The circular plot shows the estimates of directional flows between 123 countries that recorded a migration volume (immigration + emigration) of more than 100,000 people in at least two of the four time periods. Only flows containing at least 50,000 migrants are shown. The window that pops up when hovering over the plot indicates the absolute number of immigrants (total in) and emigrants (total out) over the five-year period.
</p>
<div class="center">
<a href="http://github.com/null2/globalmigration" class="button">
Source Code on Github
</a>
<a href="http://www.oeaw.ac.at/vid/publications/p_vid-workingpapers.shtml" class="button">
Paper about the plot
</a>
</div>
</div>
</div>
<div class="clear"></div>
<hr>
<div class="column">
<div class="column-item">
<h2>Estimating global bilateral migration flows</h2>
<p>
As migration flow data are often incomplete and not comparable across nations, we estimate the number of movements by linking changes in migrant stock data over time. Using statistical missing data methods, we estimate the five-year migrant flows that are required to meet differences in migrant stock totals. For example, if the number of foreign-born in the United States increases between two time periods, we estimate the minimum migrant flows between the US and all other countries in the world that are required to meet this increase.
</p>
<p>
For each country of birth, we estimate the minimum number of migrant flows required to match differences in stocks by assuming that people are more likely to stay than to move. This estimation procedure is replicated simultaneously for all 196 countries to estimate birthplace specific flow tables, resulting in a comparable set of global migration flows. Alterations are made to the migrant stock counts to control for births and deaths during the period. This allows our country-specific net migration flows to closely match the net migration estimates published by the United Nations.
</p>
</div>
</div>
<div class="column">
<div class="column-item">
<h2>Global Migration Data Sheet 2005–2010</h2>
<p>
This Data Sheet provides a comprehensive portrait of the global flow of people in 2005–10. It features the flows between the top 50 sending and receiving countries, each country’s total immigration and emigration flow and the world’s 20 largest country-to-country flows. <a href="mailto:nikola.sander@oeaw.ac.at">Email us to request a hard copy</a>.
</p>
<div class="center">
<a href="VID_Global_Migration_Datasheet_web.pdf" target=_blank class="button">
Download Data Sheet
</a>
</div>
<br>
<div class="center">
<a href="VID_Global_Migration_Datasheet_web.pdf" target=_blank>
<img src="images/poster.png">
</a>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<br><br>
</footer>
<div id=help-wrapper class=help-wrapper>
<div class="help" id="help">
<div class="tab">How to read the plot</div>
<div class="help-content">
<h3>How to read the plot</h3>
<img src="images/help.png" class="left">
<p>
Origins and destinations are represented by the circle’s segments.
Each region/country is assigned a colour.
Flows have the same colour as their origin and the width indicates their size.
The direction of the flow is also shown by the gap between flow and country/region: small gap indicates origin; large gap indicates destination.
<b>Click on a segment to switch between country and region view.</b>
</p>
<div class="clear"></div>
<p>
Switch between time periods using Ctrl and number keys (1,2,3,4);
reset the plot using Ctrl and r; zoom in/out with Ctrl and +/-
</p>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<script>
// help
(function() {
var help = d3.select('#help');
help.on('click', function() {
var isActive = help.classed('active');
help
.classed('active', !isActive)
.transition()
.style('width', isActive ? '30px' : '572px');
});
function helpOffset() {
var offset = Math.max((document.body.clientWidth - document.getElementById('container').clientWidth) / 2, 0);
help.style('right', offset + 'px');
}
d3.select(window).on('resize.help-resize', helpOffset);
helpOffset();
})();
</script>
<script>
(function() {
var datafile = 'json/migrations.json';
var aLittleBit = Math.PI / 100000;
d3.json(datafile, function(data) {
var now = 2005;
var chart = Globalmigration.chart(data, {
element: '#diagram',
now: now,
animationDuration: 500,
margin: 125,
arcPadding: 0.04,
layout: {
threshold: 50000,
labelThreshold: 5000,
colors: 'cd3d08 ec8f00 6dae29 683f92 b60275 2058a5 00a592 009d3c 378974 ffca00'.split(' ').map(function(c) { return '#' + c; })
}
});
Globalmigration.timeline(chart, {
now: now,
element: '#timeline'
});
chart.draw(now);
});
})();
</script>
<div id="fb-root"></div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
<script>
(function() {
function loadScript(d,s,l,id){
var js,
fjs=d.getElementsByTagName(s)[0],
p=/^http:/.test(d.location)?'http':'https';
if(!id || !d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+'://' + l;
fjs.parentNode.insertBefore(js,fjs);
}
}
loadScript(document, 'script', 'connect.facebook.net/en_US/all.js#xfbml=1', 'facebook-jssdk');
if (typeof gapi === 'object') {
gapi.plusone.render("plusone-div", {size: 'medium', annotation: 'bubble', width: '250px'});
}
loadScript(document, 'script', 'platform.twitter.com/widgets.js', 'twitter-wjs');
})();
</script>
<script>
var _gaq=[['_setAccount','UA-42659946-1'],['_trackPageview']];(function(a,b){var c=a.createElement(b),d=a.getElementsByTagName(b)[0];c.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";d.parentNode.insertBefore(c,d)})(document,"script");
</script>
</body>
</html>