Step4- Adding Axes and text

Well I am just back from paternity leave so this is just a quick little blog to get my mind back up to speed

Introduction

We have quite a good looking chart now, but some axes would be good as we have no idea what bar relates to which day at the moment

script.js Y Variable

I’m just going to assume that you have already made a new copy of the previous tutorial and have the script.js open.
The first thing we need to do is add a y scale as this will be the basis of our y axis, obviously we already have the x scale as we used it to size our bars.

var y = d3.scale.ordinal()
    .domain(textarray) 
    .rangeBands([0,barHeight  * dataarray.length]);

There are a few things to note here; the first is that we are using a D3 ordinal scale and not a linear one as per the x axis.
Obviously this makes sense as our data is not a simple linear range in this case.

The second is that we are using our textarray as the domain, again this makes sense as we want the axis for our day labels.

Finally note that instead of converting the domain to a simple range as we did for the x, we are converting it to rangebands. This is because each point the scale is actually a ‘band’ which must cover the whole width of one of the bars and we need enough bands to cover all of the bars.
Remember the link from the previous tutorial:

d3: scales, and color.

script.js Axes Variables

Now we have a y variable we can set up the axis variables.
The code for this is very straightforward and requires little explanation

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");
 
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

script.js Appending the Axes

Finally we need to tell our chart object that it needs to use these axes.
This is done by adding the following code under the var chart declaration:

chart.append("g") 
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (_this.GetHeight() - padding.top - padding.bottom) + ")")
    .call(xAxis);	
 
chart.append("g") 
    .attr("class", "y axis")
    .call(yAxis);

As you can see, the code is pretty straight forward, the y axis especially.
The only slight complication of the x-axis is that we need to tell it what area to look for the “bottom”, using the transform function. As we know from our barHeight calculation, the total height of the area is the object height less the padding we put in. Once the system knows this is where to look then the xAxis orientation of bottom will work.

Hopefully now your chart looks something like this:

capture1

style.css Styling the Axes

The final thing to do is to update the style.css to add some hashes and also make the text visible.

This is all the code which can be added to the existing style.css within the existing style tags

.axis text {
	fill:black;
  font: 10px sans-serif;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

There is a great post on this here:
http://www.d3noob.org/2012/12/the-css-portion-of-d3-graph.html

All we have told the system to do is make the text black, prior to this the text was there but given how css works it would have been white as this is what we told the chart to use.

Then we’ve just told the system how to style the lines which is again very basic code.

You could take this a step further and do different things with the different axis by simply adding code for .x.axis path{} and or .y.axis path{} in the CSS.

You should now have quite a nice looking chart:
capture2

Supporting Files

04-adding-axes-and-text

Leave a Reply