d3.interpolateNumberArraySmooth zoomingd3.interpolated3.interpolateBasis, d3.interpolateBasisClosedd3.piecewised3.interpolateDiscreted3.interpolateZoomd3.quantized3.interpolateTransformCssd3.interpolateArray, d3.interpolateObjectd3.interpolateNumber, d3.interpolateRoundd3.interpolateDate
d3.interpolateString
{
const interpolator = d3.interpolateString("0", "B 100");
return [interpolator(0), interpolator(0.52), interpolator(1)];
}
{
const interpolator = d3.interpolateString("29.99", "0.00");
return interpolator(0.5);
}
{
const interpolator = d3.interpolateString(
"translate(10, 500)",
"translate(400, 10)"
);
return interpolator(0.5);
}
{
const interpolator = d3.interpolateString("A -1 -2 -3", "B 1 2 3 4");
return interpolator(0.5);
}
a = d3.line()(
Array.from({ length: 90 }, (_, i) => [i * 10, (90 * Math.random()) | 0])
)
b = d3.line()(
Array.from({ length: 90 }, (_, i) => [i * 10, (200 - 90 * Math.random()) | 0])
)
interpolator = d3.interpolateString(a, b)
c = interpolator(t)
svg`<svg width=${width} viewBox="-10 -10 910 210" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="${interpolator(0)}" stroke="#ddd" />
<path d="${interpolator(0.5)}" stroke="#aaa" />
<path d="${interpolator(1)}" stroke="#ddd" />
<path d="${interpolator(t)}" stroke="black" stroke-width="3" />
</svg>`
d3.interpolateString("1e6", "1e12")(0.5) // "1e12" is one number, not 2! 🌶
d3.interpolateString("Page 27", "Some book reference, p.32")(0.5) // A dot means… a decimal number 🌶
d3.interpolate(
{ title: "2001: A Space Odyssey", date: new Date("1968"), gross: 190e6 },
{ title: "Ocean’s 8", date: new Date("2018"), gross: 297e6 }
)(0.5)
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.
