Source: https://d3js.org/d3-shape

Skip to content

Return to top

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.