Adding more than one line to a graph in d3.js

The following post is a portion of the D3 Tips and Tricks document which it free to download. To use this post in context, consider it with the others in the blog or just download the pdf  and / or the examples from the downloads page:-)

--------------------------------------------------------

All right, we're starting to get serious now. Two lines on a graph is a bit of a step into a different world in one respect. I mean that in the sense that there's more than one way to carry out the task, and I tend to do it one way and not the other mainly because I don't fully understand the other way :-(.

I should stress that that's not because it's more complex, or that it's a bad way, it's just that once I started doing things one way, I haven't come across a need to do things another way. There's a good chance I will have to revisit this decision in the future, but for now I'll keep moving.

So, how are we going to do this? I think that the best way will be to make the executive decision that we have suddenly come across more data and that it is also in our data.tsv file. In fact it looks a little like this (apologies in advance for the big ugly block of data);

date        close    open
1-May-12    58.13    34.12
30-Apr-12   53.98    45.56
27-Apr-12   67.00    67.89
26-Apr-12   89.70    78.54
25-Apr-12   99.00    89.23
24-Apr-12   130.28   99.23
23-Apr-12   166.70   101.34
20-Apr-12   234.98   122.34
19-Apr-12   345.44   134.56
18-Apr-12   443.34   160.45
17-Apr-12   543.70   180.34
16-Apr-12   580.13   210.23
13-Apr-12   605.23   223.45
12-Apr-12   622.77   201.56
11-Apr-12   626.20   212.67
10-Apr-12   628.44   310.45
9-Apr-12    636.23   350.45
5-Apr-12    633.68   410.23
4-Apr-12    624.31   430.56
3-Apr-12    629.32   460.34
2-Apr-12    618.63   510.34
30-Mar-12   599.55   534.23
29-Mar-12   609.86   578.23
28-Mar-12   617.62   590.12
27-Mar-12   614.48   560.34
26-Mar-12   606.98   580.12

Three columns, date open and close. The first two are exactly what we have been dealing with all along and the last (open) is our new made up data. Each column is separated by a tab (hence .tsv (Tab Separated Values)), which is the format we're currently using to import data.

We should save this as a new file so we don't mess up our previous data, so let's call it data2.tsv.

We will be using our simple graph template to start with, so the immediate consequence of this is that we need to edit the line that was looking for 'data.tsv. To reflect the new name.

d3.tsv("data/data2.tsv", function(error, data) {

So when you browse to our new graph html file, we don't see any changes. It still happily loads the new data, but because it hasn't been told to do anything with it, nothing new happens.

What we need to do now it to essentially duplicate the code blocks that drew the first line for the second line.

The good news is that in the simplest way possible that's just two code blocks.

The first sets up the function that defines the new line;

var valueline2 = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.open); });

You should notice that this block is identical to the block that sets up the function for the first line, except this one is called (imaginatively) valueline2. We should put it directly after the block that sets up the function for valueline.

The second block draws our new line;

svg.append("path")      // Add the valueline2 path.
        .attr("class", "line")
        .attr("d", valueline2(data));

Again, this is identical to the block that draws the first line, except this one is called valueline2. We should put it directly after the block that draws valueline.

After those three small changes, check out your new graph;

Hey! Two lines! Hmm.... Both being the same colour is a bit confusing. Good news. We can change the colour of the second line by inserting a line that adjusts it's stroke (colour) very simply.

So here's what our new drawing block looks like;

svg.append("path")      // Add the valueline2 path.
        .attr("class", "line")
        .style("stroke", "red")
        .attr("d", valueline2(data));

And as if by magic, here's our new graph;

Wow. Right about now, we're thinking ourselves pretty clever. But there's two places where we're not doing things right. We took a simple way, but we took some short cuts that might bite us in the posterior.

The first mistake we made was not ensuring that our variable “d.open” is being treated as a number or a string. We're fortunate in this case that it is, but this can't always be assumed. So, this is an easy fix and we just need to put the following (indicated line) in our code;

// Get the data
d3.tsv("data/data.tsv", function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
        d.open = +d.open;       //  <=== Add this line in!
    });

The second and potentially more fatal flaw is that nowhere in our code do we make allowance for our second set of data (the second line's values) exceeding our first lines values.

Now that might not sound too normal straight away, but consider this. What if when we made up our data earlier, some of the new data exceeded our maximum value in our original data? As a means of demonstration, here's what happens when our second line of data has values higher than the first lines;

Ahh.... We're not too clever now.

Good news though, we can fix it!

The problem comes about because when we set the domain for the y axis this is what we put in the code;

y.domain([0, d3.max(data, function(d) { return d.close; })]);

So that only considers d.close when establishing the domain. With d.open exceeding our domain, it just keeps drawing off the graph!

The good news is that 'Bill' has provided a solution for just this problem here; http://stackoverflow.com/questions/12732487/d3-js-dataset-array-w-multiple-y-axis-values

So all you need to replace the y.domain line with is this;

y.domain([0, d3.max(data, function(d) { return Math.max(d.close, d.open); })]);

It does much the same thing, but this time it returns the maximum of d.close and d.open (whichever is largest). Good work Bill.

If we put that code into the graph with the higher values for our second line we are now presented with this;

And it doesn't matter which of the two sets of data is largest, the graph will always adjust :-)

You will also have noticed that our y axis has auto adjusted again to cope. Clever eh?

The above description (and heaps of other stuff) is in the D3 Tips and Tricks document that can be accessed from the downloads page of d3noob.org.