D3 is a great library to create web visualizations because it includes a lot of useful abstractions when working with SVG elements. In this section, we will look at some of these SVG abstractions to draw shapes. These abstractions for drawing shapes are called generators in D3; we will mainly use the line-, area-, and arc-generators when creating visualizations.
All SVG shape abstractions can be found in the D3 Github page at https://github.com/mbostock/d3/wiki/API-Reference#d3svg-svg.
If you've ever used the SVG
path element and the
d attribute to create custom shapes or Bézier curves, you already know that this is not as easy as it should be. Those who have never used the SVG
only need to know that you would have to learn a special syntax to define and concatenate control points for a Bézier curve.
You can find more information about the
d attribute on MDN at https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d.