This video is available to students only

Drawing our data in React

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

Drawing our data#

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.

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

Line element

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.

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.

 

This page is a preview of Fullstack D3 Masterclass

No discussions yet