https://github.com/jamesleesaunders/d3-interpolate-curve

D3 Interpolate Curves
https://github.com/jamesleesaunders/d3-interpolate-curve

Last synced: 2 months ago
JSON representation

D3 Interpolate Curves

• Host: GitHub
• URL: https://github.com/jamesleesaunders/d3-interpolate-curve
• Owner: jamesleesaunders
• License: bsd-3-clause
• Created: 2019-07-14T16:52:11.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-04-06T23:59:45.000Z (9 months ago)
• Last Synced: 2024-10-11T22:09:46.645Z (3 months ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/d3-interpolate-curve
• Size: 1.41 MB
• Stars: 9
• Watchers: 2
• Forks: 1
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# d3-interpolate-curve

This module provides a select of methods for generating number value interpolators from D3 curve functions.

D3 has [d3-interpolate](https://github.com/d3/d3-interpolate) functions, for example \`d3.interpolateBasis()\`, for interpolating a series in numbers into a curve using the Basis interpolation algorithm.

D3 also has [d3-curve](https://github.com/d3/d3-shape#curves) functions, like \`d3.curveCardinal()\` and \`d3.curveMonotoneX()\`, which can be used to quickly generate SVG curve paths.

However, interpolate functions like \`d3.interpolateCardinal()\` and \`d3.interpolateMonotoneX()\` do not currently exist in D3, this limits us to to only be able to generate Cardinal and MonotoneX curves for SVG and not for things like X3D.

The [d3-interpolate-curve](https://github.com/jamesleesaunders/d3-interpolate-curve) plugin has been written to fill this gap to provide missing interpolation functions like \`d3.interpolateCardinal()\` and \`d3.interpolateMonotoneX()\` as well as \`d3.interpolateFromCurve()\`.

## Installing

If you use NPM, `npm install d3-interpolate-curve`. 

Otherwise, download the [latest release](https://github.com/jamesleesaunders/d3-interpolate-curve/releases/latest).

Alternativly in vanilla JS:

```html

var interpolate = d3.interpolateFromCurve([1,2,7,2], d3.curveMonotoneX, 0.00001, 100);

```

## API Reference

# d3.interpolateFromCurve(values, curve, epsilon, samples) · [Source](https://github.com/jamesleesaunders/d3-interpolate-curve/blob/master/src/fromCurve.js), [Examples](https://observablehq.com/@jamesleesaunders/d3-interpolate-curve)

Returns interpolator based on D3 curve function; d3.curveCardinal(), d3.curveLinear(), d3.curveMonotoneX() etc. 

```js

var interpolate = d3.interpolateFromCurve([1,2,7,2], d3.curveMonotoneX, 0.00001, 100);

```

# d3.interpolateCardinal(values) · [Source](https://github.com/jamesleesaunders/d3-interpolate-curve/blob/master/src/cardinal.js), [Examples](https://observablehq.com/@jamesleesaunders/d3-interpolate-curve)

Returns interpolator based on cubic Cardinal spline.

```js

var interpolate = d3.interpolateCardinal([1,2,7,2]);

```

# d3.interpolateCatmullRom(values) · [Source](https://github.com/jamesleesaunders/d3-interpolate-curve/blob/master/src/catmullRom.js), [Examples](https://observablehq.com/@jamesleesaunders/d3-interpolate-curve)

Returns interpolator based on a cubic Catmull–Rom spline.

```js

var interpolate = d3.interpolateCatmullRom([1,2,7,2]);

```

# d3.interpolateMonotoneX(values) · [Source](https://github.com/jamesleesaunders/d3-interpolate-curve/blob/master/src/monotoneX.js), [Examples](https://observablehq.com/@jamesleesaunders/d3-interpolate-curve)

Returns interpolator based on MonotoneX spline.

```js

var interpolate = d3.interpolateMonotoneX([1,2,7,2]);

```

## Options

- samples - Number of samples.

- epsilon - Coordinate precision.

## Credits

* Andreas Plesch - hugh credit for goes to Andreas who came up with the original concept for this module.

* Mike Bostock - for advice on converting SVG curves.