{
const ctx = DOM.context2d(500,500);
while (true) {
ctx.fillStyle = 'rgba(255,255,255,1)';
ctx.fillRect(0,0,500,500);
ctx.strokeStyle = 'rgba(0,0,0,.5)';
for (let i=1; i<20; ++i) {
ctx.beginPath();
ctx.strokeStyle = `hsla(${i/20 * 360}, 80%, 80%, 1)`;
for (let j=0; j<300; ++j) {
const pct_height = j/300;
const c = ((2*pct_height) ** 2);
const x = 250 + Math.sin(-now/500 + (i/9) + j/50) * 50 * c;
const y = j+100;
ctx.lineTo(x,y);
}
ctx.stroke();
}
yield ctx.canvas;
}
}
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.
