D3

d3-shape ​

Visualizations can be represented by discrete graphical marks such as symbols, arcs, lines, and areas. While the rectangles of a bar chart may sometimes be simple, other shapes are complex, such as rounded annular sectors and Catmull–Rom splines. The d3-shape module provides a variety of shape generators for your convenience.

As with other aspects of D3, these shapes are driven by data: each shape generator exposes accessors that control how the input data are mapped to a visual representation. For example, you might define a line generator for a time series by scaling fields of your data to fit the chart:

js
const line = d3.line()
    .x((d) => x(d.date))
    .y((d) => y(d.value));

This line generator can then be used to compute the d attribute of an SVG path element:

js
path.datum(data).attr("d", line);

Or you can use it to render to a Canvas 2D context:

js
line.context(context)(data);

See one of:

  • Arcs - circular or annular sectors, as in a pie or donut chart.
  • Areas - an area defined by a bounding topline and baseline, as in an area chart.
  • Curves - interpolate between points to produce a continuous shape.
  • Lines - a spline or polyline, as in a line chart.
  • Links - a smooth cubic Bézier curve from a source to a target.
  • Pies - compute angles for a pie or donut chart.
  • Stacks - stack adjacent shapes, as in a stacked bar chart.
  • Symbols - a categorical shape encoding, as in a scatterplot.
  • Radial areas - like area, but in polar coordinates.
  • Radial lines - like line, but in polar coordinates.
  • Radial links - like link, but in polar coordinates.