This video is available to students only

Step 6: Draw peripherals

Our sixth step: drawing peripherals. We draw our axes, learn about the text SVG element, and how to add (and rotate) labels.

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).

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.

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.

Scatterplot with an x axis

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.


This page is a preview of Fullstack D3 Masterclass

Please select a discussion on the left.