Public
Edited
Jun 5, 2020
7 forks
27 stars
{
// Create the SVG
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
// Add the line
var path = svg.append("path")
.attr("d", line(data))
.attr("fill", "none")
.attr("stroke-width", 2)
.attr("stroke", "darkgrey");
// Add text displaying the stroke-dashoffset
var text = svg.append("text")
.text("stroke-dashoffset: " + dashOffset)
.attr("x", margin.left)
.attr("y", height - 10)
.attr("font-family", "monospace");
// Get the length of the path, which we will use for the intial offset to "hide"
// the graph
const length = path.node().getTotalLength();
// This function will animate the path over and over again
function repeat() {
// Animate the path by setting the initial offset and dasharray and then transition the offset to 0
path.attr("stroke-dasharray", length + " " + length)
.attr("stroke-dashoffset", length)
.transition()
.ease(d3.easeLinear)
.attr("stroke-dashoffset", 0)
.duration(6000)
.on("end", () => setTimeout(repeat, 1000)); // this will repeat the animation after waiting 1 second
// Animate the dashoffset changes
text.transition()
.duration(6000)
.tween("text", function(t) {
const i = d3.interpolateRound(0, length);
return function(t) {
this.textContent = "stroke-dashoffset: " + i(t);
};
});
};
// Animate the graph for the first time
repeat();
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.
