Public
Edited
May 21, 2023
1 fork
3 stars
{
replay;
const height = 400;
const bound = d3.create("svg").attr("viewBox", [0, 0, width, height]);
yield bound.node();
const scaleX = d3.scaleLinear(
d3.extent(aapl, (d) => d.Date),
[10, width - 10]
);
const scaleY = d3.scaleLinear(
d3.extent(aapl, (d) => d.Close),
[height - 10, 10]
);
const path = bound
.append("path")
.classed("path", true)
.datum(aapl)
.attr("fill", "none")
.attr("stroke", "none")
.attr("stroke-width", 1.5)
.attr(
"d",
d3
.line()
.x((d) => scaleX(d.Date))
.y((d) => scaleY(d.Close))
);
const length = path.node().getTotalLength();
const t1 = d3.scaleLinear([0, 4000 / 6000], [0, 1]).clamp(true);
const t2 = d3.scaleLinear([2000 / 6000, 1], [0, 1]).clamp(true);
path
.transition()
.duration(6000)
.attr("stroke", "black")
.attrTween("stroke-dasharray", () => (t) => `${length * t1(t)},${length}`)
.attrTween("stroke-dashoffset", () => (t) => -t2(t) * length);
}
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.
