Axis

Learn how to draw the x-axis and y-axis.

We'll cover the following

Before we start drawing charts, let’s explore the fundamental building block of the chart, the axis. An axis provides human readability to visualization. An axis uses scales, and each axis will need its own scale to work with.

D3.js provides the following four functions to draw the scales.

  • d3.axisBottom() creates a bottom horizontal axis.
  • d3.axisTop() creates a top horizontal axis.
  • d3.axisLeft() creates a left vertical axis.
  • d3.axisRight() creates a right vertical axis.

Let’s explore and draw the x-axis and y-axis below.

Draw x-axis

We are going to demonstrate the x-axis through an example. As we have discussed above, we use the d3.axisBottom() to draw the bottom horizontal axis. Let’s use it to draw the x-axis in the following code.

Get hands-on with 1200+ tech skills courses.