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, take two"
description: "We learn an alternate, less hacky solution for creating an Axis component that lets React do all of the rendering."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/e3rzbdjt1z
codeFolder: course/module_07/lesson_07.08/code/end
---

# Drawing our peripherals, take two

Now that we've shown how easy it is to plug basic d3 code into React, let's talk about **why it's not a good idea**.

React uses a fancy reconciliation algorithm to decide which DOM elements to update. It does this by creating a virtual DOM and diffing against the real DOM. **When we mutate the DOM outside of React render methods, we're removing the performance benefits we get and will unnecessarily re-render elements.**

Short-cutting around React render methods also makes our code less declarative. Usually, you can depend on the resulting DOM to closely align to any JSX you see in a component's render method. When you come back to a component you wrote a few months ago, you'll thank yourself for making the output obvious.

In a pinch, using React to create a wrapper element to modify with d3 (like we just did) will do. You might need to do this for special cases, like animating an arc. But try to lean towards solely creating elements with React and using d3 as more of a utility library. This will keep your app speedy and less "hacky".

Even without its DOM modifying methods, d3 is a very powerful library. In fact, we created most of our timeline without needing to re-create a d3 generator function. For example, creating a `d` string for our **Line** component would have been tricky without `d3.line()`.

But how does this look in practice? Let's re-create our **Axis** component without using any axis generators.

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

Switch your Axis import in `src/Timeline.jsx` to use the `Axis` file.

```javascript
import Axis from "./Chart/Axis"
```

When we open up `src/Chart/Axis.jsx`, we should see three basic React components.

Similar to how `d3.axisBottom()` and `d3.axisLeft()` are different methods, we want to split out `x` and `y` axes into different components. This will keep our code clean and prevent too many ternary statements.

The first component is a directory component that grabs the chart dimensions and renders the appropriate `Axis`, based on the `dimension` prop.

```javascript
const axisComponentsByDimension = {
  x: AxisHorizontal,
  y: AxisVertical,
}
const Axis = ({ dimension, ...props }) => {
  const dimensions = useDimensionsContext()
  const Component = axisComponentsByDimension[dimension]
  if (!Component) return null

  return (
    <Component {...props}
      dimensions={dimensions}
    />
  )
}
```

The other two components, `AxisHorizontal` and `AxisVertical`, are specific `Axis` implementations. Let's start by fleshing out `AxisHorizontal`.

```javascript
function AxisHorizontal (
  { dimensions, label, formatTick, scale, ...props }
) {
  return (
    <g className="Axis AxisHorizontal" {...props}>
    </g>
  )
}
```

Since we're not using a d3 axis generator, we'll need to generate the ticks ourselves. Fortunately, many of the methods d3 uses internally are also available for external use. d3 scales have a `.ticks()` method that will create an array with evenly spaced values in the scale's domain.

We can see this in action if we `console.log(scale.ticks())`.

![scale.ticks()](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_07/lesson_07.08/public/images/13-using-d3-with-react-js/react-ticks.png)

By default, `.ticks()` will aim for ten ticks, but we can pass a specific count to target. Note that `.ticks()` will _aim for_ the count, but also tries to create ticks with meaningful intervals: a week in this example.

The number of ticks we want will depend on the chart width, though — ten ticks will likely crowd our x axis. Let's aim for one tick per 100 pixels for small screens and one tick per 250 pixels for wider screens.

We learn an alternate, less hacky solution for creating an Axis component that lets React do all of the rendering.