{
const w = Math.min(640, width);
const r = 32;
const h = r * 3;
const svg = d3.select(DOM.svg(w, h));
const circle = svg.append("circle")
.attr("r", r)
.attr("cx", w + r)
.attr("cy", h / 2)
.attr("fill", "transparent")
.attr("stroke", "black")
.attr("stroke-width", 2);
yield svg.node();
await circle.transition()
.duration(1000)
.ease(d3.easeBounce)
.attr("fill", "yellow")
.attr("cx", r)
.end();
while (true) {
yield svg.node();
await circle.transition()
.duration(2000)
.attr("fill", `hsl(${Math.random() * 360},100%,50%)`)
.attr("cx", Math.random() * (w - r * 2) + r)
.end();
}
}
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.
