Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
function soddyCircles([x1, y1, r1], [x2, y2, r2], [x3, y3, r3]) {
if (r2 < r1) [x1, y1, r1, x2, y2, r2] = [x2, y2, r2, x1, y1, r1];
if (r3 < r2) [x2, y2, r2, x3, y3, r3] = [x3, y3, r3, x2, y2, r2];
const [ri, ro] = soddyRadii(r1, r2, r3);
const [xi0, yi0, xi1, yi1] = circleIntersections([x1, y1, r1 + ri], [x2, y2, r2 + ri]);
const [xo0, yo0, xo1, yo1] = circleIntersections([x1, y1, r1 + ro], [x2, y2, r2 + ro]);
const i0 = (xi0 - x3) ** 2 + (yi0 - y3) ** 2;
const i1 = (xi1 - x3) ** 2 + (yi1 - y3) ** 2;
const o0 = (xo0 - x3) ** 2 + (yo0 - y3) ** 2;
const o1 = (xo1 - x3) ** 2 + (yo1 - y3) ** 2;
return [
i0 < i1 ? [xi0, yi0, ri] : [xi1, yi1, ri],
o0 < o1 ? [xo0, yo0, Math.abs(ro)] : [xo1, yo1, Math.abs(ro)]
];
}
function soddyRadii(r1, r2, r3) {
const a = r1 * r2 * r3;
const b = r1 * r2 + r1 * r3 + r2 * r3;
const c = 2 * Math.sqrt(a * (r1 + r2 + r3));
return [a / (b + c), a / (b - c)];
}
function circleIntersections([ax, ay, ar], [bx, by, br]) {
const dx = bx - ax;
const dy = by - ay;
const l = Math.sqrt(dx * dx + dy * dy);
const x = (l * l - br * br + ar * ar) / (2 * l);
const y = Math.sqrt(ar * ar - x * x);
const vx = dx / l;
const vy = dy / l;
return [
ax + vx * x - vy * y,
ay + vy * x + vx * y,
ax + vx * x + vy * y,
ay + vy * x - vx * y
];
}
function tangentCircle1([ax, ay, ar], br) {
return [ax + ar + br, ay, br];
}
function tangentCircle2([ax, ay, ar], [bx, by, br], cr) {
const dx = bx - ax;
const dy = by - ay;
const d2 = dx * dx + dy * dy;
if (d2) {
const a2 = (ar + cr) ** 2;
const b2 = (br + cr) ** 2;
if (a2 > b2) {
const x = (d2 + b2 - a2) / (2 * d2);
const y = Math.sqrt(Math.max(0, b2 / d2 - x * x));
return [
bx - x * dx - y * dy,
by - x * dy + y * dx,
cr
];
} else {
const x = (d2 + a2 - b2) / (2 * d2);
const y = Math.sqrt(Math.max(0, a2 / d2 - x * x));
return [
ax + x * dx - y * dy,
ay + x * dy + y * dx,
cr
];
}
}
return [ax + cr, ay, cr];
}
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.
