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

  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.

  3. April 7, 2015 at 6:02 am

    Hi.. I need to change year to year-month format(2013-02). But i am not able get the result. Can any one please help me, how to resolve the problem?

  4. April 8, 2015 at 1:55 pm

    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.

    • April 9, 2015 at 12:25 am

      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) {
      dot.data(interpolateData(year), key).call(position).sort(order);
      month = Math.ceil((year – Math.floor(year))*12);
      label.text(Math.round(year) + ‘-‘ + month);
      i++;
      }
      }

  5. April 9, 2015 at 7:23 am

    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.

    http://momentjs.com/docs/#/displaying/

  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.

%d bloggers like this: