Public
Edited
Sep 27, 2023
3 stars
viewof strokeWidth = html`<input type="range" min="1" max="16" value="5">`
viewof radius = html`<input type="range" min="8" max="64" value="16">`
function f (x1,y1,r1,x2,y2,r2) {
const ra = (x1 > x2 ? Math.PI : 0) + Math.atan((y2 - y1) / (x2 - x1));
const sa = Math.sin(ra);
const ca = Math.cos(ra);
return [x1 + r1 * ca, y1 + r1 * sa, x2 - r2 * ca, y2 - r2 * sa];
}
function tick() {
const {x:x1,y:y1,r:r1} = circles[0];
const {x:x2,y:y2,r:r2} = circles[1];
const [lx1,ly1,lx2,ly2] = f(x1,y1,r1+2*strokeWidth,x2,y2,r2+2*strokeWidth);
svg.selectAll("line")
.data(links)
.join("line")
.attr("x1", lx1)
.attr("y1", ly1)
.attr("x2", lx2)
.attr("y2", ly2)
}
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.
