Skip to content

Latest commit

 

History

History
86 lines (73 loc) · 4.04 KB

curves.md

File metadata and controls

86 lines (73 loc) · 4.04 KB
<script setup> import * as Plot from "@observablehq/plot"; import * as d3 from "d3"; import {ref} from "vue"; const curve = ref("catmull-rom"); const numbers = d3.range(20).map(d3.randomLcg(42)); </script>

Curves

A curve defines how to turn a discrete representation of a line as a sequence of points [[x₀, y₀], [x₁, y₁], [x₂, y₂], …] into a continuous path; i.e., how to interpolate between points. Curves are used by the line, area, and link marks, and are implemented by d3-shape.

Curve: basis basis-open basis-closed bump-x bump-y bundle cardinal cardinal-open cardinal-closed catmull-rom catmull-rom-open catmull-rom-closed linear linear-closed monotone-x monotone-y natural step step-after step-before

:::plot https://observablehq.com/@observablehq/plot-curve-option

Plot.plot({
  marks: [
    Plot.lineY(numbers, {curve: "{{curve}}"}),
    Plot.dotY(numbers, {x: (d, i) => i})
  ]
})

:::

The supported curve options are:

  • curve - the curve method, either a string or a function
  • tension - the curve tension (for fine-tuning)

The following named curve methods are supported:

  • basis - a cubic basis spline (repeating the end points)
  • basis-open - an open cubic basis spline
  • basis-closed - a closed cubic basis spline
  • bump-x - a Bézier curve with horizontal tangents
  • bump-y - a Bézier curve with vertical tangents
  • bundle - a straightened cubic basis spline (suitable for lines only, not areas)
  • cardinal - a cubic cardinal spline (with one-sided differences at the ends)
  • cardinal-open - an open cubic cardinal spline
  • cardinal-closed - an closed cubic cardinal spline
  • catmull-rom - a cubic Catmull–Rom spline (with one-sided differences at the ends)
  • catmull-rom-open - an open cubic Catmull–Rom spline
  • catmull-rom-closed - a closed cubic Catmull–Rom spline
  • linear - a piecewise linear curve (i.e., straight line segments)
  • linear-closed - a closed piecewise linear curve (i.e., straight line segments)
  • monotone-x - a cubic spline that preserves monotonicity in x
  • monotone-y - a cubic spline that preserves monotonicity in y
  • natural - a natural cubic spline
  • step - a piecewise constant function where y changes at the midpoint of x
  • step-after - a piecewise constant function where y changes after x
  • step-before - a piecewise constant function where x changes after y
  • auto - like linear, but use the (possibly spherical) projection, if any

If curve is a function, it will be invoked with a given context in the same fashion as a D3 curve factory. The auto curve is only available for the line mark and link mark and is typically used in conjunction with a spherical projection to interpolate along geodesics.

The tension option only has an effect on bundle, cardinal and Catmull–Rom splines (bundle, cardinal, cardinal-open, cardinal-closed, catmull-rom, catmull-rom-open, and catmull-rom-closed). For bundle splines, it corresponds to beta; for cardinal splines, tension; for Catmull–Rom splines, alpha.