Public
Edited
Jan 9, 2023
1 fork
Insert cell
Insert cell
canvas = {
const ct = DOM.context2d(WIDTH, HEIGHT);
ct.canvas.ct = ct;

const s = ct.canvas.style;
s.margin = `0 ${(width - WIDTH) / 2}px`;
s.backgroundColor = "black";

ct.setTransform(0,1,1,0, WIDTH, HEIGHT);
ct.strokeStyle = "white";
ct.lineWidth = 2;
return ct.canvas;
}
Insert cell
Insert cell
WIDTH = Math.min(800, width)
Insert cell
HEIGHT = 500
Insert cell
Insert cell
t = {
while (true) {
yield Math.sin(Date.now() / DURATION_MS * Math.PI);
}
}
Insert cell
{
const ct = canvas.ct;

const { PI } = Math;

ct.beginPath();
ct.arc(0,0, 10, 0, PI/2);
ct.stroke();

return this || html`(<i>the drawing function</i>)`;
}
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