Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Circular SegmentPacking Circles inside a RectangleRadical AxisRounded Convex PolygonPoint-Box CollisionUrquhart GraphSpherical Fibonacci LatticeApollonian GasketSoddy Circles19-CircleCircle Offset Along LineClosest Point on LineCircumcircleTangent to Two CirclesCircle Tangent to Three LinesAngle Bisector of Two LinesConvex Polygon Incircle
Random Points on a Sphere
function randomPoint() {
return [
(Math.random() * 2 - 1) * 180,
Math.asin(Math.random() * 2 - 1) / Math.PI * 180,
];
}
function randomPointUncorrected() {
return [
(Math.random() * 2 - 1) * 180,
(Math.random() * 2 - 1) * 90
];
}
function* chart(randomPoint) {
const context = DOM.context2d(width, height);
const path = d3.geoPath(projection, context).pointRadius(0.75);
context.beginPath();
path(graticule);
context.strokeStyle = "#ccc";
context.stroke();
context.beginPath();
path(sphere);
context.strokeStyle = "#000";
context.lineWidth = 1.5;
context.stroke();
context.globalAlpha = 0.5;
for (let i = 0; i < 3e5; ++i) {
context.beginPath();
path({type: "Point", coordinates: randomPoint()});
context.fill();
if (i % 1000 === 0) yield context.canvas;
}
}
projection = d3.geoOrthographic()
.fitExtent([[1, 1], [width - 1, height - 1]], sphere)
.rotate([0, -30])
.precision(0.1)
height = 640
sphere = ({type: "Sphere"})
graticule = d3.geoGraticule10()
d3 = require("d3@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.
