Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
115 lines (101 sloc) 6.6 KB
<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']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = '';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
<div id="background_container">
<div id="container">
<h1>About <a href=""></a></h1>
<h2>What is it?</h2>
<p>The <a href="">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="">Martin</a> <a href="">De Wulf</a>) have
programming this map to
and have fun with <a href="">HTML5</a> technologies. Besides of learning, my only goal is to create a
website that can make people think.
<h2>The data</h2>
The data for the map is coming from three sources:
The <a href="">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
counting criteria, and for some countries, it would probably be better politically not to give the precise
So, take the map with a grain of salt.
<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="">World Bank API</a>, with the numbers for 2007.
For the countries borders, I used a file found in the examples of the <a href="">polymaps</a> library, which
originated from <a href=""></a>
<h2>The Technology</h2>
<p> All the code of the site and the scripts used to produce it are available on
<a href="">github</a>. Furthermore, the site is hosted on a <a href="">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:</p>
<p>Here is a non exhaustive list of technologies or tools employed to create this map:
<li><a href="">Raphael.js</a> for the display in <a href="">SVG</a> the countries borders, the "arrows" and animating everything; </li>
<li><a href="">Color Brewer</a> by Cynthia Brewer for the red hues used to display "migration intensity";</li>
<li>the font <a href="">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="">Python</a> with the <a href="">Requests</a> library
to transform all data in a format usable on this site and to access the <a href="">World Bank API</a>;</li>
<li><a href="">Hasher.js</a> for the url hashes manipulations (so that people can bookmark maps, or use their back button);</li>
<li><a href="">Modernizr</a> for detecting if the current browser supports geolocation;</li>
<li><a href="">JQuery</a>.</li>
<h2>What's next?</h2>
<p>If you liked the map, you might also like <a href=""></a></p>
<div id="social">
<iframe src=";send=false&amp;layout=button_count&amp;width=100&amp;show_faces=true&amp;action=like&amp;colorscheme=dark&amp;font=arial&amp;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="" size="medium"></g:plusone></div>
<a href="" class="twitter-share-button" data-url="" data-text="Where are migrants coming from? Where have migrants left?" data-count="horizontal" data-via="madewulf">Tweet</a><script type="text/javascript" src="//"></script>
Jump to Line
Something went wrong with that request. Please try again.