O'Reilly logo

Data Visualization with D3 and AngularJS by Christoph Körner

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required