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.
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.
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)?
Another imperfection to this otherwise interesting tool: it is hard if not impossible to click on small countries or islands. Good luck if you want to know who goes to Guadeloupe. Pascali Islands are hidden by the legend if I'm not mistaking. This is inherent to any "click a country on the world map" tool. A complex and not perfect way to fix it would be to allow zooming, but here I would add a drop-down with a list of countries.
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.
You could over impose three dotted lines with a different color/dot-spacing to each connecting line, then set a timeout and alternate their visibility accordingly, so you can get a "dots flowing inside the line" effect. Not sure if this can work with canvas though.
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)
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.
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.
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.
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?
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).
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!
It also works in IE. I just showed it on ie8. It's less fluid, and you loose some functionality, but the main ones are still working. Kudos to Raphael.js
"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.
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?
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.
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.
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.
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?
The site is currently javascript only, the server is only serving static files, and the svg tags are generated in the browser using Raphael.js.
That said, I have already been pondering about this for a previous projects: http://populationpyramid.net and there are solutions : either export the svg tags through an ajax query to a server that would then render it as PNG, or create a script that would create the svg files directly from the data. I did not take time to implement this, though (I have to sleep sometimes...)
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... ) 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.
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.
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.
Eg:
http://www.gapminder.org/world/#$majorMode=chart$is;shi=t;ly...
http://www.gapminder.org/world/#http://www.gapminder.org/wor...
The Hans Rosling TED talk is fantastic too: http://www.ted.com/talks/hans_rosling_shows_the_best_stats_y...