Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
canvas = {
const context = DOM.context2d(width, height);
context.strokeStyle = "red";
while (true) {
context.clearRect(0, 0, width, height);
context.beginPath();
for (let i = 0; i < n; ++i) {
const x1 = i << 1, y1 = x1 + 1;
const x2 = nearestNeighbor(i) << 1, y2 = x2 + 1;
context.moveTo(positions[x1], positions[y1]);
context.lineTo(positions[x2], positions[y2]);
}
context.stroke();
context.beginPath();
delaunay.renderPoints(context);
context.fill();
yield context.canvas;
for (let i = 0; i < n; ++i) {
const x = i << 1;
const y = x + 1;
positions[x] += velocities[x];
positions[y] += velocities[y];
if (positions[x] < -margin) positions[x] += width + margin * 2;
else if (positions[x] > width + margin) positions[x] -= width + margin * 2;
if (positions[y] < -margin) positions[y] += height + margin * 2;
else if (positions[y] > height + margin) positions[y] -= height + margin * 2;
velocities[x] += 0.2 * (Math.random() - 0.5) - 0.01 * velocities[x];
velocities[y] += 0.2 * (Math.random() - 0.5) - 0.01 * velocities[y];
}
delaunay.update();
}
}
positions = Float64Array.from({length: n * 2}, (_, i) => Math.random() * (i & 1 ? height : width))
velocities = new Float64Array(n * 2)
delaunay = new d3.Delaunay(positions)
function nearestNeighbor(i) {
const {points} = delaunay;
let minDistance = Infinity;
let minNeighbor;
const x0 = points[i * 2];
const y0 = points[i * 2 + 1];
for (const neighbor of delaunay.neighbors(i)) {
const x1 = points[neighbor * 2];
const y1 = points[neighbor * 2 + 1];
const distance = (x0 - x1) ** 2 + (y0 - y1) ** 2;
if (distance < minDistance) {
minDistance = distance;
minNeighbor = neighbor;
}
}
return minNeighbor;
}
height = 600
margin = 60
n = 200
d3 = require("d3-delaunay@^5.1")
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.
