Draw peripherals#

Let's finish up our chart by drawing our axes, starting with the x axis.

We want our x axis to be:

• a line across the bottom

• with spaced "tick" marks that have...

• labels for values per tick

• a label for the axis overall

To do this, we'll create our axis generator using d3.axisBottom(), then pass it:

• our x scale so it knows what ticks to make (from the domain) and

• what size to be (from the range).

const xAxisGenerator = d3.axisBottom()

  .scale(xScale)

Next, we'll use our xAxisGenerator() and call it on a new g element. Remember, we need to translate the x axis to move it to the bottom of the chart bounds.

const xAxis = bounds.append("g")

  .call(xAxisGenerator)

    .style("transform", `translateY(${dimensions.boundedHeight}px)`)

When we render our webpage, we should see our scatter plot with an x axis. As a bonus, we can see how using .nice() on our scale ensures that our axis ends in round values.

Let's expand on our knowledge and create labels for our axes. Drawing text in an SVG is fairly straightforward - we need a <text> element, which can be positioned with an x and a y attribute. We'll want to position it horizontally centered and slightly above the bottom of the chart.

<text> elements will display their children as text — we can set that with our selection's .html() method.

const xAxisLabel = xAxis.append("text")

    .attr("x", dimensions.boundedWidth / 2)

    .attr("y", dimensions.margin.bottom - 10)

    .attr("fill", "black")

    .style("font-size", "1.4em")

    .html("Dew point (°F)")