# 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.