Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Circular SegmentPacking Circles inside a RectangleRadical AxisRounded Convex PolygonPoint-Box CollisionUrquhart GraphRandom Points on a SphereSpherical Fibonacci LatticeApollonian GasketSoddy CirclesCircle Offset Along LineClosest Point on LineCircumcircleTangent to Two CirclesCircle Tangent to Three LinesAngle Bisector of Two LinesConvex Polygon Incircle
19-Circle
chart = {
const context = DOM.context2d(width, height);
const dx = r;
const dy = r * 3 / 4 / Math.sin(Math.PI / 3);
const n = 4;
context.translate(width / 2, height / 2);
context.rotate(Math.PI / 6);
context.globalCompositeOperation = "multiply";
context.beginPath();
for (let j = -n; j <= n; ++j) {
for (let i = -n; i <= n; ++i) {
const x = (i + (j & 1) / 2) * dx;
const y = j * dy;
if (x * x + y * y > r * r * 6) continue;
context.moveTo(x + r, y);
context.arc(x, y, r, 0, 2 * Math.PI);
}
}
context.strokeStyle = "#f00";
context.stroke();
context.save();
context.clip();
context.beginPath();
for (let j = -n; j <= n; ++j) {
for (let i = -n; i <= n; ++i) {
const x = (i + (j & 1) / 2) * dx;
const y = j * dy;
if (x * x + y * y <= r * r * 6) continue;
if (x * x + y * y > r * r * 14) continue;
context.moveTo(x + r, y);
context.arc(x, y, r, 0, 2 * Math.PI);
}
}
context.strokeStyle = "#00f";
context.stroke();
context.restore();
context.beginPath();
context.moveTo(0 + r * 3, 0)
context.arc(0, 0, r * 3, 0, 2 * Math.PI);
context.lineWidth = 2.5;
context.strokeStyle = "#000";
context.stroke();
return context.canvas;
}
height = width
r = (Math.min(width, height) - 2) / 6
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.
