Public
Edited
Aug 3, 2023
1 fork
1 star
Insert cell
Insert cell
Insert cell
anim = {
let svg = d3.create("svg").attr("viewBox", [-1.1, -0.5, 2.2, 1]);
let dots = svg.append("g");
let circ = dots
.selectAll("circle")
.data([-0.2, 0, 0.2])
.join("circle")
.attr("cx", -1)
.attr("cy", (y) => y)
.attr("r", 0.05)
.attr("fill", "black");

yield svg.node();

let T0 = Date.now();
while (run) {
dots.selectAll("circle").attr("cx", function (_, i) {
let t = Date.now();
if (t - T0 > 100 * i) {
return -Math.cos((t - T0 - 100 * i) / 400);
} else {
return -1;
}
});
yield svg.node();
}
}
Insert cell

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.
Learn more