Build a bottom axis

More about scaleLinear()

In the previous lessons we talked a lot about the scaleLinear() function of d3.js.

You should perfectly understand the code below. If not, go back to the scale module of this course!

const xScale = d3.scaleLinear()
  .domain([0, 100])
  .range([0, 500]);

console.log(xScale(0))    // 0
console.log(xScale(100))  // 500

What I haven't mentioned yet is that the xScale function includes a few additional methods that are quite useful:

• xScale.range() returns the range of the scale, which is [0, 500] in this case.
• xScale.ticks(10) generates an array of approximately 10 evenly spaced values along the axis. This function is quite intelligent, producing nicely rounded numbers, which can be a lifesaver.
• xScale.domain() provides the input domain of the scale ([0, 100])

Example

xScale.ticks(2)  // [0, 50, 100]
xScale.ticks(5)  // [0, 20, 40, 60, 80]
xScale.ticks(9)  // [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
xScale.ticks(10) // [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]

See?

The .ticks() method doesn't always return the exact number of ticks you specify. Instead, it identifies the most suitable value close to your target to ensure your axis looks polished and visually appealing!

Let's draw!

Now that we know where the ticks are going to be, we just need to draw a long horizontal line, and a multitude of small ticks with their labels at those positions!

Here is a sandbox with a very minimal example. Take a bit of time to read the code carefully!