d3.interpolateNumberArray
d3.interpolateNumberArray([0, 1], [1, 3])(t)
d3.interpolateNumberArray([0, 1], Float64Array.of(1, 3))(t)
d3.interpolateNumberArray([0, 1], Float32Array.of(1, 3))(t)
d3.interpolateNumberArray([0, 0], Uint8ClampedArray.of(127, 255))(t)
d3.interpolateNumberArray([0, 0], Int32Array.of(1e7, 5e7))(t)
d3.interpolateNumberArray([0, 0], [1000, 1000, 1000, 1000])(t) // interpolates the two first values of b
d3.interpolateNumberArray(null, [1000, 1000, 1000, 1000])(t) // returns all values of b
a = Array.from({length: 100000}).fill(0)
b = Array.from({length: 100000}, Math.random)
generic = d3.interpolate(a, b) // slow 🐢
implicit = d3.interpolate(a, Float64Array.from(b)) // b is typed, fast 👍
explicit = d3.interpolateNumberArray(a, b) // fast 👍
{
replay;
const contexta = DOM.context2d(200, 200, 1);
const contextb = DOM.context2d(200, 200, 1);
const context = DOM.context2d(200, 200, 1);
contexta.fillStyle = "red";
contexta.fillRect(0, 0, 150, 150);
contextb.fillStyle = "green";
contextb.fillRect(50, 50, 150, 150);
const a = contexta.getImageData(0, 0, 200, 200);
const b = contextb.getImageData(0, 0, 200, 200);
const c = context.createImageData(200, 200);
const interpolator = d3.interpolateNumberArray(a.data, b.data);
for (let i = 0, n = 120; i < n; ++i) {
c.data.set(interpolator(i / (n - 1)));
context.putImageData(c, 0, 0);
yield context.canvas;
await visibility();
}
}
{
const a = Array.of(0, 0);
const b = Array.of(100, 100);
const i = d3.interpolateNumberArray(a, b);
b[1] = 0; // mutation! 🌶
return i(0.5);
}
{
const a = Array.of(0, 0);
const b = Array.of(100, 100);
const i = d3.interpolateNumberArray(a.slice(), b.slice()); // defensive copy 😇
b[1] = 0; // mutation! 🌶
return i(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.
