Charts

Who doesn’t love a good pie chart?

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 test out the animation capabilities, I had to make the charts move. Obviously.

Try the live version to see it in action →

The setup

I used fullpage.js as the basic framework and dedicated one “page” to each type of chart.

The charts

Bar Chart

The bar chart was easy to create because I had made them before, but these resources were still very useful:

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.

Enter clip paths. This handy example, again from Mike Bostock, does a good job illustrating the basic idea. In short, you create your three circles as clip paths instead of normal circles. Then for each venn diagram segment, create a rectangle and combine the clip paths as needed to get the desired segment.

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.

Quick tip for testing ajax-y stuff (like importing the csv data for the box plot example): If you’re working locally and trying to use Chrome (and some other browsers), you might see this lovely error:

XMLHttpRequest cannot load [insert file name here]. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘file://’ is therefore not allowed access.

Luckily it’s a quick fix:

  1. Close the browser.
  2. Open up Terminal (or the console on Windows).
  3. On a Mac, type “open /Applications/Google\ Chrome.app –args –allow-file-access-from-files” without the quotes. For Windows the string is probably similar and a quick search should find what you need. The browser will open and you can proceed error free.