Overview
I learn best by doing, so when I wanted to learn to use D3.js, I made it into a project. The goal? Create some charts. A lot of charts. And when I wanted to experiment with animation, I had to make the charts move. Obviously.
I used fullpage.js as the basic framework and dedicated one “page” to each type of chart.
All the Charts
The Bar Chart
The bar chart was easy to create because I had made them before, but these resources were still very useful:
- Let’s Make a Bar Chart (Mike Bostock)
- A Bar Chart, Part 2 (Mike Bostock)
- Making a Bar Chart (Scott Murray)
Pastry Charts (Pies and Donuts)
Making the pie chart was pretty simple thanks to this example. Getting it to animate the way I wanted, not so simple. The animation I ended up with was a bit of a happy accident after using the animation from the example and playing with timing and opacity, but it works.
Creating a donut chart is actually quite simple. However, because I wanted to animate from a pie chart to a donut chart (i.e. change the inner radius), I ended up cheating a little. Instead of creating a true donut chart, I created a pie chart and drew a circle in the middle so that I could animate the size of the inner circle. I’m sure there’s a better way to do it, but this worked.
Scatter Plot
The scatter plot was simple to create, and the animation was a lot of fun to play with. I did learn one important lesson though: If you are using .ease(‘elastic’), to shrink a data point (i.e. decreasing the radius), make sure you’re not ending at 0. The ‘elastic’ transition animates past the end point, resulting in a negative radius and some very angry code. If you do need to end at 0, ‘bounce’ has a similar effect without going negative.
Line Graph
The line graph was simple to create (not much different than the scatter plot), and of course animating from point to point was equally simple. Ha! Not quite. It turns out animating from point A to B is not that straightforward and requires a bit of a hack (although a very commonly used hack). You make the line a dashed line, with really big dashes (stroke-dasharray). Then you animate the dash offset (stroke-dashoffset), or the space between the gigantic dashes. The result is a line being drawn on the screen. Rejoice!
Venn Diagram
The venn diagram was probably the most difficult chart to make. Weird, right? Actually, making a simple venn diagram is very straightforward. The reason this venn diagram was so difficult is that I needed each section to have a different hover effect.
Bubble Chart
There wasn’t much to the bubble chart because I took what I had done for Alphabet Cities and changed some values to get the look I wanted. Copy/paste at its best.
Box Plot
For the box plot, I used code from Mike Bostock’s box plot example. I adjusted some of the values to get the look I wanted, but other than that it was straight-up code re-use.
