Charts communicate ideas with simplicity, clarity, and detail.

Once you're comfortable with D3 you can quickly:

* understand key metrics at a glance
* catch anomalies (before they turn into problems)
* give key insights to your customers
* and impress your boss and co-workers

Today, I will show you the exact methods I use to create beautiful, understandable data visualizations using D3.

The Fullstack D3 masterclass is the complete guide to D3. With dozens of code examples showing each step, you will gain new insights into your data by creating visualizations in this self-paced online course.

Fullstack D3 Masterclass

---
title: "Step 6: Draw peripherals"
description: "Our sixth step: drawing peripherals. We draw our axes, learn about the text SVG element, and how to add (and rotate) labels."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/ouy6gicoel
codeFolder: course/module_01/lesson_01.07/protected/code/02-making-a-scatterplot/end
---

# Draw peripherals

<CodeSandboxEmbed
  src="//codesandbox.io/s/ygu8j?fontsize=14&hidenavigation=1&theme=dark&autoresize=1&module=/chart.js"
  style={{width: '100%', height: '35em'}}
/>

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

```javascript { actualFilename=./protected/code/02-making-a-scatterplot/completed/chart.js endChar=1868 endLine=79 startChar=1809 startLine=78 statedFilename=code/02-making-a-scatterplot/completed/chart.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-course-template/module_01/lesson_01.07/protected/code/02-making-a-scatterplot/completed/chart.js#L78 }
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.

```javascript { actualFilename=./protected/code/02-making-a-scatterplot/completed/chart.js endChar=2001 endLine=83 startChar=1870 startLine=81 statedFilename=code/02-making-a-scatterplot/completed/chart.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-course-template/module_01/lesson_01.07/protected/code/02-making-a-scatterplot/completed/chart.js#L81 }
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.

![Scatterplot with an x axis](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_01/lesson_01.07/public/images/2-making-a-scatterplot/x-axis.png)

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.

```javascript { actualFilename=./protected/code/02-making-a-scatterplot/completed/chart.js endChar=2236 endLine=90 startChar=2003 startLine=85 statedFilename=code/02-making-a-scatterplot/completed/chart.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-course-template/module_01/lesson_01.07/protected/code/02-making-a-scatterplot/completed/chart.js#L85 }
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 (&deg;F)")
```

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