d3.interpolateNumberArraySmooth zoomingd3.interpolated3.interpolateBasis, d3.interpolateBasisClosedd3.piecewised3.interpolateZoomd3.quantized3.interpolateTransformCssd3.interpolateArray, d3.interpolateObjectd3.interpolateNumber, d3.interpolateRoundd3.interpolateDated3.interpolateString
d3.interpolateDiscrete
ramp(t => d3.interpolateDiscrete(roma)(t))
ramp(t => d3.interpolateDiscrete(roma)(t), 10)
ramp(oleron)
grayish = d3.interpolate(oleron(0.4999), oleron(0.50001))(0.5)
{
const bag_of_things = ["String", 2, ["Array"], { name: "Object" }],
interpolator = d3.interpolateDiscrete(bag_of_things);
return interpolator(Math.random());
}
{
const colors = ["red", "blue", "green"],
interpolator = d3.interpolateDiscrete(colors),
random = d3.randomBates(3);
return interpolator(random());
}
interpolator = d3.interpolateDiscrete(["red", "blue", "green"])
interpolator(NaN)
interpolator(undefined)
[interpolator(-1), interpolator(2)] // clamping
interpolator("0.5") // casts a string as number
interpolator(null) // null is taken as 0
// https://observablehq.com/@mbostock/color-ramp
function ramp(color, n = 512) {
const canvas = DOM.canvas(n, 1);
const context = canvas.getContext("2d");
canvas.style.margin = "0 -14px";
canvas.style.width = "calc(100% + 28px)";
canvas.style.height = "40px";
canvas.style.imageRendering = "pixelated";
for (let i = 0; i < n; ++i) {
context.fillStyle = color(i / (n - 1));
context.fillRect(i, 0, 1, 1);
}
return canvas;
}
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.
