Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Circular SegmentPacking Circles inside a RectangleRadical AxisRounded Convex PolygonUrquhart GraphRandom 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
Point-Box Collision
top = p.y - b.y
right = b.x + b.width - p.x
bottom = b.y + b.height - p.y
left = p.x - b.x
closest = {
let value = top, side = TOP;
if (right < value) value = right, side = RIGHT;
if (bottom < value) value = bottom, side = BOTTOM;
if (left < value) value = left, side = LEFT;
if (value < 0) return null;
return {value, side};
}
function offset({x, y, width, height}, {dx = 0, dy = 0}) {
return {x: x + dx, y: y + dy, width, height};
}
o = {
if (closest === null) return b;
switch (closest.side) {
case TOP: return offset(b, {dy: closest.value});
case RIGHT: return offset(b, {dx: -closest.value});
case BOTTOM: return offset(b, {dy: -closest.value});
case LEFT: return offset(b, {dx: closest.value});
}
}
viewof p = new View({x: width / 2, y: 150})
b = ({x: width / 5, y: 120, width: width / 2, height: 100})
TOP = Symbol("top")
RIGHT = Symbol("right")
BOTTOM = Symbol("bottom")
LEFT = Symbol("left")
height = 300
import {View} from "@mbostock/synchronized-views"
d3 = require("d3@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.
