d3-shape

What is d3-shape?

The d3-shape npm package is a JavaScript library that provides tools for creating graphical shapes—such as lines, areas, curves, pies, and more—designed to work with D3.js, a powerful tool for creating data visualizations. It is commonly used to generate SVG path data based on numerical data input.

What are d3-shape's main functionalities?

Line Shapes

Generates a line shape from an array of points. The 'line' function creates a line generator, and the 'pathData' is the SVG path data string.

const line = d3.line().x(d => d.x).y(d => d.y);
const pathData = line([{x: 0, y: 0}, {x: 10, y: 10}]);

Area Shapes

Creates an area shape, defined by a baseline and a topline. The 'area' function creates an area generator, which is used to generate the SVG path data for the area shape.

const area = d3.area().x(d => d.x).y0(height).y1(d => d.y);
const pathData = area([{x: 0, y: 0}, {x: 10, y: 10}]);

Pie and Arc Shapes

Generates pie and arc shapes for creating pie charts. The 'pie' function computes the necessary angles for the pie slices, and the 'arc' function generates the SVG path data for each slice.

const pie = d3.pie().value(d => d.value);
const arc = d3.arc().innerRadius(0).outerRadius(radius);
const pieData = pie([{value: 10}, {value: 20}]);
const arcData = pieData.map(d => arc(d));

Custom Curves

Allows the creation of lines and areas with custom curves. The 'curve' method specifies the type of curve to use, with 'curveBasis' being one of the many available options.

const line = d3.line().curve(d3.curveBasis);
const pathData = line([{x: 0, y: 0}, {x: 10, y: 10}]);

Other packages similar to d3-shape

paths-js

Paths-js is a library that can generate SVG paths for various shapes. It is similar to d3-shape but offers a more functional approach and is not tied to D3.js.

two.js

Two.js is a renderer-agnostic two-dimensional drawing library that can draw to SVG, Canvas, and WebGL. It provides similar shape generation capabilities to d3-shape but focuses on a wider range of rendering contexts.

raphael

Raphael is a library for working with vector graphics on the web. It provides similar features for drawing shapes and paths but is designed to work across a wide array of browsers, including older versions.

README

d3-shape

…

Installing

If you use NPM, npm install d3-shape. Otherwise, download the latest release.

API Reference

…

Changes from D3 3.x:

• The behavior of Cardinal interpolation tension has been fixed. The default tension is now 0 (corresponding to a uniform Catmull–Rom spline), not 0.7; the new value of 0 is equivalent to an old value of 2 / 3, so the default behavior is only slightly changed.

• To specify a Cardinal interpolation tension of t, use line.interpolate("cardinal", t) instead of line.interpolate("cardinal").tension(t).