forked from madewulf/MigrationsMap.net
/
about.html
115 lines (101 loc) · 6.6 KB
/
about.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
<!DOCTYPE HTML>
<html>
<head>
<title>About MigrationsMap.net</title>
</head>
<link rel="stylesheet" type="text/css" href="univers-else-font/stylesheet.css"/>
<link rel="stylesheet" type="text/css" href="about.css"/>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1397562-10']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<body>
<div id="background_container">
<div id="container">
<h1>About <a href="http://migrationsmap.net">MigrationsMap.net</a></h1>
<h2>What is it?</h2>
<p>The <a href="http://migrationsmap.net">map</a> allows you to see for every country X in the world either the
top ten
providing countries of lifetime migrants to X or the top ten receiving countries of lifetime migrants from
X. On
top of that, when you let your mouse hover over a country, you can see the total population, the GDP per capita,
the HIV and Tuberculosis prevalences and the death rate of children under five.</p>
<p>I (<a href="http://twitter.com/madewulf">Martin</a> <a href="http://multitasked.net">De Wulf</a>) have
been
programming this map to
learn
and have fun with <a href="http://diveintohtml5.org/">HTML5</a> technologies. Besides of learning, my only goal is to create a
website that can make people think.
</p>
<h2>The data</h2>
The data for the map is coming from three sources:
<ol>
<li>
The <a href="http://www.migrationdrc.org/research/typesofmigration/global_migrant_origin_database.html">Global
Migrant Origin Database</a>
is the main source of the data. As said on the site, it "consists of a 226x226 matrix of
origin-destination stocks by country and economy".
Put differently, this is a matrix showing for each pair of country X and Y "the number of persons born
in a country X and now living in
country Y." Globally, the map is only as good as this data is and it is quite clear, even for a non
specialist like me, that
obtaining accurate numbers on such a topic is really difficult: you have to use many different sources with
different
counting criteria, and for some countries, it would probably be better politically not to give the precise
numbers.
So, take the map with a grain of salt.
</li>
<li>For all the indicators (population size, GDP, HIV and tuberculosis prevalences and mortality for kids under five years old), I
used the <a href="http://data.worldbank.org/developers/api-overview">World Bank API</a>, with the numbers for 2007.
</li>
<li>
For the countries borders, I used a file found in the examples of the <a href="http://polymaps.org">polymaps</a> library, which
originated from <a href="http://thematicmapping.org/downloads/world_borders.php">thematicmapping.org</a>
</li>
</ol>
<h2>The Technology</h2>
<p> All the code of the site and the scripts used to produce it are available on
<a href="https://github.com/madewulf/MigrationsMap.net">github</a>. Furthermore, the site is hosted on a <a href="http://pages.github.com/">github page</a>. Thanks to them for this
fantastic free service.</p>
<p> There are probably some bugs lurking around. Do not hesitate to report them to me at: madewulf@gmail.com.</p>
<p>Here is a non exhaustive list of technologies or tools employed to create this map:
<ul>
<li><a href="http://raphaeljs.com/">Raphael.js</a> for the display in <a href="http://en.wikipedia.org/wiki/Scalable_Vector_Graphics">SVG</a> the countries borders, the "arrows" and animating everything; </li>
<li><a href="http://colorbrewer2.org/">Color Brewer</a> by Cynthia Brewer for the red hues used to display "migration intensity";</li>
<li>the font <a href="http://ospublish.constantvzw.org/foundry/univers-else/">Univers Else</a>. I may have put it to bad use. I am not sure, I am not a type geek;</li>
<li><a href="http://python.org">Python</a> with the <a href="http://docs.python-requests.org/en/latest/index.html">Requests</a> library
to transform all data in a format usable on this site and to access the <a href="http://data.worldbank.org/developers/api-overview">World Bank API</a>;</li>
<li><a href="https://github.com/millermedeiros/Hasher">Hasher.js</a> for the url hashes manipulations (so that people can bookmark maps, or use their back button);</li>
<li><a href="http://www.modernizr.com/">Modernizr</a> for detecting if the current browser supports geolocation;</li>
<li><a href="http://jquery.com/">JQuery</a>.</li>
</ul>
</p>
<h2>What's next?</h2>
<p>If you liked the map, you might also like <a href="http://populationpyramid.net">PopulationPyramid.net</a></p>
<div id="social">
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fmigrationsmap.net&send=false&layout=button_count&width=100&show_faces=true&action=like&colorscheme=dark&font=arial&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:21px; padding-top:10px;" allowTransparency="true"></iframe>
<div id="plusone"><g:plusone href="http://migrationsmap.net" size="medium"></g:plusone></div>
<div>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://migrationsmap.net" data-text="Where are migrants coming from? Where have migrants left?" data-count="horizontal" data-via="madewulf">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</div>
</div>
</div>
</div>
</body>
</html>