Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Jan 10, 2021
15 stars
chart = {
const cx = Float64Array.from({length: n}, () => Math.random() * width);
const cy = Float64Array.from({length: n}, () => Math.random() * height);
const vx = new Float64Array(n);
const vy = new Float64Array(n);
const circles = Array.from({length: n}, (_, i) => svg`<circle r=1.5>`);
const chart = svg`<svg viewBox=${`0 0 ${width} ${height}`}>${circles}`;
while (true) {
for (let i = 0; i < n; ++i) {
circles[i].setAttribute("cx", cx[i] += vx[i]);
circles[i].setAttribute("cy", cy[i] += vy[i]);
if (cx[i] < 0) cx[i] += width; else if (cx[i] >= width) cx[i] -= width;
if (cy[i] < 0) cy[i] += height; else if (cy[i] >= height) cy[i] -= height;
vx[i] += 0.2 * (Math.random() - 0.5) - 0.01 * vx[i];
vy[i] += 0.2 * (Math.random() - 0.5) - 0.01 * vy[i];
}
yield chart;
}
}
n = 500
height = 600
svg = (await require("htl@0.2")).svg
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.
