Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
canvas = {
replay;
const canvas = document.createElement("canvas");
const scale = window.devicePixelRatio;
const scheme = d3.interpolateRainbow;
const width = 1152;
const height = width;
const radius = 2.25;
canvas.width = width * scale;
canvas.height = height * scale;
canvas.style = `max-width: 100%; width: ${width}px; height: auto;`;
const context = canvas.getContext("2d");
context.scale(scale, scale);
context.translate(width / 2, height / 2);
context.lineCap = "round";
const sampler = samples(radius * 3);
yield canvas;
for (let i = 0, n = 10000; i < n; ++i) {
const [parent, [x, y]] = sampler.next().value;
if (parent) {
const [px, py] = parent;
const [dx, dy] = [x - px, y - py];
const k = (radius + 2) / Math.hypot(dx, dy);
context.beginPath();
context.moveTo(px + dx * k, py + dy * k);
context.lineTo(x, y);
context.lineWidth = 3;
context.strokeStyle = "white";
context.stroke();
context.lineWidth = 1;
context.strokeStyle = context.fillStyle = scheme(Math.atan2(dx, dy) / (2 * Math.PI));
context.stroke();
}
context.beginPath();
context.moveTo(x + radius, y);
context.arc(x, y, radius, 0, 2 * Math.PI);
context.fill();
if (i % 40 === 0) yield canvas;
}
}
function* samples(radius, random = d3.randomLcg(37), k = 30) {
const radius2 = radius * radius;
const radius2_3 = 3 * radius2;
const cellSize = radius * Math.SQRT1_2;
const gridWidth = 1024;
const gridHeight = 1024;
const grid = new Array(gridWidth * gridHeight);
const queue = [];
// Pick the first sample.
yield [null, sample(0, 0)];
// Pick a random existing sample from the queue.
pick: while (queue.length) {
const i = random() * queue.length | 0;
const parent = queue[i];
// Make a new candidate between [radius, 2 * radius] from the existing sample.
for (let j = 0; j < k; ++j) {
const a = 2 * Math.PI * random();
const r = Math.sqrt(random() * radius2_3 + radius2);
const x = parent[0] + r * Math.cos(a);
const y = parent[1] + r * Math.sin(a);
// Accept candidates farther than 2 * radius to all existing samples.
if (far(x, y)) {
yield [parent, sample(x, y)];
continue pick;
}
}
// If none of k candidates were accepted, remove it from the queue.
const r = queue.pop();
if (i < queue.length) queue[i] = r;
}
function cell(x, y) {
return [
Math.floor(x / cellSize) + (gridWidth >> 1),
Math.floor(y / cellSize) + (gridHeight >> 1)
];
}
function far(x, y) {
const [i, j] = cell(x, y);
const i0 = Math.max(i - 2, 0);
const j0 = Math.max(j - 2, 0);
const i1 = Math.min(i + 3, gridWidth);
const j1 = Math.min(j + 3, gridHeight);
for (let j = j0; j < j1; ++j) {
const o = j * gridWidth;
for (let i = i0; i < i1; ++i) {
const s = grid[o + i];
if (s) {
const dx = s[0] - x;
const dy = s[1] - y;
if (dx * dx + dy * dy < radius2) return false;
}
}
}
return true;
}
function sample(x, y, parent) {
const [i, j] = cell(x, y);
const xy = [x, y];
queue.push(grid[gridWidth * j + i] = xy);
return xy;
}
}
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.
