Published
Edited
Sep 29, 2020
3 stars
Insert cell
Insert cell
canvas = DOM.canvas(width, width/5)
Insert cell
Insert cell
Insert cell
Insert cell
animating = {
while (current_state == 'playing') { render_frame(canvas); yield true; }
yield false;
}
Insert cell
Insert cell
Insert cell
render_frame = (target) => {
const [w,h] = [target.width, target.height];
const r = Math.min(w, h) / 5;
const x = (Math.sin(Date.now() / 1000) + 1) / 2 * (w - 2*r) + r;
const c2d = target.getContext('2d');
c2d.clearRect(0,0, w,h);
c2d.fillStyle = 'darkgrey';
c2d.fillRect(0,0, w,h);
c2d.fillStyle = (document.fullscreenElement) ? 'red' : 'blue';
c2d.beginPath();
c2d.arc(x, h/2, r, 0, 2*Math.PI);
c2d.fill();
}
Insert cell
fullscreen_button = (element, label='enter full screen') => {
const button = html`<button>${label}`;
button.onclick = () => element.parentElement.requestFullscreen();
return button;
}
Insert cell
state_button = (label, value) => {
const button = html`<button>${label}`;
button.onclick = () => { mutable current_state = value };
return button;
}
Insert cell
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