All about axes

Until now, we just scaled our dataset without drawing a single shape on the screen. For the next step, I want to introduce d3.svg.axis(), a built-in function to draw axes and labels. This function makes it very easy and comfortable to add an axis to a chart, as shown in the following code:

var axis = d3.svg.axis();

First, we create a new axis object with d3.svg.axis(), which we can then configure by calling different methods on it. I will now discuss the most important of these methods:

• axis.scale([scale]): This adds scaling to an axis as follows:

  var scale = d3.scale.linear()
    .domain([0, 10])
    .range([0, 100]);
  
  var axis = d3.svg.axis()
    .scale(scale);

• axis.orient([orientation]): This specifies an orientation of the ticks values relative to the axis. The orientation can be top, bottom, left, or right:

  var axis = d3.svg.axis()
    .orient('bottom');

• axis.ticks([arguments…]): This specifies the tick number or interval relative to the given scale, as shown in the following code...