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 AlgorithmBridson’s AlgorithmThe Delaunay’s Duald3.packEncloseSutherland–Hodgman Clipping
To Infinity and Back Again
function project([x0, y0], [vx, vy]) {
let t = Infinity, c, x, y;
if (vy < 0) { // top
if (y0 <= ymin) return;
if ((c = (ymin - y0) / vy) < t) y = ymin, x = x0 + (t = c) * vx;
} else if (vy > 0) { // bottom
if (y0 >= ymax) return;
if ((c = (ymax - y0) / vy) < t) y = ymax, x = x0 + (t = c) * vx;
}
if (vx > 0) { // right
if (x0 >= xmax) return;
if ((c = (xmax - x0) / vx) < t) x = xmax, y = y0 + (t = c) * vy;
} else if (vx < 0) { // left
if (x0 <= xmin) return;
if ((c = (xmin - x0) / vx) < t) x = xmin, y = y0 + (t = c) * vy;
}
return [x, y];
}
function contains({points, v0, vn}, p) {
let n = points.length, p0, p1 = points[0];
if (clockwise(p, [p1[0] + v0[0], p1[1] + v0[1]], p1)) return false;
for (let i = 1; i < n; ++i) if (clockwise(p, p0 = p1, p1 = points[i])) return false;
if (clockwise(p, p1, [p1[0] + vn[0], p1[1] + vn[1]])) return false;
return true;
}
function clockwise([x0, y0], [x1, y1], [x2, y2]) {
return (x1 - x0) * (y2 - y0) < (y1 - y0) * (x2 - x0);
}
function sidecode([x, y]) {
return (x === xmin ? 1
: x === xmax ? 2 : 0)
| (y === ymin ? 4
: y === ymax ? 8 : 0);
}
function clipInfinite(polygon) {
let P = polygon.points.slice(), p, n;
if (p = project(P[0], polygon.v0)) P.unshift(p);
if (p = project(P[P.length - 1], polygon.vn)) P.unshift(p);
if (n = (P = clip(P)).length) {
for (let i = 0, c0, c1 = sidecode(P[n - 1]); i < n; ++i) {
c0 = c1, c1 = sidecode(P[i]);
if (c0 && c1) {
while (c0 !== c1) {
let c;
switch (c0) {
case 0b0101: c0 = 0b0100; continue; // top-left
case 0b0100: c0 = 0b0110, c = [xmax, ymin]; break; // top
case 0b0110: c0 = 0b0010; continue; // top-right
case 0b0010: c0 = 0b1010, c = [xmax, ymax]; break; // right
case 0b1010: c0 = 0b1000; continue; // bottom-right
case 0b1000: c0 = 0b1001, c = [xmin, ymax]; break; // bottom
case 0b1001: c0 = 0b0001; continue; // bottom-left
case 0b0001: c0 = 0b0101, c = [xmin, ymin]; break; // left
}
if (contains(polygon, c)) {
P.splice(i, 0, c), ++n, ++i;
}
}
}
}
} else if (contains(polygon, [(xmin + xmax) / 2, (ymin + ymax) / 2])) {
P.push([xmin, ymin], [xmax, ymin], [xmax, ymax], [xmin, ymax]);
}
return P;
}
xmin = 0.75
ymin = 0.75
xmax = 639.25
ymax = 499.25
function centroid(polygon) {
var i = -1,
n = polygon.length,
x = 0,
y = 0,
a,
b = polygon[n - 1],
c,
k = 0;
while (++i < n) {
a = b;
b = polygon[i];
k += c = a[0] * b[1] - b[0] * a[1];
x += (a[0] + b[0]) * c;
y += (a[1] + b[1]) * c;
}
return k *= 3, [x / k, y / k];
}
inside = ({
top: ([x, y]) => y > ymin,
right: ([x, y]) => x < xmax,
bottom: ([x, y]) => y < ymax,
left: ([x, y]) => x > xmin
})
intersect = ({
top: ([x0, y0], [x1, y1]) => [x0 + (x1 - x0) * (ymin - y0) / (y1 - y0), ymin],
right: ([x0, y0], [x1, y1]) => [xmax, y0 + (y1 - y0) * (xmax - x0) / (x1 - x0)],
bottom: ([x0, y0], [x1, y1]) => [x0 + (x1 - x0) * (ymax - y0) / (y1 - y0), ymax],
left: ([x0, y0], [x1, y1]) => [xmin, y0 + (y1 - y0) * (xmin - x0) / (x1 - x0)]
})
function clipper(inside, intersect) {
return function(subject) {
const P = [], n = subject.length;
if (!n) return P;
let p0, p1 = subject[n - 1];
let t0, t1 = inside(p1);
for (let i = 0; i < n; ++i) {
p0 = p1, p1 = subject[i];
t0 = t1, t1 = inside(p1);
if (t1 !== t0) P.push(intersect(p0, p1));
if (t1) P.push(p1);
}
return P;
};
}
clip = {
const top = clipper(inside.top, intersect.top);
const right = clipper(inside.right, intersect.right);
const bottom = clipper(inside.bottom, intersect.bottom);
const left = clipper(inside.left, intersect.left);
return function clip(subject) {
return left(bottom(right(top(subject))));
};
}
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.
