d3-shape 3.2.0

The d3-shape is a JavaScript package providing visual representations of data by generating primitive shapes like lines, arcs, and areas used in data visualizations. It's a module in D3, a library for producing dynamic, interactive data visualizations. With d3-shape, complex shapes, such as rounded annular sectors and centripetal Catmull–Rom splines, can be formed. It maps your data to visual representations using shape generators, enabling you to create a variety of shapes for charts and diagrams with inputs from your data set.

To use d3-shape, it can be installed via npm using the command npm install d3-shape. After installation, the package can be imported into your project. Here is an example of creating a line generator with d3-shape:

import { line } from "d3-shape";

const l = line();

The line generator can be used to compute SVG path element attributes, or to render to a Canvas 2D context:

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

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

// Or

l.context(context)(data);

D3-shape can also be loaded directly in a browser using script tags:

<script src="https://cdn.jsdelivr.net/npm/d3-path@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-shape@3"></script>

The d3-shape package documentation can be found on the GitHub repository at https://github.com/d3/d3-shape. The readme file contains detailed instructions on installation and usage, with methods and properties listed under the API Reference section. It includes explanations and usage examples for different geometric shapes and advanced features like custom curves and symbol types. It also links to other related resources for further learning.