Axes

d3_axis.html ● d3.min.js ● data/fruit.csv

About

Axes are an essential tool for creators of data visualizations. D3 provides us with the axis component.

var axis = d3.axisLeft();

axisLeft() simply means, that the ticks should be on the left side of the axis. Furthermore, d3 also provides axisRight(), axisTop() and axisBottom() methods, which change the orientation of the ticks accordingly.

For our axis to map the correct value of the input domain to the correct output range, we can pass the same scale we used for our marks, e.g. bars.

axis.scale(myScale);

Axes can be attached either to SVGs or to groups via the call(axis) method.

d3.select("g").call(axis);

To place the axis where you want it to be, you can use transformations, as you will learn next.

Example

This is what we did to get this axis here:

let axisX = d3.axisBottom()

axisX.scale(scaleX)

svg.append("g").call(axisX)
.attr("transform","translate(0,150)")

Options

D3 provides some additional methods to manipulate your axes, eg.:

• axis.ticks(arguments...): Takes arguments that are used for the generation of ticks. In the simplest case, the argument would be the number of ticks to use.


• axis.tickValues(values): Takes an array of values to be used as tick values.

More about Axes

• Axes overview in the docs
  
• Axes Introduction