Published
Edited
Aug 17, 2020
Insert cell
Insert cell
md`text ${radius}`
Insert cell
{
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, 1 * Math.PI, true);
context.fill();
return context.canvas;
}
Insert cell
{
const context = DOM.context2d(width, height);
var i;
for (i = 0; i < 100; i++) {
const x = (Math.sin(Date.now() / 1000) + 1) / 2 * (width - 2 * radius) + radius;
context.clearRect(0, 0, width, height);
context.beginPath();
context.arc(i, height / 2, radius, 0, 2 * Math.PI);
context.fill();
yield context.canvas;
}
}
Insert cell
height = 10
Insert cell
radius = 5
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