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: "Drawing our peripherals in React"
description: "We take a naive approach to creating an Axis component"
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/hyvq7zoqgg
codeFolder: course/module_07/lesson_07.07/code/end
---

# Drawing our peripherals

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

Next, we want to draw our axes. This is where even experienced d3.js and React.js developers get confused because both libraries want to handle creating new the DOM elements. Up until now, we've used `d3.axisBottom()` and `d3.axisLeft()` to append multiple `<line>` and `<text>` elements to a manually created `<g>`. element. But the core concept of React.js relies on giving it full control over the DOM.

Let's first make a naive attempt at an **Axis** component, mimicking the d3.js code we've written so far. Since our **Axis** component is already imported, we can create a new instance in our render method. We'll need to specify the `dimension` and relevant `scale` of both of our axes.

```javascript
<Axis
  dimension="x"
  scale={xScale}
/>
<Axis
  dimension="y"
  scale={yScale}
/>
```

A>Remember that SVG elements' z-indices are determined by their order in the DOM. If you want your line to overlap your axes, make sure to add the`<Axis>` components before the `<Line>` in your render method.

Let's head over to `src/Chart/Axis-naive.jsx` to flesh out our **Axis** component. There's not much going on here yet, just a basic React Component that accepts a dimension (either **x** or **y**), a scale, and a tick formatting function.

```javascript
const Axis = ({ dimension, scale, ...props }) => {
  return (
    <g {...props}
      className="Axis"
    />
  )
}
```

We take a naive approach to creating an Axis component