Adding an Axis

We are going to add an axis to the scatter plot we have been drawing. It is not easy to read the chart unless we have something to reference. An axis is a great way to help readers understand data. Drawing an axis can be tedious because of how many factors can affect an axis.

An axis consists of a line, ticks, and labels. The ticks are the smaller lines sticking out of the main line. An axis looks simple, but it can be challenging to draw. Aside from positioning and sizing, we need to figure out how many labels should be added to an axis, and the ticks need to be evenly distributed. There’s a lot that we need to figure out for drawing an axis.

D3 axis

D3 comes with a solution for drawing an axis. There’s a package called D3 axis, which you can find here: https://github.com/d3/d3-axis

The D3 axis library comes with methods for drawing an axis. Unlike scales, these methods will draw the axis for you. All it needs is information about our data. It will figure out the rest. Let’s read the description of the axis library together.

The axis component renders human-readable reference marks for scales. This alleviates one of the more tedious tasks in visualizing data.

As the description says, this library was introduced for performing the task of drawing an axis. By default, the D3 axis library is bundled with the core. We do not need to do anything else to make it available to us. There are four functions we can use for drawing an axis. There are two functions for drawing a horizontal axis and another two functions for drawing a vertical axis. Let’s explore them in detail.

Horizontal axis