Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Circular SegmentPacking Circles inside a RectangleRadical AxisRounded Convex PolygonPoint-Box CollisionRandom Points on a SphereSpherical Fibonacci LatticeApollonian GasketSoddy Circles19-CircleCircle Offset Along LineClosest Point on LineCircumcircleTangent to Two CirclesCircle Tangent to Three LinesAngle Bisector of Two LinesConvex Polygon Incircle
Urquhart Graph
function* urquhartEdges(delaunay, score = euclidean2) {
const {halfedges, triangles} = delaunay;
const n = triangles.length;
const removed = new Uint8Array(n);
for (let e = 0; e < n; e += 3) {
const p0 = triangles[e], p1 = triangles[e + 1], p2 = triangles[e + 2];
const p01 = score(p0, p1), p12 = score(p1, p2), p20 = score(p2, p0);
removed[p20 > p01 && p20 > p12 ? Math.max(e + 2, halfedges[e + 2])
: p12 > p01 && p12 > p20 ? Math.max(e + 1, halfedges[e + 1])
: Math.max(e, halfedges[e])] = 1;
}
for (let e = 0; e < n; ++e) {
if (e > halfedges[e] && !removed[e]) yield [
triangles[e],
triangles[e % 3 === 2 ? e - 2 : e + 1]
];
}
}
function euclidean2(i, j) {
return (delaunay.points[i * 2] - delaunay.points[j * 2]) ** 2 + (delaunay.points[i * 2 + 1] - delaunay.points[j * 2 + 1]) ** 2;
}
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.
