6 ms·
HTML5 Map of the the World Migrations using SVG, Raphael.js and offline storage
- edswangren 15y agoThe GDP of Somalia is apparently so low it is NaN.
- madewulf 15y agoFor some countries, the world bank is giving no data. That said, it should not display NaN but rather "No data". I will investigate.
- g_lined 15y agoThe same is true for Taiwan. The website is really nicely designed.
- edswangren 15y agoI should have also added that it is a really cool page, aside from the one bug I pointed out.
- bwblabs 15y agoLooks 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 15y agoI'm not sure that I understand well, the hascode is indeed changed base on the currently viewed country.
- fauigerzigerk 15y agoVery 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?
- madewulf 15y agoThe 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 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...)
- rtuck 15y agoI'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 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-js-to-create-a-png-bitmap/ 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.
- fbnt 15y agoNice 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 15y agoI 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.
- fbnt 15y agoYou 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.
- Luyt 15y agoHow 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 15y agoThis. 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.
- azrealus 15y agoHow about different colors of lines for from/to?
- sesqu 15y agoHow about narrowing lines?
- narain 15y agoThis 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.
- ofca 15y agoFascinating 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 15y agoThanks for the tip....
- bencevans 15y agoReally 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!
- madewulf 15y agoIt 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
- yread 15y agoIt works even in WP7.5 IE!
- Samuel_Michon 15y ago"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 15y agoSo 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?
- dropshopsa 15y agoThis 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 15y agoI 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.
- paulkoer 15y agoVery 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 15y agoOops, I will fix that.
- qikquestion 15y agoInteresting...there is a huge migration from Brazil to China..can someone point out whats the reason?
- nandemo 15y agoI'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.
- deleted 15y ago[deleted]
- zalew 15y agoI see various migrations lacking - f.ex. Polish to Brazil, and Vietnamese to Poland. why is that?
- madewulf 15y agoThe 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_migrant_origin_database.html http://www.migrationdrc.org/research/typesofmigration/global...
- zalew 15y agothere's said to be 30-40k Vietnamese in Poland, some say even 50k. also there's a huuuuuge Polonia in Brazil.
- majika 15y agoThere'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.
- corporalagumbo 15y agoWhat is this data? Is it last year's migrations? Averages? More context is needed.
- madewulf 15y agoI added some context through the links at the bottom of the map: you can go to http://migrationsmap.net/about.html http://migrationsmap.net/about.html or directly to the page where the data is coming from: http://www.migrationdrc.org/research/typesofmigration/global_migrant_origin_database.html http://www.migrationdrc.org/research/typesofmigration/global...
- cpearce 15y agoNo, 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 15y agoNo, I don't NEED to do anything... That said, your comments are totally relevant, I will implement them.
- davidwparker 15y agoGreat job and I really enjoyed the visualizations. If you have the data, I would love to see migrations over time.
- sudobear 15y agoFantastic
- nl 15y agoPeople 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=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/#$majorMode=chart$is;shi=t;ly... 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 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_you_ve_ever_seen.html http://www.ted.com/talks/hans_rosling_shows_the_best_stats_y...
- SudarshanP 15y agoThe 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 15y agoI 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.
- wyclif 15y agoThe English on the About page needs some work. Pay attention to singular and plural, for example.
- CoreDumpling 15y agoIt'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 http://i.imgur.com/m8Wce.png [2] https://blogs.msdn.com/b/oldnewthing/archive/2006/10/27/880411.aspx https://blogs.msdn.com/b/oldnewthing/archive/2006/10/27/8804...
- madewulf 15y agoNo, 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 15y agoPuerto Rican per-capita income is NaN, by the way.
- rue 15y agoI'd like to see this in the Peters projection, but otherwise quite fun!
- deleted 15y ago[deleted]
- brianbreslin 15y agoSome data seems strange to me. Why would 123k mexicans go to pakistan? Or 30k mexicans go to Congo? http://migrationsmap.net/#/MEX/departures http://migrationsmap.net/#/MEX/departures and I understand this is lifetime, but still those two destinations seem unlikely to me. fascinating map nonetheless.
- blasdel 15y agoNevermind Pakistan, why would 2,626 Mexicans go to Greenland? http://migrationsmap.net/#/GRL/arrivals http://migrationsmap.net/#/GRL/arrivals
- ronmac 15y agoFor more data visualization check out www.bricbracs.com/splash
- mhidalgo 15y agoKind of crazy to see how almost every Country on the list has the United States as a destination.