The avatar for @d3
D3
Bring your data to life.
Public
d3-interpolate
Edited
Oct 23, 2023
3 forks
22 stars
d3-interpolate
d3.interpolateNumberArraySmooth zooming
d3.interpolate
d3.interpolateBasis, d3.interpolateBasisClosedd3.piecewised3.interpolateDiscreted3.interpolateZoomd3.quantized3.interpolateTransformCssd3.interpolateArray, d3.interpolateObjectd3.interpolateNumber, d3.interpolateRoundd3.interpolateDated3.interpolateString
Insert cell
Insert cell
color = d3.interpolate("rgb(108,99,255)", "red")
Insert cell
color(0)
Insert cell
color(1) // "red" equivalent in the rgb() or rgba() syntax
Insert cell
color(0.5) // representation of an intermediate color, half-way between the start and end values
Insert cell
Insert cell
ramp(color)
Insert cell
Insert cell
d3.interpolate(0, 100)(0.3)
Insert cell
Insert cell
transform = d3.interpolate(
"translate(0,0) rotate(0)",
"translate(950,10) rotate(90)"
)
Insert cell
transform(0)
Insert cell
transform(t)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d3.interpolate([1.78, 3.33, 2.1], [1.64, 1.2, 0])(t)
Insert cell
d3.interpolate(
{
model: "A98",
price: 99.9,
dimensions: [1.78, 3.33, 2.1],
shoes: { size: 9 }
},
{
model: "F242",
price: 299.9,
dimensions: [1.64, 1.2, 0],
shoes: { size: 11.5 }
}
)(t)
Insert cell
Insert cell
Insert cell
d3.interpolate("red", 10)(0.5)
Insert cell
Insert cell
d3.interpolate(10, "red")(0.5)
Insert cell
Insert cell
d3.interpolateRgb("red", 10)(0.5)
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require("d3-interpolate@2")
Insert cell
import {ramp} from "@mbostock/color-ramp"
Insert cell

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.
Learn more