d3.interpolateNumberArraySmooth zoomingd3.interpolated3.interpolateBasis, d3.interpolateBasisClosedd3.piecewised3.interpolateDiscreted3.interpolateZoomd3.quantized3.interpolateTransformCssd3.interpolateArray, d3.interpolateObjectd3.interpolateDated3.interpolateString
d3.interpolateNumber, d3.interpolateRound
{
const interpolator = d3.interpolateNumber(0, 100);
return interpolator(0.3);
}
{
const interpolator = d3.interpolate(0, 100);
return interpolator(0.3);
}
{
const interpolator = d3.interpolate({ value: 0 }, { value: 100 });
return interpolator(0.3);
}
{
const interpolator = d3.interpolate("A0-2000", "A100-1000");
return interpolator(0.3);
}
{
const round = d3.interpolateRound(0, width);
return round(Math.random());
}
{
const interpolator = d3.interpolateNumber(0, 1);
return [NaN, undefined, null, -1, 2, "0.5"].map(interpolator);
}
{
const interpolator = d3.interpolateRound(0, 1);
return [NaN, undefined, null, -1, 2, "0.5"].map(interpolator);
}
{
const interpolator = d3.interpolate(0, 30);
return interpolator(0.52); // 🌶 returns 15.600000000000001 instead of the exact value 15.6
}
{
const interpolator = d3.interpolateNumber(0, 30);
return +interpolator(0.52).toFixed(6); // 👍
}
{
const interpolator = d3.interpolate("opacity: 0", "opacity: 1");
return interpolator(0.0000001); // 🌶 returns 1e-7 in scientific notation
}
{
const interpolator = d3.interpolate("opacity: 1e-6", "opacity: 1"); // 👍 makes sure decimal notation is used
return interpolator(0.0000001);
}
d3.interpolateNumber(Infinity, Infinity)(0.5)
d3.interpolateNumber(NaN, NaN)(0.5)
d3.interpolateNumber(undefined, undefined)(0.5)
d3.interpolateNumber(5, null)(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.
