chart = {
const svg = d3
.create("svg")
.attr("width", WIDTH)
.attr("height", HEIGHT)
.style("background-color", "#eee")
.style("border", "2px solid #ddd")
.style("border-radius", "16px");
const path = svg
.append("path")
.attr("d", line(data))
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 4);
const totalLength = path.node().getTotalLength();
path
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(2000)
.ease(d3.easeLinear)
.attr("stroke-dashoffset", 0);
svg.on("click", function () {
path
.transition()
.duration(2000)
.ease(d3.easeLinear)
.attr("stroke-dashoffset", (eraseFromStart ? -1 : 1) * totalLength);
});
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.
