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:

Here’s the D3.js sample page:

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

Author: Brett W Green

Brett has been doing web development since the days of Netscape Gold, debating from the moment he left the womb, and in a love/hate relationship with CSS since 1999. Keep it Simple and Stupid! Twitter: @brettwgreen Blog:

6 thoughts on “Motion Chart using D3.js”

  1. 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. In the example source code there’s a displayYear function referenced in the mousemove event… you should be able to modify this function to get the format that you want.

    1. Hi Brett,

      I tried, but am getting error. “Cannot read property ‘map’ of null”.

      #For me year month should be like this: 2010-04. This is the code, i tried.

      function displayYear(year) {, key).call(position).sort(order);
      month = Math.ceil((year – Math.floor(year))*12);
      label.text(Math.round(year) + ‘-‘ + month);

  3. I’m assuming the ‘year’ parameter has something other than just a 4-digit integer? You will have to have fed something else into the chart (I’d recommend changing the parameter name throughout).

    I mean you’ll have to debug it to see what’s being passed in. If you’ve got what you need and just need to format it properly, I’d probably use something like moment.js to format the dates rather than parse it myself.

Leave a Reply

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

You are commenting using your 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