Home > JavaScript > Motion Chart using D3.js

Motion Chart using D3.js

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

About these ads
  1. September 13, 2013 at 6:19 am

    so it would be possible to use this to display a timeseries with any time resolution right?!?!

    biggest problem of Google’s motion chart is they only get ‘days’

  2. September 13, 2013 at 6:09 pm

    Since D3 is a framework, you have full control… I am certain you could make that work.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 44 other followers

%d bloggers like this: