Public
Edited
Oct 24, 2023
8 stars
Also listed in…
d3-transition
Insert cell
Insert cell
Insert cell
{
replay;
const height = 500;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

const line = d3.line();

const paths = svg
.selectAll("path")
.data(d3.range(40).map(i => ({ exponent: 0.1 + (3 * i) / 40 })))
.join("path")
.attr("d", "M10,10l500,0")
.attr("stroke", "black")
.attr("stroke-width", "2");

paths
.transition()
.duration(5000)
.easeVarying(d => d3.easePolyIn.exponent(d.exponent))
.attr("d", "M10,490l500,0");

return svg.node();
}
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