The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Edited
Feb 15, 2021
6 forks
108 stars
{
const context = DOM.context2d(width, height);
let frame;
(function tick() {
const x = (Math.sin(Date.now() / 1000) + 1) / 2 * (width - 2 * radius) + radius;
context.clearRect(0, 0, width, height);
context.beginPath();
context.arc(x, height / 2, radius, 0, 2 * Math.PI);
context.fill();
frame = requestAnimationFrame(tick);
})();
invalidation.then(() => cancelAnimationFrame(frame));
return context.canvas;
}
{
const context = DOM.context2d(width, height);
while (true) {
const x = (Math.sin(Date.now() / 1000) + 1) / 2 * (width - 2 * radius) + radius;
context.clearRect(0, 0, width, height);
context.beginPath();
context.arc(x, height / 2, radius, 0, 2 * Math.PI);
context.fill();
yield context.canvas;
}
}
{
const context = DOM.context2d(width, height);
const x = (Math.sin(now / 1000) + 1) / 2 * (width - 2 * radius) + radius;
context.beginPath();
context.arc(x, height / 2, radius, 0, 2 * Math.PI);
context.fill();
return context.canvas;
}
{
const context = this ? this.getContext("2d") : DOM.context2d(width, height);
const x = (Math.sin(now / 1000) + 1) / 2 * (width - 2 * radius) + radius;
context.clearRect(0, 0, width, height);
context.beginPath();
context.arc(x, height / 2, radius, 0, 2 * Math.PI);
context.fill();
return context.canvas;
}
function* animate() {
while (true) {
yield Promises.tick(250, (Math.sin(Date.now() / 1000) + 1) / 2 * (width - 2 * radius) + radius);
}
}
{
const context = DOM.context2d(width, height);
for (const x of animate()) {
yield x.then(x => {
context.clearRect(0, 0, width, height);
context.beginPath();
context.arc(x, height / 2, radius, 0, 2 * Math.PI);
context.fill();
return context.canvas;
});
}
}
height = 33
radius = height / 2 - 5
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.
