Multiple Time Series in D3

The D3 library offers such powerful tools for binding data to DOM elements that I found it imposing to create a simple time series with it. Having finally done so, and learned quite a few things along the way, this is my attempt to share that experience and to reinforce what I learned to myself.

The work can be broken down into several steps:

I started out with the idea of comparing three time series, one each for the cancer survival rates of males, females and the total population. To accommodate this format we need a canvas and three selectors to show or hide each time series. The canvas will be a div with id="graph" and the selectors will be checkboxes with id="total", "male" and "female" (these ids will be important later on).

We can take a look at these later, when they will make more sense.

We will start off with the cancerTotal.csv which contains the survival rates for the total population measure. Start off by loading the desired features SurvRate and Year.

Next, we set scales for the x and y axes for year and survival rate, respectively.

In the domain of x we are using the d3.extent function to get the range of years without having to specify two separate min and max functions for the beginning and ending years.

In the range of y we have inverted height and 0 to make it easier to orient our lines later.

Now we define the path function for our time series:

line takes two methods x and y for the x- and y-coordinates of our path. Here we have defined anonymous functions => to pass the scaled year to x and the scaled survival rate to y.

Now we define the container using our div from before:

We select the the id graph in which to create our canvas and then append g with the appropriate margin transform.

The next chunks are for the title, axes and y-axis label. We are just taking advantage of the d3 functions and our judicious margins to make these.

Here’s the fun part, path drawing! We create append a g inside container. Then bind the data to a path with this attr("d", line(data))

For the sake of transparency I added circles for the data points we have in the csv.

Then it’s basically just rinse and repeat for the female and male survival rate data. We can use the same container and we vary colors, but otherwise the goal is to plot all three lines and the means are very similar for each.

Let’s return to the checkboxes, in particular to this:

We make a selection of all our inputs, which we have classed as selector when we created them. The event listener "click" is for checking or unchecking and since we want to either show or hide data based on the context we need to refine our choice of action. The line

is a conditional which can be read as “If a checkbox is checked when it is clicked, then pass the id of this checkbox to the function showCircle otherwise pass the id of this checkbox to the function hideCircle. This does what we want as long as we can write the show and hide functions to do what we want using the id of a checkbox. Here’s where the checkbox id and the path class come into play. We used the “total”, “female” and “male” as ids for the checkboxes and “total”, “female” and “male” as classes for the paths. All that is left is to select the correct paths:

Here what we have done is first select paths, then filter to paths with the class equal to whatever was passed to showPath or hidePath, which in our case is the class of the checkbox. Checking a box will trigger a transition in which the path takes one second to appear. Unchecking a box will trigger a transition in which the path takes one second to shrink to a width of zero.

That’s all! Looking back there are several redundancies in this code, artifacts of having tried and failed to get things working a certain way and having to rethink how to draw paths or get working checkboxes. I hope this was helpful in some way, that it gave you some idea of how to do (or how not to do) a time series in d3.

Related posts:

A poem inspired by the Blues of blind love.. “I Should Quit You” is published by Estacious(Charles White) in The Partnered Pen.

This fear you are experiencing might actually be something good. It might be a warning signal you should not ignore. Or do you simply fear that your dream might never be realized at all because you…

On the left is Steven Thomas Druckenmiller, son of Kevin and MaryAnn Druckenmiller of Fremont, Ohio. He is a licensed attorney who, as of last year, was working for the Department of Justice in…