Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Jun 11, 2020
1 fork
28 stars
canvas = {
const context1 = DOM.context2d(width, height);
const context2 = DOM.context2d(width, height);
const div = html`${context2.canvas}${context1.canvas}`;
context2.canvas.style.position = "absolute";
context1.beginPath();
for (let i = -1; i < n; ++i) {
for (let j = -1; j < m; ++j) {
context1.moveTo(i * ringSeparation + ringRadius, j * ringSeparation);
context1.arc(i * ringSeparation, j * ringSeparation, ringRadius, 0, 2 * Math.PI);
}
}
context1.lineWidth = 0.25;
context1.stroke();
while (true) {
const t = performance.now() / 400;
context2.clearRect(0, 0, width, height);
context2.beginPath();
for (var i = -1; i < n; ++i) {
for (var j = -1; j < m; ++j) {
context2.save();
context2.translate(i * ringSeparation, j * ringSeparation);
context2.rotate((i + j) / 6 + t);
context2.moveTo(ringRadius + dotRadius, 0);
context2.arc(ringRadius, 0, dotRadius, 0, 2 * Math.PI);
context2.restore();
}
}
context2.fill();
yield div;
}
}
ringRadius = 24
ringSeparation = ringRadius * 11 / 10
dotRadius = 3.5
n = (width + ringRadius) / ringSeparation
m = (height + ringRadius) / ringSeparation
height = 500
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.
