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
Brett W. Green's On the Contrary 
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’
Since D3 is a framework, you have full control… I am certain you could make that work.
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?
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.
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++;
}
}
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/
why is the source code removed? where can I find it?
Hi,
I am unable to view the JS source for this motion chart, could you please help me finding where can I get the code from as the view source does not work on this motion chart.
Thank you!
I was able to view source on the page in Chrome which shows the D3 javascript and some css that drives it:
https://bost.ocks.org/mike/nations/