

HTML5 Map of the the World Migrations using SVG, Raphael.js and offline storage - madewulf
http://migrationsmap.net/#/IND/departures

======
nl
People who like exploring statistics like this (as opposed to just being
impressed by the nice technical implementation - which I love, btw) should
take a look at GapMinder.

Eg:

[http://www.gapminder.org/world/#$majorMode=chart$is;shi=t;ly...](http://www.gapminder.org/world/#$majorMode=chart$is;shi=t;ly=2003;lb=f;il=t;fs=11;al=30;stl=t;st=t;nsl=t;se=t$wst;tts=C$ts;sp=5.59290322580644;ti=2009$zpv;v=0$inc_x;mmid=XCOORDS;iid=phAwcNAVuyj1jiMAkmq1iMg;by=ind$inc_y;mmid=YCOORDS;iid=phAwcNAVuyj2tPLxKvvnNPA;by=ind$inc_s;uniValue=8.21;iid=phAwcNAVuyj0XOoBL_n5tAQ;by=ind$inc_c;uniValue=255;gid=CATID0;by=grp$map_x;scale=log;dataMin=295;dataMax=79210$map_y;scale=lin;dataMin=19;dataMax=86$map_s;sma=49;smi=2.65$cd;bd=0$inds=;example=75)

[http://www.gapminder.org/world/#http://www.gapminder.org/wor...](http://www.gapminder.org/world/#http://www.gapminder.org/world/#$majorMode=chart$is;shi=t;ly=2003;lb=f;il=t;fs=11;al=30;stl=t;st=t;nsl=t;se=t$wst;tts=C$ts;sp=4.67741935483871;ti=1990$zpv;v=0$inc_x;mmid=XCOORDS;iid=phAwcNAVuyj1jiMAkmq1iMg;by=ind$inc_y;mmid=YCOORDS;iid=0ArfEDsV3bBwCcGhBd2NOQVZ1eWowNVpSNjl1c3lRSWc;by=ind$inc_s;uniValue=8.21;iid=phAwcNAVuyj0XOoBL_n5tAQ;by=ind$inc_c;uniValue=255;gid=CATID0;by=grp$map_x;scale=log;dataMin=1438;dataMax=45906$map_y;scale=log;dataMin=1.7;dataMax=1551$map_s;sma=49;smi=2.65$cd;bd=0$inds=i175_l001990bfbH;i65_p001990afa7;i231_l001990bVba)

The Hans Rosling TED talk is fantastic too:
[http://www.ted.com/talks/hans_rosling_shows_the_best_stats_y...](http://www.ted.com/talks/hans_rosling_shows_the_best_stats_you_ve_ever_seen.html)

------
narain
This is really informative, and very well done to boot. Great work!

The colour scheme struck me as a little odd, though. It goes from darker (more
migration) to lighter (less migration) but then abruptly to dark grey (no
migration), making it harder to interpret at first glance. It would be nice if
it were somewhat monotonic: bright colour = more migration, darker/duller
colour = less migration, dark grey = no migration.

~~~
aw3c2
I also found the bright "alert" red to feel like "more" than the darker more
saturated one for me.

------
fbnt
Nice and interesting, well done! I also like the offline caching feature.

The only tiny imperfection I see it's in the lines connecting two countries,
I'd like to see an arrow so I know if I'm looking at arrivals or departures.

Is there a way to filter the GMO database to see only the current migration
flow (say, last 5 years)?

~~~
madewulf
I have tried to add arrows at some point, but it cluttered the visualization
too much (especially for countries where migrations are quite local : limited
to border-sharing countries).

That said, there may be a solution I did not think about.

~~~
Luyt
How about drawing the arrowhead on the middle of the line? (And not drawing it
on short lines. The arrowheads on the long lines will reveal whether
'departures' or 'arrivals' are depicted)

~~~
wetbrain
This. And if possible, add a subtle gradient on each curve. So, even without
arrows on short lines the direction is clear. Plus it looks cool.

------
ofca
Fascinating how boring data may be presented interesting and fresh by simple
vizualisation. This remings me of the TED talk given by Hans Rosling about
global statistics of population, mortality, internet access etc. Whoever made
this map should contact mr. Hans, I smell collaboration there.

~~~
madewulf
Thanks for the tip....

------
CoreDumpling
It's understandable that several places don't have data (NaN), but I found it
curious that Burma/Myanmar is missing from the map [1], much like the "Poland
Sea" in a Microsoft Date/Time screen from yesteryear [2].

Did you create this map data or get it from somewhere else? Is this some kind
of joke?

[1] <http://i.imgur.com/m8Wce.png>

[2]
[https://blogs.msdn.com/b/oldnewthing/archive/2006/10/27/8804...](https://blogs.msdn.com/b/oldnewthing/archive/2006/10/27/880411.aspx)

~~~
madewulf
No, it's just a bug. I have been using two sets of data where the name of the
countries were not perfectly matching (example: United States VS United States
of America). I fixed most of the inconsistencies and showed the map to some
people to help me spot the problems. This one slipped through (as the
geocoding of Serbia and some NaN).

~~~
Vivtek
Puerto Rican per-capita income is NaN, by the way.

------
SudarshanP
The blue arrow next to the arrivals and departures selection, acts like a
radio buttion, but looks like an arrow. This is misleading... I was wondering
why it said "Arrivals => Deprture" which looked weird... only after i clicked
around, it was obvious that it was acting like a radio button.

~~~
jamesrcole
I was also initially confused by that.

Maybe the arrow and the name of the currently selected item could be enclosed
in a bounding box with a darker background, so as to more clearly show that it
is currently selected.

------
bencevans
Really Responsive too and it all works in Opera or seemed to anyway, so many
developers forget about Opera because it doesn't have the same amount of
marketing as the others. But anyway Sweet Build!

~~~
Samuel_Michon
_"many developers forget about Opera because it doesn't have the same amount
of marketing as the others."_

Um, no. Many developers forget about Opera Mobile/Desktop because nobody uses
it. Many developers forget about Opera Mini because it's worse to develop for
than IE6.

~~~
5l
So I'm _not_ using Opera right now then? Thanks for clearing that up for me.

Perhaps you should consider that even a few percentage point share of the
browser market still translates to _millions_ of users. About 50 million on
Opera Desktop to be more precise.

If you don't care about them I guess you certainly don't care about the few
people using screen readers; or how about Safari which has only roughly double
Opera's measly market share?

------
corporalagumbo
What is this data? Is it last year's migrations? Averages? More context is
needed.

~~~
madewulf
I added some context through the links at the bottom of the map: you can go to
<http://migrationsmap.net/about.html> or directly to the page where the data
is coming from:
[http://www.migrationdrc.org/research/typesofmigration/global...](http://www.migrationdrc.org/research/typesofmigration/global_migrant_origin_database.html)

~~~
cpearce
No, you _need_ to have units on your data. Without units, numbers mean
nothing. You select a country, and then you're presented with a list of other
countries and some numbers. It's not clear that these are lifetime immigrants
or permanent residents. There should be a title on the country info box "Total
lifetime immigrants" or "Total lifetime emigrants", and ideally a legend at
the bottom defining what that means.

It's also confusing in that the number format follows a European convention of
using decimal points rather than commas in between every three digits the
numbers, though I can accept that localising your site isn't a big concern.

~~~
madewulf
No, I don't NEED to do anything... That said, your comments are totally
relevant, I will implement them.

------
dropshopsa
This is awesome really enjoyed it, spent about 20 mins checking out how people
and moving around the world.

I would include a zoom function, some small countries are hard to find.

~~~
madewulf
I totally agree, that is the main missing feature in my opinion and the reason
why I added a select box on top.

At first I wanted to use polymaps, which supports zoom and pan, but I found it
difficult to draw on top of it (for the "arrows") and it lacked ie support. So
I went for Raphael.js, but found it to cumbersome to implement zoom and pan.

------
brianbreslin
Some data seems strange to me. Why would 123k mexicans go to pakistan? Or 30k
mexicans go to Congo? <http://migrationsmap.net/#/MEX/departures>

and I understand this is lifetime, but still those two destinations seem
unlikely to me.

fascinating map nonetheless.

~~~
blasdel
Nevermind Pakistan, why would 2,626 Mexicans go to Greenland?
<http://migrationsmap.net/#/GRL/arrivals>

------
davidwparker
Great job and I really enjoyed the visualizations. If you have the data, I
would love to see migrations over time.

------
paulkoer
Very impressive, nicely done! Spent a couple of minutes exploring migrant
streams.

Minor nitpick: When I click on 'Macedonia' the origin point appears in Sweden.
When I click on 'Serbia' it appears in Canada.

~~~
madewulf
Oops, I will fix that.

------
majika
There's an ordering issue for Faroe Islands departures. I think it might be
doubling single-digit quantities - everything below Panama (10 departures) is
a duplicated number. I'm on Firefox 6.0.2, Linux AMD64.

------
fauigerzigerk
Very nice. I was wondering how difficult it would be to capture a particular
state of the map (say UK departures) as a PNG for embedding or generating a
PDF. Could you do that on the server side?

~~~
rtuck
I've been looking into a few ways to do exactly that with Raphael. The short
answer is that it's possible but a little tricky. I've found three methods so
far:

1) If you're using a browser that supports SVG (basically, not IE), Raphael
will generate the images as SVG nodes in your DOM tree. You can just grab that
entire section of the DOM and send the SVG markup to the server where you
render it using the image library of your choice.

2) If you have to support IE the above method won't work. Only IE9 has any SVG
support and I've heard reports that it's spotty. In these cases, Raphael falls
back on VML, an older MS extension that provides more or less the same
experience. Unfortunately, I don't know of a server side generation library
that supports VML. What's worse, in my testing, IE won't even print the VML
image so you can't even use a PDF writer in the browser.

So, the simplest workaround is use the VML fallback in IE for display but when
the user wants to download a final version, generate the same drawing as HTML
+ Javascript on the serverside and then use wkhtmltopdf on the html. (For
those who don't know, wkhtmltopdf is an awesome tool that uses a headless
webkit browser to convert HTML files to shockingly good PDFs).

As long as the javascript is triggered on load, wkhtmltpdf will include it in
the resulting pdf. This doesn't always work perfectly but odds are it'll work
for you.

As an added bonus, SVG bits also seemed to be rendered as vector in the actual
PDF. This also prevents any chance of the server side image rendering slightly
differently from the user preview.

3) If the wkhtmltopdf method isn't rendering properly or is too exotic for
your server, you can try using the great raphael.serialize plugin (
<https://github.com/jspies/raphael.serialize> ). This works around the SVG/VML
problems by exporting the data as a JSON structure. This can be re-rendered
inside raphael easily but exporting to PNG is trickier. You can convert the
JSON to SVG and render that as in method one, Ben Barnett has a small code
example on how to do that: ( [http://www.benbarnett.net/2010/06/04/export-svg-
from-raphael...](http://www.benbarnett.net/2010/06/04/export-svg-from-raphael-
js-to-create-a-png-bitmap/) ) but there's no complete library for doing this
yet so you'll have to write some extra bits yourself. If you do write a
library for this, please open source it so I don't have to do it too. ;)

Also, Raphael 2.0 is being launched at jsconf.eu next month so it may have a
more clever approach for this but I haven't looked into it yet.

~~~
justincormack
IE9 SVG support is really good. It has some differences in coverage, but is
excellent overall.

------
bwblabs
Looks great! The population of Saint Helena is NaN and also there is something
wrong with the arrows..

BTW changing #hashcode based on the country looking at would be great too.

~~~
madewulf
I'm not sure that I understand well, the hascode is indeed changed base on the
currently viewed country.

~~~
bwblabs
I missed that, now I see!

Then check that <http://migrationsmap.net/#/SHN/departures> is still broken.

~~~
madewulf
Ok, it's a problem with the geolocation of Saint Helena, I will fix that.

------
edswangren
The GDP of Somalia is apparently so low it is NaN.

~~~
madewulf
For some countries, the world bank is giving no data. That said, it should not
display NaN but rather "No data". I will investigate.

~~~
edswangren
I should have also added that it is a really cool page, aside from the one bug
I pointed out.

------
qikquestion
Interesting...there is a huge migration from Brazil to China..can someone
point out whats the reason?

~~~
nandemo
I'm inclined to believe it's wrong data.

It could be there was some so-called return immigration, with Chinese-
Brazilians going to China during the times of high unemployment rate on Brazil
(as lots of Japanese-Brazilians did). But as a Brazilian I've never heard of
that, so 50k sounds implausible.

------
mhidalgo
Kind of crazy to see how almost every Country on the list has the United
States as a destination.

------
wyclif
The English on the About page needs some work. Pay attention to singular and
plural, for example.

~~~
madewulf
I will fix all the typo.

~~~
madewulf
Done.

------
zalew
I see various migrations lacking - f.ex. Polish to Brazil, and Vietnamese to
Poland. why is that?

~~~
madewulf
The reason is probably because the map is only showing the top 10 for each
list of countries. Vietnam is probably not in the top ten for arrivals in
Poland.

You can easily verify this here:
[http://www.migrationdrc.org/research/typesofmigration/global...](http://www.migrationdrc.org/research/typesofmigration/global_migrant_origin_database.html)

~~~
zalew
there's said to be 30-40k Vietnamese in Poland, some say even 50k. also
there's a huuuuuge Polonia in Brazil.

------
rue
I'd like to see this in the Peters projection, but otherwise quite fun!

------
ronmac
For more data visualization check out www.bricbracs.com/splash

------
sudobear
Fantastic

