here to learn
Published unlisted
Edited
Jul 11, 2019
viewof reset = html`<button>Reset!`
viewof cell4 = {
const ctx = DOM.context2d(100,100);
ctx.canvas.value = false;
let i = 0;
draw(ctx, i, 100);
yield ctx.canvas;
await visibility();
while (!cell3 || i++ < 100) {
draw(ctx, i/100, 100);
yield ctx.canvas;
}
ctx.canvas.value = true;
}
viewof cell5 = {
const ctx = DOM.context2d(100,100);
ctx.canvas.value = false;
let i = 0;
draw(ctx, i, 100);
yield ctx.canvas;
await visibility();
while (!cell4 || i++ < 100) {
draw(ctx, i/100, 100);
yield ctx.canvas;
}
ctx.canvas.value = true;
}
viewof cell6 = {
const ctx = DOM.context2d(100,100);
ctx.canvas.value = false;
let i = 0;
draw(ctx, i, 100);
yield ctx.canvas;
await visibility();
while (!cell5 || i++ < 100) {
draw(ctx, i/100, 100);
yield ctx.canvas;
}
ctx.canvas.value = true;
}
viewof cell7 = {
const ctx = DOM.context2d(100,100);
ctx.canvas.value = false;
let i = 0;
draw(ctx, i, 100);
yield ctx.canvas;
await visibility();
while (!cell6 || i++ < 100) {
draw(ctx, i/100, 100);
yield ctx.canvas;
}
ctx.canvas.value = true;
}
function draw(ctx, t, scale) {
ctx.fillStyle = 'white';
ctx.fillRect(0,0,scale,scale);
ctx.fillStyle = 'black';
ctx.beginPath();
ctx.arc(scale/2+scale/5*Math.cos(2*Math.PI*t), scale/2+scale/5*Math.sin(2*Math.PI*t), scale/20, 0, 2*Math.PI);
ctx.fill();
}
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.
