{
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, 900, 200])
.attr("width", 900);
const x = d3.scaleLinear([0, 1000], [10, 800]);
const axis = svg
.append("g")
.call(d3.axisBottom(x))
.attr("transform", "translate(0, 180)");
const ticksToAnimate = x.ticks();
const rescale = d3.scaleLinear().range(x.domain());
axis
.select("path")
.attr("stroke-dasharray", [0, 10000])
.transition()
.ease(d3[`ease${ease}`])
.duration(3400)
.attr("stroke-dasharray", function () {
return [this.getTotalLength(), 10000];
})
.attrTween("data-t", () => (t) => {
if (ticksToAnimate.length && rescale(t) >= ticksToAnimate[0]) {
const u = ticksToAnimate.shift();
axis
.append("line")
.attr("stroke", "black")
.attr("x1", x(u))
.attr("x2", x(u))
.attr("y1", 0)
.attr("y2", 0)
.transition()
.duration(1200)
.attr("y1", -170);
}
return t;
});
return svg.node();
}
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.
