The avatar for @d3
D3
Bring your data to life.
Public
d3-interpolate
Edited
Oct 24, 2023
5 stars
d3-interpolate
d3.interpolateNumberArraySmooth zoomingd3.interpolated3.interpolateBasis, d3.interpolateBasisClosedd3.piecewised3.interpolateDiscreted3.interpolateZoom
d3.quantize
d3.interpolateTransformCssd3.interpolateArray, d3.interpolateObjectd3.interpolateNumber, d3.interpolateRoundd3.interpolateDated3.interpolateString
Insert cell
Insert cell
{
const interpolator = d3.interpolate("0, 51", "49 — 100");
return d3.quantize(interpolator, 8);
}
Insert cell
Insert cell
colorInterpolator = d3.interpolate("red", "blue")
Insert cell
d3.quantize(colorInterpolator, 2)
Insert cell
Insert cell
d3.quantize(d3.interpolateRound(0, 1e3), 10)
Insert cell
d3.quantize(colorInterpolator, 10)
Insert cell
Insert cell
qz = d3.scaleQuantize()
.domain([0, 1000])
.range(d3.quantize(colorInterpolator, 3))
Insert cell
Insert cell
qz(334)
Insert cell
Insert cell
dateInterpolator = d3.interpolateDate(new Date("2001-01"), new Date("2019-07"))
Insert cell
d3.quantize(dateInterpolator, 6) // 🕷 the same Date object is returned 6 times
Insert cell
d3.quantize(t => new Date(dateInterpolator(t)), 6) // 👍 a copy was made for each value
Insert cell
arrayInterpolator = d3.interpolate([0, 0], [1, 100])
Insert cell
d3.quantize(arrayInterpolator, 6) // 🕷 the same array is returned 6 times
Insert cell
d3.quantize(t => Array.from(arrayInterpolator(t)), 6) // 👍 a copy was made for each value
Insert cell

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.
Learn more