d3.interpolateNumberArraySmooth zoomingd3.interpolated3.interpolateBasis, d3.interpolateBasisClosedd3.piecewised3.interpolateDiscreted3.interpolateZoomd3.quantized3.interpolateTransformCssd3.interpolateNumber, d3.interpolateRoundd3.interpolateDated3.interpolateString
d3.interpolateArray, d3.interpolateObject
{
const interpolator = d3.interpolate(
[0, "0.5 mile", [12]],
[10, "28 miles", [36]]
);
return interpolator(0.5);
}
{
const interpolator = d3.interpolate(
{ time: 0, distance: "0.5 mile", details: { cost: 12 } },
{ time: 10, distance: "28 miles", details: { cost: 36 } }
);
return interpolator(0.5);
}
{
const interpolator = d3.interpolate(
{ time: 0, details: { precision: 0 } }, // 👍 only time and details.precision will be interpolated
{
time: 10,
distance: "28 miles",
details: { cost: 36, precision: "3 feet" }
}
);
return interpolator(0.5);
}
{
const interpolator = d3.interpolate([0, 0], [1, -1]);
const a = interpolator(0), // 🌶 a and b are the same array, their values are shared (1,-1)
b = interpolator(1),
c = Array.from(interpolator(0)), // 👍 c is a copy of the returned array (0,0), will not be mutated
d = Array.from(interpolator(1));
return { a, b, c, d };
}
{
const interpolator = d3.interpolate({ a: 0 }, { a: 1 });
const a = interpolator(0), // 🌶 a and b are the same object, so their values are shared {a: 1}
b = interpolator(1),
c = Object.assign({}, interpolator(0)), // 👍 c is a shallow copy of the returned object, will not be mutated
d = Object.assign({}, interpolator(1));
return { a, b, c, d };
}
d3 = require("d3-interpolate@3")
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.
