Setting up axes in d3.js

The following post is a portion of the D3 Tips and Tricks document which it free to download from the main page.

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

So we come to our next piece of code;

var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);

var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);

I've included both the x and y axes because they carry out the formatting in very similar ways. And it's worth noting that this is not the point where the axes get drawn. That occurs later in the piece where the data.tsv file has been loaded as 'data'.

D3 has it's own axis component that aims to take the fuss out of setting up and displaying the axes. So it includes a number of configurable options.

Looking first at the x axis;

var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);

The axis function is called with d3.svg.axis() and then the scale is set using the x values that we setup in the scales, ranges and domains section using .scale(x). Then a curious thing happens, we tell the graph to orientate itself to the bottom of the graph .orient("bottom"). Now if I tell you that "bottom" is the default setting, then you could be forgiven for thinking that technically, we don't need to specify this since it will go there anyway, but it does give us an opportunity to change it to to “top” to see what happens;

Well, I hope you didn't see that coming, because I didn't. So, it would transpire that what we're talking about there is the orientation of the values and ticks about the axis line itself. Ahh... Ok. So, useful if your x axis is at the top of your graph, but for this one, not so useful.

All right, he next part (.ticks(5)) sets the number of ticks on the axis. Hopefully you just did a quick count across the bottom of the previous graph and went “Yep, five ticks. Spot on”. Well done if you did, but there's a little bit of a sneaky trick up D3's sleeve with the number of ticks on a graph axis.

For instance, here's what the graph looks like when the .ticks(5) value is changed to .ticks(4).

Eh? Hang on. Isn't that some kind of mistake? There's still five ticks. Yep sure is. But wait... we can keep dropping the ticks value till we get to two and it will still be the same. At .ticks(2) though, we finally see a change.

How about that? At first glance that just doesn't seem right, then you have a bit of a think about it and you go “Hmm... When there were 5 ticks, they were separated by a week each, and that stayed that way till we got to a point where it could show a separation of a month.”.

So, what's going on here is that D3 is making a command decision for you as to how your ticks should be best displayed. This is great for simple graphs and indeed for the vast majority of graphs. And like all things D3, if you really need to do something bespoke and fancy, it'll let you if you know enough.

The following is the list of time intervals that D3 will consider when setting automatic ticks on a time based axis;

• 1-, 5-, 15- and 30-second.
• 1-, 5-, 15- and 30-minute.
• 1-, 3-, 6- and 12-hour.
• 1- and 2-day.
• 1-week.
• 1- and 3-month.
• 1-year.

Just for giggles have a think about what value of ticks you will need to increase to until you get D3 to show more than five ticks.

Hopefully you won't sneak a glance at the following graph before you come up with the right answer.

Yikes! The answer is 10! And then when it does, the number of ticks is so great that they jumble all over each other. Not looking to good there. However, you could rotate the text (or perhaps slant it) and it could fit in (that must be the topic of a future how-to). You could also make the graph longer if you wanted, but of course that is probably going to create other layout problems. So think about your data and presentation as a single entity.

The code that formats the y axis is pretty similar;

var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);

We can change the orientation to "right" if we want, but it won't be winning any beauty prizes.

Nope. Not a pretty sight.

So what about the umber of ticks? Well this scale is quite different to the x axis. Formatting the dates using logical separators (weeks, months) was tricky, but with standard numbers, it should be a little easier. In fact, there's a better than even chance that you've already had a look at the y axis and seen that there are 6 ticks there already when the script is asking for 5 :-)

And without too much fussing around, we can lower the tick number to 4 and we get a logical result.

But we need to raise the count to 10 before we get more than 6.