d3.interpolateNumberArraySmooth zoomingd3.interpolated3.interpolateBasis, d3.interpolateBasisClosedd3.interpolateDiscreted3.interpolateZoomd3.quantized3.interpolateTransformCssd3.interpolateArray, d3.interpolateObjectd3.interpolateNumber, d3.interpolateRoundd3.interpolateDated3.interpolateString
d3.piecewise
piecewiseColor = d3.piecewise(d3.interpolateHsl, ["red", "orange", "yellow", "lime", "green"])
ramp(piecewiseColor)
piecewiseColor(0.55)
piecewiseNumber = d3.piecewise(d3.interpolateRound, [0, 1, 10, 100, 1000])
d3.quantize(piecewiseNumber, 20)
piecewiseObject = d3.piecewise([
{ opacity: 0.1, r: 1, cx: 0, cy: 0, fill: "red" },
{ r: 10, opacity: 0.5, cx: 150, cy: 100, fill: "orange" },
{ r: 100, opacity: 1, cx: 120, cy: 110, fill: "yellow" },
{ r: 200, opacity: 0.1, cx: 300, cy: 50, fill: "lime" }
])
viewof t = Inputs.range([0, 1], { label: "parameter t" })
shape = piecewiseObject(t)
svg`<svg style="overflow: visible"><circle
r=${shape.r}
opacity=${shape.opacity}
cx=${shape.cx}
cy=${shape.cy}
fill="${shape.fill}"
>`
d3 = require("d3-interpolate@3")
import {ramp} from "@mbostock/color-ramp"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
