Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
function place(a, b, c) {
const x_ba = b.x - a.x;
const y_ba = b.y - a.y;
const l_ab2 = x_ba ** 2 + y_ba ** 2;
const r_ac2 = (a.r + c.r) ** 2;
const r_bc2 = (b.r + c.r) ** 2;
const t_ap = (l_ab2 + r_ac2 - r_bc2) / (2 * l_ab2);
const t_pc = Math.sqrt(r_ac2 / l_ab2 - t_ap ** 2);
c.x = a.x + t_ap * x_ba + t_pc * y_ba;
c.y = a.y + t_ap * y_ba - t_pc * x_ba;
return c;
}
A = ({x: 120, y: 150, r: 50})
B = ({x: 300, y: 205, r: 90})
C = place(A, B, {r: 50 - Math.cos(now / 5000) * 14})
C2 = place(B, A, {r: C.r})
p = {
const x_ba = B.x - A.x;
const y_ba = B.y - A.y;
const l_ab2 = x_ba ** 2 + y_ba ** 2;
const r_ac2 = (A.r + C.r) ** 2;
const r_bc2 = (B.r + C.r) ** 2;
const t_ap = (l_ab2 + r_ac2 - r_bc2) / (2 * l_ab2);
const t_pc = Math.sqrt(r_ac2 / l_ab2 - t_ap ** 2);
return {x: A.x + t_ap * x_ba, y: A.y + t_ap * y_ba};
}
color_a = "#1f77b4"
color_b = "#2ca02c"
color_c = "#000000"
color_p = "#d62728" // d3.schemeCategory10[3]
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.
