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:
Or you can use it to render to a Canvas 2D context:
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.