Skip to content
Browse files

adding about.html

  • Loading branch information...
1 parent 7401dd0 commit f1f7ada3d1d3a724c7507d1266dcee809aabc3ba @madewulf committed Sep 15, 2011
Showing with 245 additions and 39 deletions.
  1. +3 −14 README.md
  2. +93 −0 about.css
  3. +97 −0 about.html
  4. +2 −2 cache.manifest
  5. +33 −22 index.html
  6. +17 −1 main.css
View
17 README.md
@@ -4,20 +4,9 @@ MigrationsMap.net
This is the code of the site http://migrationsmap.net, including the scripts
used to generate the JSON data files.
-* `parser.py` generates two Python matrices (in fact, dictionnaries of dictionnaries) from
- the file `global_migrant_origin_database_version_4.csv`: `matrix[country_code1][country_code2]`
- which allows to find the number of migrants leaving from country 1 to country 2 (countries
- are represented by their ISO 3166 three letters country code). `reversed_matrix` allows
- to find the number of migrants arriving, instead of leaving.
- In the processes of creating those matrices, two useful files are generated:
- * `code_to_name.json` a JSON object allowing to match iso country codes to country names
- * `name_to_code.json` allows the reverse translation from country names to country code
- `parser.py` also contains the function `geolocalize_the_world`
- which obtains geographic coordinates for every country of `code_to_name.json` from the Google
- geolocation api and stores it in `geoloc.json` (beware, because of some mistakes, this file
- has been manually edited after the process, for example because Georgia had been located
- in the U.S.A.).
+The code is under MIT license.
-The code is under MIT license.
+Don't hesitate to contact me at madewulf@gmail.com, or via twitter: http://twitter.com/madewulf if you have
+any question.
View
93 about.css
@@ -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;
+
+}
+
+
View
97 about.html
@@ -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>
View
4 cache.manifest
@@ -1,12 +1,12 @@
CACHE MANIFEST
-#rev 28
+#rev 29
raphael.js
jquery-ui-1.8.16.custom/js/jquery-1.6.2.min.js
jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js
jquery-ui-1.8.16.custom/css/ui-darkness/jquery-ui-1.8.16.custom.css
jquery-ui-1.8.16.custom/css/ui-darkness/images/ui-icons_cccccc_256x240.png
jquery-ui-1.8.16.custom/css/ui-darkness/images/ui-icons_ffffff_256x240.png
-
+https://apis.google.com/js/plusone.js
modernizr.geoloc.js
main.css
world_svg_paths_by_code.json
View
55 index.html
@@ -23,26 +23,26 @@
<script type="text/javascript" src="hasher.js"></script>
<script type="text/javascript" src="modernizr.geoloc.js"></script>
<link rel="stylesheet" type="text/css" href="main.css" />
-<script type="text/javascript">
+ <script type="text/javascript">
- var _gaq = _gaq || [];
- _gaq.push(['_setAccount', 'UA-1397562-10']);
- _gaq.push(['_trackPageview']);
+ 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);
- })();
+ (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">
+ </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>-->
+</script>
</head>
<body>
@@ -52,11 +52,11 @@
<div id="title">
<h1 style="color:white;">MigrationsMap.net</h1>
<p style="font-size:13px;padding: 2px 0px 0px 0px;">Where are migrants coming from? Where have migrants left?</p>
-
</div>
+
<div id="social">
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fmigrationsmap.net&amp;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>
-<!--<g:plusone size="medium"></g:plusone>-->
+<div id="plusone"><g:plusone size="medium"></g:plusone></div>
</div>
<div id="country_select_div">
<span id="explanation">Click on the map or pick a country here:</span>
@@ -74,8 +74,8 @@ <h1 style="color:white;">MigrationsMap.net</h1>
var current_arrows=[];
var current_countries=[];
var currentCircles=[];
- var currentCountry="BEL";
- var previousCountry = "BEL";
+ var currentCountry="USA";
+ var previousCountry = "USA";
var direction = "out";
var unselected_color = "#515151";
var selected_color = "#999";//"#67E667" ;//"#87ceeb";
@@ -220,7 +220,7 @@ <h1 style="color:white;">MigrationsMap.net</h1>
country_name.append("<tr><th>Population</th><td style='text-align:right;'>" + pop+'</td></tr>');
var gdp = insertDecimalPoints(parseFloat(GDP[country]).toFixed(0)) ;
if (gdp)
- gdp = gdp + ' $';
+ gdp = '$ '+gdp;
else
gdp ="no data";
country_name.append("<tr><th>GDP per capita</th><td style='text-align:right;'>" + gdp+'</td></tr>');
@@ -296,17 +296,24 @@ <h1 style="color:white;">MigrationsMap.net</h1>
{
$.getJSON("generated/"+direction+currentCountry+".json", function(data) {
- $("#countries").empty();
- $("#country_name").empty()
- $("#country_name").append(code_to_name[currentCountry]);
+ var countries_div = $("#countries");
+ var country_name_div = $("#country_name");
+ countries_div.empty();
+ country_name_div.empty()
+ country_name_div.append(code_to_name[currentCountry]);
+ $("#popsize").empty();
+ var popsize = insertDecimalPoints(parseFloat(POP[currentCountry]).toFixed(0));
+ popsize = "Pop: "+popsize;
+ if (popsize)
+ $("#popsize").append(popsize);
var counter =0;
$.each(data, function(country, val) {
var line;
var i;
var l;
var path;
line = paper.path(val[0]);
- $("#countries").append("<tr><td><div class=color_span style='height:1em;width:1em;background-color:"+ten_colors[counter] +" '>&nbsp;&nbsp;&nbsp;</div></td><td class='country_name' value='"+name_to_code[val[1]] +"'>"+val[1]+'</td><td style="text-align: right;">'+insertDecimalPoints(val[2])+"</td></tr>")
+ countries_div.append("<tr><td><div class=color_span style='height:1em;width:1em;background-color:"+ten_colors[counter] +" '>&nbsp;&nbsp;&nbsp;</div></td><td class='country_name' value='"+name_to_code[val[1]] +"'>"+val[1]+'</td><td style="text-align: right;">'+insertDecimalPoints(val[2])+"</td></tr>")
line.attr({stroke:arrow_color,'stroke-width':2,'opacity':0});
line.animate({stroke:arrow_color,'stroke-width':2,'opacity':1},333);
current_arrows.push(line);
@@ -394,6 +401,8 @@ <h1 style="color:white;">MigrationsMap.net</h1>
});
$(function(){
+ if (!Modernizr.geolocation)
+ $("#geoloc_me").hide();
container = $("#container");
$("#in").click(function(e){
e.preventDefault();
@@ -479,6 +488,8 @@ <h1 style="color:white;">MigrationsMap.net</h1>
<div id="legend">
<h2 id="country_name">
</h2>
+ <h3 id="popsize">
+ </h3>
<table id="countries" width="100%">
</table>
</div>
@@ -491,7 +502,7 @@ <h2 id="country_name">
</div>
<div id="credits">
- Visualization by <a href="http://twitter.com/madewulf">Martin De Wulf</a> based on <a href="http://www.migrationdrc.org/research/typesofmigration/global_migrant_origin_database.html">the Global Migrant Origin Database</a> Version 4 (updated March 2007) - <a href="http://multitasked.net/migrationsmap.net">Learn more</a>
+ Visualization by <a href="http://twitter.com/madewulf">Martin De Wulf</a> based on <a href="http://www.migrationdrc.org/research/typesofmigration/global_migrant_origin_database.html">the Global Migrant Origin Database</a> Version 4 (updated March 2007) - <a href="about.html">Learn more</a>
</div>
<div id="geoloc_me" class="ui-state-default ui-corner-all">
<span title="Where am I?" class="ui-icon ui-icon-home"></span>
View
18 main.css
@@ -81,6 +81,12 @@ body {
left: 10px;
}
+#plusone {
+ position : absolute;
+ top: 10px;
+ left : 110px;
+}
+
#countries {
width: 100%;
}
@@ -120,7 +126,7 @@ body {
}
h2 {
- margin: -7px -17px 6px -0.8px padding-top: 2px;
+ margin: -7px -17px 6px -0.8px;
padding: 2px 2px 13px 0;
font-size: 21px;
}
@@ -187,6 +193,10 @@ a {
h1 {
display:inline;
+
+}
+a h1 {
+ text-decoration: none;
}
#credits {
padding: 10px;
@@ -242,4 +252,10 @@ td.country_name{
}
#country_name_popup th{
text-align: left;
+}
+
+h3{
+ margin-bottom: 10px;
+ margin-top:-2px;
+
}

0 comments on commit f1f7ada

Please sign in to comment.
Something went wrong with that request. Please try again.