Building shapes with d3
Some shapes can be quite complex—like rings, slices, paths, polygons, and curves. Manually creating the d attribute for these shapes (like in the previous lesson) would be a nightmare!
Fortunately, D3 provides a module called d3-shape specifically for handling all these shapes. Let's explore how it can simplify our work.
📐 Building the line you need
In the previous lesson we introduced the path element, and showed that a line chart is basically rendered this way:
<svg height="300" width="400">
<path
d="M0 105 L100 200 L200 200 L300 20 L350 120"
fill="none"
stroke="#69b3a2"
/>
</svg>Fortunately, D3 includes a module called d3-shape that offers helper functions for building shapes. These functions take your data and automatically generate the d attribute for a path!
d3-shape fixes the pain described in the path lesson.
Now, let's explore in depth how to use the d3.line() function to create the path for a line chart, step by step.
const data = [
{ x: 0, y: 40 },
{ x: 50, y: 70 },
{ x: 100, y: 150 },
...
];Everything begins with a data object, which is almost always an array.
Each item in the array represents a data point and is usually an object with properties.
For a line chart, you'll need at least two properties: one for the x-axis position and one for the y-axis position (x and y here).
Oh no! 😱
It seems like you haven't enrolled in the course yet!
Join many other students today and learn how to create bespoke, interactive graphs with d3.js and React!
Enrollment is currently closed. Join the waitlist to be notified when doors reopen:
Or Login