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:

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:

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

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

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.