Axes
Now that we can make all these different shapes, let's use them to create something actually useful. One way we can do that is by using lines and text to create graph axes. It would be tedious though, so D3 makes our lives easier with axis generators. They take care of drawing a line, putting on some ticks, adding labels, evenly spacing them, and so on.
A D3 axis is just a combination of path generators configured for awesomeness. All we have to do for a simple linear axis is create a scale and tell the axis to use it.
Note
In D3, it's worth remembering that a scale is a function that maps an input range to an output domain, whereas an axis is merely a visual representation of a scale.
Also, because we will be using scales a lot from now on, let's do that Scott Murray exercise from Chapter 1, Getting Started with D3, ES2017, and Node.js, again: Input! Domain! Output! Range! Input! Domain! Output! Range!
Honestly, it really never gets old.
For a more customized axis, we might have to define...