HTML5 Map of the the World Migrations using SVG, Raphael.js and offline storage | Hacker News Reader

HTML5 Map of the the World Migrations using SVG, Raphael.js and offline storage

migrationsmap.net

240 pointsmadewulf64 comments

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/#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...

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.

Good point.

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

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)?

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)

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.

How about different colors of lines for from/to?

How about narrowing lines?

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.

There is a drop-down with a list of countries and the legend is draggable if you wish.

BTW, you can also click on the name of countries in the legend.

Great, I overlooked that.

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.

Thanks for the tip....

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...

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).

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

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.

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.

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

It works even in WP7.5 IE!

"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?

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

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...

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.

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

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.

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.

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.

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

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

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.

Oops, I will fix that.

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.

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

PNG from http://site2pic.com : http://site2pic.com/pics/migrationsmap.net1910.png

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.

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

I missed that, now I see!

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

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

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

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

The same is true for Taiwan. The website is really nicely designed.

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

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

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.

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

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

I will fix all the typo.

Done.

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

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...

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

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

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

Fantastic

Reply on news.ycombinator.com