This chapter covers
- Adding axes to a chart and applying the margin convention
- Drawing a line chart with the line generator function
- Interpolating data points to turn lines into curves
- Drawing an area with the area generator
- Using the arc generator to create arcs
You’re already familiar with the common SVG shapes that we use and combine to make data visualizations: lines, rectangles, and circles. You’ve even created a bar chart from scratch using rectangles. But there’s only so much we can draw with primitive shapes. To create more complex visualizations, we generally turn to SVG paths. As we’ve discussed in chapter 1, SVG paths are the most flexible of all SVG elements and can take pretty much any form. We use them extensively in D3 projects; the simplest examples are drawing the lines and curves in line charts or creating the arcs in donut charts.
The shape of an SVG path is determined by its d attribute. This attribute is composed of commands dictating the starting point and endpoint of the path, the type of curves it uses to change direction, and whether the path is open or closed. The d attribute of a path can quickly become long and complex. Most times, we don’t want to have to write it ourselves. This is when D3’s shape generators come in handy!