d3.interpolateNumberArraySmooth zoomingd3.interpolated3.interpolateBasis, d3.interpolateBasisClosedd3.piecewised3.interpolateDiscreted3.interpolateZoomd3.quantized3.interpolateArray, d3.interpolateObjectd3.interpolateNumber, d3.interpolateRoundd3.interpolateDated3.interpolateString
d3.interpolateTransformCss
{
const interpolator = d3.interpolateTransformCss(
"translateY(12px) scale(2)",
"translateX(30px) rotate(5deg)"
);
return interpolator(0.5);
}
{
const interpolator = d3.interpolateTransformCss(
"matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)",
"translate(3px,90px)"
);
return interpolator(0.5);
}
{
const interpolator = d3.interpolateTransformCss(
"translateY(12px) scale(2)",
"translateX(30px) rotate(5deg)"
);
return interpolator(0.5);
}
interpolatorCss = d3.interpolateTransformCss(
"scale(1)", // no transform
"skewX(60deg) translateX(800px)"
)
interpolatorCss(t)
<div style="transform: ${interpolatorCss(t)}">Hello, interpolate me!</div>
interpolatorSvg = d3.interpolateTransformSvg(
"skewX(-60)",
"skewX(60) translate(280,0)"
)
interpolatorSvg(t)
svg`<svg width=${width} height=60>
<g transform="${interpolatorSvg(t)}">
<text y=20>Hello, SVG property</text>
</g>
<style>.t { transform: ${interpolatorCss(t)} }</style>
<g class=t>
<text y=40>Hello, SVG2 CSS</text>
</g>
</svg>`
{
const interpolator = d3.interpolateString(
"translate(20, 40)",
"translate(30, 60)"
);
return interpolator(0.5);
}
d3 = require("d3-interpolate@2")
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.
