Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Pseudo-Blue NoiseVariations on Symmetric Nearest Neighbour smoothingPhyllotaxis explainedDelaunay.findTriangleFast Distance TransformFast and simple prime generatorBest-First SearchSimple rectangle packingNearest Neighbor GraphMinimum Spanning TreeLloyd’s AlgorithmUnderstanding point-in-polygonPrim’s AlgorithmThe Delaunay’s Duald3.packEncloseTo Infinity and Back AgainSutherland–Hodgman Clipping
Bridson’s Algorithm
chart = {
const height = 600;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
replay;
for (const event of poissonDiscSampler(width, height, 10)) {
if (event.add) {
event.parent && svg.insert("line", "circle")
.attr("x1", event.parent[0])
.attr("y1", event.parent[1])
.attr("x2", event.add[0])
.attr("y2", event.add[1])
.attr("stroke", "#999");
svg.append("circle")
.attr("id", `point-${event.add.map(Math.round).join("-")}`)
.attr("r", 0)
.attr("cx", event.add[0])
.attr("cy", event.add[1])
.transition()
.ease(d3.easeLinear)
.attr("r", 3)
.transition()
.attr("fill", "#f00");
} else if (event.remove) {
svg.select(`#point-${event.remove.map(Math.round).join("-")}`)
.transition()
.ease(d3.easeLinear)
.attr("fill", "#999")
.attr("r", 2);
}
yield svg.node();
}
}
function* poissonDiscSampler(width, height, radius) {
const k = 30; // maximum number of samples before rejection
const radius2 = radius * radius;
const radius2_3 = 3 * radius2;
const cellSize = radius * Math.SQRT1_2;
const gridWidth = Math.ceil(width / cellSize);
const gridHeight = Math.ceil(height / cellSize);
const grid = new Array(gridWidth * gridHeight);
const queue = [];
// Pick the first sample.
yield {add: sample(width / 2 + Math.random() * radius, height / 2 + Math.random() * radius, null)};
// Pick a random existing sample from the queue.
pick: while (queue.length) {
const i = Math.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 * Math.random();
const r = Math.sqrt(Math.random() * radius2_3 + radius2);
const x = parent[0] + r * Math.cos(a);
const y = parent[1] + r * Math.sin(a);
// Accept candidates that are inside the allowed extent
// and farther than 2 * radius to all existing samples.
if (0 <= x && x < width && 0 <= y && y < height && far(x, y)) {
yield {add: sample(x, y), parent};
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;
yield {remove: parent};
}
function far(x, y) {
const i = x / cellSize | 0;
const j = y / cellSize | 0;
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 s = grid[gridWidth * (y / cellSize | 0) + (x / cellSize | 0)] = [x, y];
queue.push(s);
return s;
}
}
d3 = require("d3@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.
