Drawing shapes with D3

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.

Note

All SVG shape abstractions can be found in the D3 Github page at https://github.com/mbostock/d3/wiki/API-Reference#d3svg-svg.

Drawing Lines and Curves

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 path element only need to know that you would have to learn a special syntax to define and concatenate control points for a Bézier curve.

Note

You can find more information about the d attribute on MDN at https://developer.mozilla.org/en-US/docs/Web/SVG...