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 data in React"
description: "Next, we fill out our Line component for a flexible way to draw our data."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/d3d9cm6kxd
codeFolder: course/module_07/lesson_07.06/code/end
---

# Drawing our data

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

We already imported our `Line` component from our chart library. Let's render one instance inside of our `Chart`, passing it our data and scaled accessor functions.

```javascript
<Line
  data={data}
  xAccessor={xAccessorScaled}
  yAccessor={yAccessorScaled}
/>
```

If we inspect our webpage in the **Elements** panel, we can see a new `<path>` element.

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

Let's see what's going on in `src/Chart/Line.jsx`.

We have a basic element that renders a `<path>` element with a class name.

```javascript
const Line = ({ type, data, xAccessor, yAccessor, y0Accessor, interpolation, ...props }) => {
  return (
    <path {...props}
      className={`Line Line--type-${type}`}
    />
  )
}
```

`Line` accepts `data` and accessor props, along with a `type` string. A `Line` can have a `type` of `"line"` or `"area"` — it makes more sense to combine these two types of elements because they are more similar than they are different. There is one more prop (`interpolation`), which we'll get back to later.

Next, we fill out our Line component for a flexible way to draw our data.