Published
Edited
Oct 3, 2018
2 forks
6 stars
{
const c = DOM.context2d(640, 640, 1);
c.fillStyle = "#eee";
c.strokeStyle = "#000";
for (let i = 0; i < Math.PI * 2; i += 0.05) {
c.beginPath();
c.resetTransform();
c.translate(dim / 2 + Math.cos(i) * radius, dim / 2 + Math.sin(i) * radius);
c.rotate(i * spin);
c.translate(-squareSize / 2, -squareSize / 2);
c.rect(0, 0, squareSize, squareSize);
if (i > Math.PI * 1.9) {
// TODO: how does one complete the loop?
}
c.fill();
c.stroke();
}
c.canvas.style.width = "100%";
c.canvas.style.border = "1px solid #555";
return html`<div style='padding:20px;max-width:640px;width:100%;'>${
c.canvas
}</div>`;
}
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.
