Tip:
Highlight text to annotate it
X
Hello, Welcome to "The Joy of d3.js", the commit by commit guide of building Hans Rosling's
"GapMinder" data visualisation, this is GamMinder, in d3.js
Hans Rosling is almost like an idol in statistics and data visualisation world. He gave a talk
at TED and also presented in the BBC program called "The Joy of Stats". This one. OK?
And D3.js is a JavaScript library for manipulating documents based on data. It is more than just
a charting library though.
During the keynote of Open Knowledge Festival 2012, he, Hans Rosling regarded d3js and its
author Mike Bostock very highly and said
The bubble chart that took my son one and half year, this one, to do, you can do in
this evening now, which is this one, the one Mike Bostock made.
And Hans even said that
"You learn Java("Script"), and you learn how to use d3, and you will have work in the future".
That's really interesting.
That's probably true for someone like Mike Bostock who knows the library inside out.
This is the chart Mike made back in March 2012, and this one shows that the vertical
axis shows the average life expectancy, the horizontal axis shows the income per capita,
and the size of the bubble shows the population of each country. Each bubble is colored depending
on its region. The chart animates between 1800 and 2009, and you can got back and forward
by hovering over the year label.
I looked into the source code, you can actually see the source code here, it is packed with
interesting techniques, though some of them are a bit too advanced for beginners.
So, I created a subset of his visualisation with a bit of twist. So let's see how it looks
like.
So, this is very simple. In this chart, The blue circle is UK and the
orange is Japan. If I refresh this,
You can see that Japanese life expectancy suffered due to World War Two around 1943,
but caught up rapidly in mid seventies, then moved together with UK afterword.
And also as an added bonus, clicking the "Map" button transition scatterplot into map layout.
THis is what we are going to create during this tutorial. ok
And Topics.
This tutorial uses some important API of d3 js such as
selections, transitions, scaling, working with arrays, loading external resources, and
geography.
Also, I will cover some patterns which are quite famous in d3js world such as thinking
with join or object constancy.
And while I develop this code, I started by drawing simple circles, then made them moving
a bit, changes colors, adding scales and eventually
adding this animation.
I go through this literally commit by commit. So if you are interested in actually playing
with it, you can do git commit with this SHA number.
Or I also have a section called playground where I put some sort of snippet into Tributary
which is made by Ian Johnson. This is very good interactive editor where I can cover
specific part of d3 technics.
This is how we do the tutorial, so let's start.