-
Notifications
You must be signed in to change notification settings - Fork 51
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
245 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| body { | ||
| font-size: 18px; | ||
| font-family: 'UniversElseRegular', Arial, sans-serif; | ||
| margin: 0; | ||
| padding: 0; | ||
| background-image: url(gray_texture.jpg); | ||
| background-repeat: repeat; | ||
|
|
||
| } | ||
|
|
||
| a { | ||
| color: black; | ||
| } | ||
|
|
||
| a:hover { | ||
| color: #3b185f; | ||
| background: #f9f8fa; | ||
| } | ||
|
|
||
| h1, h2, h3, h4, h5, h6 { | ||
| font-weight: normal; | ||
| color: #222; | ||
| } | ||
|
|
||
| h1 a, h2 a, h3 a, h4 a, | ||
| h5 a, h6 a { | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| h1 a:hover, h2 a:hover, | ||
| h3 a:hover, h4 a:hover { | ||
| color: #432165; | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| h1.title { | ||
| width: 560px; | ||
| } | ||
|
|
||
| h1, h2 { | ||
| margin: 10px 0 25px 0; | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 48px; | ||
| line-height: 52px; | ||
| } | ||
|
|
||
| h2 { | ||
| font-size: 36px; | ||
| line-height: 40px; | ||
| } | ||
|
|
||
| p, div.line-block, ul, ol, pre, | ||
| table { | ||
| margin: 25px 0 25px 0; | ||
| } | ||
|
|
||
| dt { | ||
| margin: 25px 0 16px 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| dd { | ||
| margin: 16px 0 25px 40px; | ||
| padding: 0; | ||
| } | ||
|
|
||
| ul ol, ol ul, ul ul, ol ol { | ||
| margin: 10px 0; | ||
| padding: 0 0 0 40px; | ||
| } | ||
|
|
||
| li { | ||
| padding: 0; | ||
| } | ||
|
|
||
| h1 + p.date { | ||
| margin-top: -28px; | ||
| font-style: italic; | ||
| } | ||
|
|
||
| #container { | ||
| width: 960px; | ||
| margin: 10px auto; | ||
| background-color: #D3D3D3; | ||
| border-radius: 20px; | ||
| border: 3px solid gray; | ||
| padding: 20px; | ||
|
|
||
| } | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| <!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> | ||
| <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://twitter.com/madewulf">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 number on such topic is really difficult: you have to use many different sources with | ||
| different | ||
| counting criteria, and for some country, 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 indicator (population size, GDP, HIV and tuberculosis prevalence 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/">githup page</a>. Thanks to them for this | ||
| fantastic free service.</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 displaying in <a href="http://en.wikipedia.org/wiki/Scalable_Vector_Graphics">SVG</a> the countries borders, the "arrows" and animating everything, all </li> | ||
| <li>For the red hues used to display "migration intensity", I used the <a href="http://colorbrewer2.org/">Color Brewer</a> by Cynthia Brewer;</li> | ||
| <li>The font is <a href="http://ospublish.constantvzw.org/foundry/univers-else/">Univers Else</a> (I may have put it to bad use... not sure, I am not a type geek);</li> | ||
| <li><a href="http://python.org">Python</a> has been used, 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 manipulation (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> | ||
| <p>If you like the map, you might also like <a href="http://populationpyramid.net">PopulationPyramid.net</a></p> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.