The Y-axis

We are going to draw the y-axis for our scatterplot. The y-axis will measure the temperature. The process is going to be similar to drawing the x-axis. You have the knowledge to tackle this task, so try to draw a y-axis as an exercise. Scroll down to the bottom to view the final solution and walkthrough. Good luck!

The solution

If you were able to draw a y-axis, congrats! If not, that is fine, too. We will work on the y-axis together.

Creating the axis function

First, we need to create the function that will draw the axis on our behalf. We will be using the axisLeft() function. This function will draw a vertical axis with the ticks and labels placed on the line’s left side. It is normal for these elements to be positioned on the left side for a scatter plot.

const yAxis = d3.axisLeft(yScale)

We are going to create the axis after creating the x-axis. We are defining a variable called yAxis. Its value is the d3.axisLeft() function with the yScale function passed in. We need to provide the scale to let D3 know how it should generate the axis as the scale provides information about our dataset.

Drawing the axis

The next step is to draw the axis. We will create a <g> element by calling the append() method on the ctr selection.