Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
canvas = {
const context = DOM.context2d(width, height);
context.beginPath();
delaunay.render(context);
context.strokeStyle = "#ddd";
context.stroke();
context.beginPath();
for (let i0 = 0, n = delaunay.points.length / 2; i0 < n; ++i0) {
const i1 = nearestNeighbor(delaunay, i0);
context.moveTo(delaunay.points[i0 * 2], delaunay.points[i0 * 2 + 1]);
context.lineTo(delaunay.points[i1 * 2], delaunay.points[i1 * 2 + 1]);
}
context.strokeStyle = "red";
context.stroke();
context.beginPath();
delaunay.renderPoints(context);
context.fill();
yield context.canvas;
}
function nearestNeighbor(delaunay, 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;
}
delaunay = new d3.Delaunay(Float64Array.from({length: 600 * 2}, (_, i) => Math.random() * (i & 1 ? height : width)))
height = 600
d3 = require("d3-delaunay@5")
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.
