Ever since I saw Hans Rosling’s 2006 GapMinder TED Talk on African wealth and saw his use of Motion Charts, I’ve been looking for ways to implement this in my own websites.

Up until now, there really hasn’t been anything ‘framework-y’ enough to use it with your own data. Google bought the rights from GapMinder a year later, and you can do a limited motion chart in Google docs, but it would be difficult to integrate this into your own site.

Enter the new D3.js library…

This new javascript visualization library has an example that actually implements Rosling’s chart! Truly awesome!

I talked a bit about GapMinder and Motion Charts after seeing them in Jessica Moss‘ presentation on Power View at the latest RockNUG meetup. SQL Server’s new data analytics tool includes some motion chart capability which is cool but still limited to use within that application.

Now we can do motion charts (as well as hundreds of other visualizations) using this incredible new library in our web apps…

Here’s the Motion Chart example:

http://bost.ocks.org/mike/nations/

Here’s the D3.js sample page:

https://github.com/mbostock/d3/wiki/Gallery

And, if you haven’t seen Hans Rosling’s presentation… well, you simply must:

http://www.ted.com/talks/hans_rosling_shows_the_best_stats_you_ve_ever_seen.html