d3.curveBasis - a cubic basis spline, repeating the end points
d3.curveBasis is a curve interpolator that creates a cubic basis spline and repeats the end points.
d3-shape/curve
50 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
d3.curveBasisClosed - a closed cubic basis spline
d3.curveBasisClosed is a curve interpolator that creates a closed cubic basis spline.
d3.curveBasisOpen - a cubic basis spline
d3.curveBasisOpen is a curve interpolator that creates a cubic basis spline.
d3.curveBundle - a straightened cubic basis spline
d3.curveBundle is a curve interpolator that creates a straightened cubic basis spline.
bundle.beta - set the bundle tension beta
The bundle.beta method sets the bundle tension parameter (beta) for the curveBundle interpolator.
d3.curveBumpX - a cubic Bézier spline with horizontal tangents
d3.curveBumpX is a curve interpolator that creates a cubic Bézier spline with horizontal tangents.
d3.curveBumpY - a cubic Bézier spline with vertical tangents
d3.curveBumpY is a curve interpolator that creates a cubic Bézier spline with vertical tangents.
d3.curveCardinal - a cubic cardinal spline, with one-sided difference at each end
d3.curveCardinal is a curve interpolator that creates a cubic cardinal spline with one-sided difference at each end.
d3.curveCardinalOpen - a cubic cardinal spline
d3.curveCardinalOpen is a curve interpolator that creates a cubic cardinal spline.
cardinal.tension - set the cardinal spline tension
The cardinal.tension method sets the tension parameter for the curveCardinal interpolator.
d3.curveCatmullRom - a cubic Catmull–Rom spline, with one-sided difference at each end
d3.curveCatmullRom is a curve interpolator that creates a cubic Catmull–Rom spline with one-sided difference at each end.
d3.curveCatmullRomOpen - a cubic Catmull–Rom spline
d3.curveCatmullRomOpen is a curve interpolator that creates a cubic Catmull–Rom spline.
catmullRom.alpha - set the Catmull–Rom parameter alpha
The catmullRom.alpha method sets the alpha parameter for the curveCatmullRom interpolator.
d3.curveLinear - a polyline
d3.curveLinear is a curve interpolator that creates a polyline.
d3.curveLinearClosed - a closed polyline
d3.curveLinearClosed is a curve interpolator that creates a closed polyline.
d3.curveMonotoneY - a cubic spline that preserves monotonicity in x given monotonicity in y
d3.curveMonotoneY is a curve interpolator that creates a cubic spline preserving monotonicity in x when given monotonicity in y.
d3.curveNatural - a natural cubic spline
d3.curveNatural is a curve interpolator that creates a natural cubic spline.
d3.curveStep - a piecewise constant function
d3.curveStep is a curve interpolator that creates a piecewise constant function.
d3.curveStepAfter - a piecewise constant function
d3.curveStepAfter is a curve interpolator that creates a piecewise constant function with steps after each point.
d3.curveStepBefore - a piecewise constant function
d3.curveStepBefore is a curve interpolator that creates a piecewise constant function with steps before each point.
curve.areaStart - start a new area segment
The curve.areaStart method starts a new area segment on a curve.
curve.areaEnd - end the current area segment
The curve.areaEnd method ends the current area segment on a curve.
curve.lineStart - start a new line segment
The curve.lineStart method starts a new line segment on a curve.
curve.lineEnd - end the current line segment
The curve.lineEnd method ends the current line segment on a curve.
curve.point - add a point to the current line segment
The curve.point method adds a point to the current line segment on a curve.
curveBasis
curveBasis(context) produces a cubic basis spline using the specified control points. The first and last points are triplicated such that the spline starts at the first point and ends at the last point, and is tangent to the line between the first and second points, and to the line between the penultimate and last points.
curveBasisClosed
curveBasisClosed(context) produces a closed cubic basis spline using the specified control points. When a line segment ends, the first three control points are repeated, producing a closed loop with C2 continuity.
curveBasisOpen
curveBasisOpen(context) produces a cubic basis spline using the specified control points. Unlike curveBasis, the first and last points are not repeated, and thus the curve typically does not intersect these points.
curveBumpX
curveBumpX(context) produces a Bézier curve between each pair of points, with horizontal tangents at each point.
curveBumpY
curveBumpY(context) produces a Bézier curve between each pair of points, with vertical tangents at each point.
curveBundle with beta parameter
curveBundle(context) produces a straightened cubic basis spline using the specified control points, with the spline straightened according to the curve's beta parameter, which defaults to 0.85. curveBundle.beta(beta) returns a bundle curve with the specified beta in the range [0, 1], representing the bundle strength. If beta equals zero, a straight line between the first and last point is produced; if beta equals one, a standard basis spline is produced. This curve does not implement curve.areaStart() and curve.areaEnd(); it is intended to work with d3.line, not d3.area.
curveCardinal with tension parameter
curveCardinal(context) produces a cubic cardinal spline using the specified control points, with one-sided differences used for the first and last piece. The default tension is 0. curveCardinal.tension(tension) returns a cardinal curve with the specified tension in the range [0, 1]. The tension determines the length of the tangents: a tension of one yields all zero tangents, equivalent to curveLinear; a tension of zero produces a uniform Catmull–Rom spline.
curveCardinalClosed
curveCardinalClosed(context) produces a closed cubic cardinal spline using the specified control points. When a line segment ends, the first three control points are repeated, producing a closed loop. The default tension is 0.
curveCardinalOpen
curveCardinalOpen(context) produces a cubic cardinal spline using the specified control points. Unlike curveCardinal, one-sided differences are not used for the first and last piece, and thus the curve starts at the second point and ends at the penultimate point. The default tension is 0.
curveCatmullRom with alpha parameter
curveCatmullRom(context) produces a cubic Catmull–Rom spline using the specified control points and the parameter alpha, which defaults to 0.5, with one-sided differences used for the first and last piece. curveCatmullRom.alpha(alpha) returns a cubic Catmull–Rom curve with the specified alpha in the range [0, 1]. If alpha is zero, produces a uniform spline, equivalent to curveCardinal with a tension of zero; if alpha is one, produces a chordal spline; if alpha is 0.5, produces a centripetal spline. Centripetal splines are recommended to avoid self-intersections and overshoot.
curveCatmullRomClosed
curveCatmullRomClosed(context) produces a closed cubic Catmull–Rom spline using the specified control points and the parameter alpha, which defaults to 0.5. When a line segment ends, the first three control points are repeated, producing a closed loop.
curveCatmullRomOpen
curveCatmullRomOpen(context) produces a cubic Catmull–Rom spline using the specified control points and the parameter alpha, which defaults to 0.5. Unlike curveCatmullRom, one-sided differences are not used for the first and last piece, and thus the curve starts at the second point and ends at the penultimate point.
curveLinear
curveLinear(context) produces a polyline through the specified points.
curveLinearClosed
curveLinearClosed(context) produces a closed polyline through the specified points by repeating the first point when the line segment ends.
curveMonotoneY
curveMonotoneY(context) produces a cubic spline that preserves monotonicity in x, assuming monotonicity in y. This produces a smooth curve with continuous first-order derivatives that passes through any given set of data points without spurious oscillations. Local extrema can occur only at grid points where they are given by the data, but not in between two adjacent grid points.
curveNatural
curveNatural(context) produces a natural cubic spline with the second derivative of the spline set to zero at the endpoints.
curveStep
curveStep(context) produces a piecewise constant function (a step function) consisting of alternating horizontal and vertical lines. The y-value changes at the midpoint of each pair of adjacent x-values.
curveStepAfter
curveStepAfter(context) produces a piecewise constant function (a step function) consisting of alternating horizontal and vertical lines. The y-value changes after the x-value.
curveStepBefore
curveStepBefore(context) produces a piecewise constant function (a step function) consisting of alternating horizontal and vertical lines. The y-value changes before the x-value.
Custom curve interface
Curves implement the following interface: curve.areaStart() indicates the start of a new area segment; curve.areaEnd() indicates the end of the current area segment; curve.lineStart() indicates the start of a new line segment; curve.lineEnd() indicates the end of the current line segment; curve.point(x, y) indicates a new point in the current line segment with the given x- and y-values. Each area segment consists of exactly two line segments: the topline, followed by the baseline, with the baseline points in reverse order.
Curves purpose and usage
Curves turn a discrete (pointwise) representation of a line or area into a continuous shape by specifying how to interpolate between two-dimensional [x, y] points. Curves are typically not constructed or used directly. Instead, one of the built-in curves is passed to line.curve() or area.curve().
Line curve example
const line = d3.line() .x((d) => x(d.date)) .y((d) => y(d.value)) .curve(d3.curveCatmullRom.alpha(0.5));
curveCardinal.tension example
const line = d3.line().curve(d3.curveCardinal.tension(0.5));
curveBundle.beta example
const line = d3.line().curve(d3.curveBundle.beta(0.5));
curveCatmullRom.alpha example
const line = d3.line().curve(d3.curveCatmullRom.alpha(0.5));