function chart(ease, invalidation) {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("max-width", `${width}px`)
.style("overflow", "visible")
.style("cursor", "pointer")
.on("click", () => animate(0));
const circle = svg.append("circle")
.attr("cx", x(0))
.attr("cy", (height - margin.bottom + margin.top) / 2)
.attr("r", 12);
svg.append("g")
.call(xAxis);
function animate(delay) {
circle.transition()
.ease(ease)
.delay(delay)
.duration(1500)
.attrTween("r", () => (circle.attr("r", 12), null))
.attrTween("cx", () => x)
.transition()
.delay(1500)
.duration(250)
.ease(d3.easeCubicIn)
.attr("r", 0)
.transition()
.attr("cx", x(0))
.transition()
.ease(d3.easeCubicOut)
.attr("r", 12);
}
const observer = new IntersectionObserver(entries => {
const entry = entries.pop();
if (entry.intersectionRatio >= 0.9) animate(500);
else if (entry.intersectionRatio <= 0) circle.interrupt();
}, {
threshold: [0, 0.9]
});
observer.observe(svg.node());
invalidation.then(() => observer.disconnect());
return svg.node();
}