Building Ken.
animation = {
const canvas = svg`<svg width=50 height=50></svg>`
const circle = canvas.appendChild(svg`<circle cx=25 cy=25 r=5 />`);
let animation = requestAnimationFrame(function tick() {
circle.setAttribute("r", Math.sin(Date.now() / 1000) * 10 + 15);
animation = requestAnimationFrame(tick);
});
invalidation.then(() => cancelAnimationFrame(animation));
return canvas;
}
Runtime = (await import("@observablehq/notebook-runtime")).Runtime
notebook = (await import("https://api.observablehq.com/@jashkenas/ouroboros-a-notebook-embeds-itself.js?key=06b85974125ae457")).default
new Promise((resolve) => {
Runtime.load(notebook, (variable) => {
if (variable.name === "animation") return {fulfilled: resolve};
});
})
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.
