2c:T493e,chart = { // colors const C = { leaf: "#4cc16a", // leaf nodes + leaf sliders (green) root: "#c026d3", // root node + root sliders (magenta) trunk: "#6ab9ff", // trunk / carrying skeleton (blue) branch: "#81e2f4", // branches / vessels (cyan) idle: "#fffef9", // idle skeleton edges (pale blue) spline: "#111" // bundled b-spline links (near-black) }; // starting number of leaf points let n = 16; // ---- working config: clone the defaults so sliders never touch `config` ---- const cfg = { ...config }; const R = router(); const W = width, H = 620; const hyp = (dx, dy) => Math.sqrt(dx * dx + dy * dy); // ---- container + scoped styles ---- const root = d3.create("div").attr("class", "lz").style("position", "relative"); root.append("style").text(` .lz svg { display:block; background:#fff; border-radius:4px; } .lz .bar { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-bottom:8px; font:13px sans-serif; } .lz .bar button { width:110px; height:32px; font:14px sans-serif; cursor:pointer; background:#fff; border:1px solid #ccc; border-radius:4px; } .lz .bar select { height:32px; padding:0 8px; font:14px sans-serif; cursor:pointer; background:#fff; border:1px solid #ccc; border-radius:4px; } .lz .bar label { display:flex; align-items:center; gap:6px; } /* options: a fixed-width panel pinned to the right, overlaying the chart */ .lz .panel { position:absolute; top:0; right:0; z-index:10; width:300px; max-width:calc(100% - 2px); font:12px sans-serif; background:#fff; border:1px solid #ccc; border-radius:4px; overflow:hidden; } .lz .panel > summary { list-style:none; display:flex; align-items:center; height:32px; box-sizing:border-box; padding:0 12px; font:13px sans-serif; cursor:pointer; } .lz .panel > summary::-webkit-details-marker { display:none; } .lz .panel > summary::before { content:"\\25B8"; display:inline-block; margin-right:6px; font-size:18px; line-height:1; vertical-align:-2px; transition:transform .15s; } .lz .panel[open] > summary::before { transform:rotate(90deg); } .lz .panel[open] > summary { border-bottom:1px solid #eee; } .lz .body { box-sizing:border-box; padding:8px 12px; overflow-y:auto; } .lz .sep { border-top:1px solid #eee; margin:8px 0; } .lz .row { display:grid; grid-template-columns:82px 14px 1fr 38px; align-items:center; gap:8px; margin:6px 0; color:#444; } .lz .row input[type=range] { width:100%; } .lz input[type=range] { -webkit-appearance:none; appearance:none; height:16px; background:transparent; cursor:pointer; } .lz input[type=range]::-webkit-slider-runnable-track { height:4px; border-radius:2px; background:linear-gradient(to right, var(--col,#7c3aed) var(--pct,0%), #e6e6e6 var(--pct,0%)); } .lz input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:12px; height:12px; margin-top:-4px; border:none; border-radius:50%; background:var(--col,#7c3aed); } .lz input[type=range]::-moz-range-track { height:4px; border-radius:2px; background:#e6e6e6; } .lz input[type=range]::-moz-range-progress { height:4px; border-radius:2px; background:var(--col,#7c3aed); } .lz input[type=range]::-moz-range-thumb { width:12px; height:12px; border:none; border-radius:50%; background:var(--col,#7c3aed); } .lz .chk { justify-self:start; } .lz input[type=checkbox] { -webkit-appearance:none; appearance:none; box-sizing:border-box; width:16px; height:16px; margin:0; border:1px solid #ccc; border-radius:3px; background:#fff; cursor:pointer; position:relative; } .lz input[type=checkbox]:checked { background:var(--col,#7c3aed); border-color:var(--col,#7c3aed); } .lz input[type=checkbox]:checked::after { content:""; position:absolute; left:5px; top:2px; width:3px; height:7px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); } .lz .v { color:#777; text-align:right; } .lz .q { width:14px; height:14px; line-height:13px; text-align:center; font-size:10px; color:#999; border:1px solid #ccc; border-radius:50%; cursor:default; } .lz .pt { cursor:grab; } .lz-tip { position:fixed; z-index:20; width:230px; display:none; background:#fff; border:1px solid #ddd; border-radius:4px; padding:8px 11px; font:12px/1.45 sans-serif; color:#444; pointer-events:none; } `); // ---- controls bar ---- const bar = root.append("div").attr("class", "bar"); const playBtn = bar.append("button").text("Play"); const randBtn = bar.append("button").text("Randomize"); const laySel = bar.append("label").text("layout ").append("select"); laySel.append("option").attr("value", "circle").text("Circle"); laySel.append("option").attr("value", "scatter").property("selected", true).text("Scatter"); // ---- options panel: pinned right, overlays the chart when open ---- const panel = root.append("details").attr("class", "panel").attr("open", true); panel.append("summary").text("Options"); const body = panel.append("div").attr("class", "body").style("max-height", (H - 44) + "px"); const optBox = body.append("div"); body.append("div").attr("class", "sep"); const parBox = body.append("div"); // ---- svg layers ---- const svg = root.append("svg").attr("width", W).attr("height", H); const guide = svg.append("circle").attr("fill", "none").attr("stroke", "#e0e0e0").attr("stroke-dasharray", "4 4"); const unusedPath = svg.append("path").attr("fill", "none").attr("stroke", C.idle).attr("stroke-width", 1.2).attr("stroke-dasharray", "3 4"); const skelPath = svg.append("path").attr("fill", "none").attr("stroke", C.trunk).attr("stroke-width", 2).attr("stroke-linecap", "round"); const blackPath = svg.append("path").attr("fill", "none").attr("stroke", C.branch).attr("stroke-width", 1.2).attr("stroke-linecap", "round"); const curves = svg.append("path").attr("fill", "none").attr("stroke", C.spline).attr("stroke-opacity", 0.85).attr("stroke-width", 1.6).attr("stroke-linecap", "round"); const gPts = svg.append("g"); const tip = d3.select(document.body).append("div").attr("class", "lz-tip"); // ---- geometry: play area is a left-justified square; scatter remembers radii ---- const A = Math.min(W, H); // left square side const circle = () => ({ cx: A / 2, cy: H / 2, r: 0.40 * A - 20 }); // random point, squished from the square toward its inscribed circle (factor // = max|cosθ|,|sinθ|) so orbiting a corner point never leaves the view const rndPt = () => { const c = circle(), m = 40; const x = m + Math.random() * (A - 2 * m), y = m + Math.random() * (H - 2 * m); const dx = x - c.cx, dy = y - c.cy, r = hyp(dx, dy) || 1; const f = Math.max(Math.abs(dx), Math.abs(dy)) / r; return { x: c.cx + dx * f, y: c.cy + dy * f }; }; const setHome = (p) => { const c = circle(); p.__r = hyp(p.x - c.cx, p.y - c.cy); }; const onCircle = (x, y) => { const c = circle(), dx = x - c.cx, dy = y - c.cy, d = hyp(dx, dy) || 1; return { x: c.cx + c.r * dx / d, y: c.cy + c.r * dy / d }; }; // ---- points: n sources + 1 target, starting in scatter positions ---- let LAYOUT = "scatter", showSkel = true; const src = d3.range(n).map(rndPt); const tgt = rndPt(); { // trunk starts 75% out from center (random angle) so every load animates well const c = circle(), rad = 0.75 * (A / 2), a = Math.random() * 2 * Math.PI; tgt.x = c.cx + rad * Math.cos(a); tgt.y = c.cy + rad * Math.sin(a); } const pts = [...src, tgt]; for (const p of pts) setHome(p); // remember scatter radius let line = d3.line().curve(d3.curveBundle.beta(cfg.beta)); // rebuilt on beta const syncGuide = () => { const c = circle(); guide.attr("cx", c.cx).attr("cy", c.cy).attr("r", c.r); }; syncGuide(); guide.attr("display", "none"); // shown only in circle mode // ---- animation / render state ---- let playing = false, morphing = false, rafId = null, relaxId = 0, playT = 0; // run the algorithm and push everything except the curve into the svg function render() { const c = circle(); const out = R.frame(src, tgt, { x: c.cx, y: c.cy }, cfg, line); unusedPath.attr("d", out.unusedD); skelPath.attr("d", out.usedD); blackPath.attr("d", out.blackD); circles.attr("cx", d => d.x).attr("cy", d => d.y); return out; } function draw() { const out = render(); curves.attr("d", out.curveD); if (!playing && out.lag > 0.05 && !relaxId) // let the easing settle relaxId = requestAnimationFrame(() => { relaxId = 0; draw(); }); } // ---- draggable points; release snaps back to the rim in circle mode ---- const drag = d3.drag() .on("start", function (e, d) { d.__hold = true; curves.interrupt("morph"); d3.select(this).interrupt("settle"); }) .on("drag", (e, d) => { // clamp within the whole chart const pad = d === tgt ? 9 : 7; d.x = Math.max(pad, Math.min(W - pad, e.x)); d.y = Math.max(pad, Math.min(H - pad, e.y)); draw(); }) .on("end", function (e, d) { setHome(d); if (LAYOUT === "scatter") { d.__hold = false; return; } const f = { x: d.x, y: d.y }, t = onCircle(d.x, d.y); d3.select(this).transition("settle").duration(400).ease(d3.easeCubicOut) .tween("pos", () => k => { d.x = f.x + (t.x - f.x) * k; d.y = f.y + (t.y - f.y) * k; draw(); }) .on("end", () => { d.__hold = false; }); }); let circles; function rebuildPts() { circles = gPts.selectAll("circle").data(pts).join("circle") .attr("class", "pt") .attr("r", (d, i) => i < src.length ? 7 : 9) .attr("fill", (d, i) => i < src.length ? C.leaf : C.root) .attr("stroke", "#fff").attr("stroke-width", 1.5) .call(drag); } rebuildPts(); // ---- orbit speeds: trunk = one turn / 15s, leaves creep at <= 1/10 ---- const OMEGA = 2 * Math.PI / 15000; const leafSpeed = () => ((Math.random() + Math.random() + Math.random()) * 2 / 3 - 1) * OMEGA / 10; function setCount(k) { k = Math.max(4, Math.min(64, Math.round(k))); while (src.length > k) src.pop(); while (src.length < k) { const p = rndPt(); setHome(p); if (LAYOUT === "circle") { const q = onCircle(p.x, p.y); p.x = q.x; p.y = q.y; } if (playing) p.__w = leafSpeed(); src.push(p); } n = k; pts.length = 0; pts.push(...src, tgt); R.reset(); // control-point shape changed rebuildPts(); } // ---- tween points to new spots, rotating them if playback is on ---- function morphTo(to, dur, ease) { const from = pts.map(p => ({ x: p.x, y: p.y })); const ang = pts.map(() => 0); let last = performance.now(); morphing = true; curves.transition("morph").duration(dur).ease(ease || d3.easeCubicOut) .attrTween("d", () => k => { const now = performance.now(), dt = Math.min(100, now - last); last = now; const c = circle(); for (let i = 0; i < pts.length; i++) { const p = pts[i]; const bx = from[i].x + (to[i].x - from[i].x) * k; const by = from[i].y + (to[i].y - from[i].y) * k; const dx = bx - c.cx, dy = by - c.cy; if (playing && !p.__hold) ang[i] += (p.__w || 0) * c.r / (hyp(dx, dy) || 1) * dt; const ca = Math.cos(ang[i]), sa = Math.sin(ang[i]); p.x = c.cx + dx * ca - dy * sa; p.y = c.cy + dx * sa + dy * ca; } return render().curveD; }) .on("end interrupt", () => { morphing = false; }); } laySel.on("change", function () { LAYOUT = this.value || "circle"; guide.attr("display", LAYOUT === "circle" ? null : "none"); circles.interrupt("settle"); const c = circle(); if (LAYOUT === "circle") morphTo(pts.map(p => onCircle(p.x, p.y)), 500); else morphTo(pts.map(p => { const dx = p.x - c.cx, dy = p.y - c.cy, d = hyp(dx, dy) || 1; const r = p.__r != null ? p.__r : d; return { x: c.cx + r * dx / d, y: c.cy + r * dy / d }; }), 500); }); // ---- playback: every point orbits the center at constant arc speed ---- function orbit(now) { if (!playing) return; const dt = Math.min(100, now - playT); playT = now; if (!morphing) { // a morph drives its own frames const c = circle(); for (const p of pts) { if (p.__hold) continue; const dx = p.x - c.cx, dy = p.y - c.cy, r = hyp(dx, dy); const w = p.__w * c.r / (r || 1); // angular ∝ 1/r: same arc as on the rim const th = Math.atan2(dy, dx) + w * dt; p.x = c.cx + r * Math.cos(th); p.y = c.cy + r * Math.sin(th); } draw(); } rafId = requestAnimationFrame(orbit); } function stop() { if (!playing) return; playing = false; cancelAnimationFrame(rafId); playBtn.text("Play"); } function start() { if (playing) return; playing = true; playBtn.text("Pause"); curves.interrupt("morph"); circles.interrupt("settle"); for (let i = 0; i < pts.length; i++) { pts[i].__hold = false; pts[i].__w = i === src.length ? OMEGA * (Math.random() < 0.5 ? -1 : 1) : leafSpeed(); } playT = performance.now(); rafId = requestAnimationFrame(orbit); } playBtn.on("click", () => { playing ? stop() : start(); }); randBtn.on("click", () => { circles.interrupt("settle"); pts.forEach(p => { p.__hold = false; }); const c = circle(); morphTo(pts.map(p => { const raw = rndPt(); p.__r = hyp(raw.x - c.cx, raw.y - c.cy); return LAYOUT === "circle" ? onCircle(raw.x, raw.y) : raw; }), 5000, d3.easeCubicInOut); }); // ---- sliders: {get,set} default to cfg[k]; chk = checkbox; col = accent from C ---- const OPTS = [ { lab: "leaf count", col: C.leaf, min: 4, max: 64, step: 1, dp: 0, get: () => n, set: v => setCount(v), tip: "Number of source points feeding the tree." }, { lab: "bundle", col: C.spline, min: 0, max: 1, step: 0.01, dp: 2, get: () => cfg.beta, set: v => { cfg.beta = v; line = d3.line().curve(d3.curveBundle.beta(v)); }, tip: "Spline tightness; 1 hugs the tree, 0 is straight chords." }, { lab: "curve points",col: C.spline, min: 0, max: 24, step: 1, dp: 0, get: () => cfg.ctrl, set: v => { cfg.ctrl = Math.round(v); R.reset(); }, tip: "Control points sampled along each path." }, { lab: "skeleton", col: C.trunk, chk: true, get: () => showSkel, set: v => { showSkel = v; const d = v ? null : "none"; unusedPath.attr("display", d); skelPath.attr("display", d); blackPath.attr("display", d); }, tip: "Show the underlying skeleton, trunk and vessels." } ]; const PARAMS = [ { k: "trunk", col: C.root, lab: "trunk offset", min: 0, max: 1, step: 0.005, dp: 3, tip: "Root anchor: fraction from target toward center." }, { k: "leaf", col: C.leaf, lab: "leaf offset", min: 0, max: 0.5, step: 0.005, dp: 3, tip: "Per-source inward stem before bundling." }, { k: "samples", col: C.spline, lab: "samples", min: 0, max: 24, step: 1, dp: 0, tip: "Jittered pipeline replicas averaged per curve." }, { k: "jitter", col: C.branch, lab: "jitter px", min: 0, max: 50, step: 1, dp: 0, tip: "Replica perturbation radius / blend-zone width." }, { k: "smooth", col: C.spline, lab: "smooth ms", min: 0, max: 300, step: 5, dp: 0, tip: "Temporal easing time constant." }, { k: "bias", col: C.root, lab: "target bias", min: 0, max: 0.95, step: 0.05, dp: 2, tip: "A*-style pull toward the target on each segment." }, { k: "attract", col: C.trunk, lab: "attraction", min: 0, max: 1, step: 0.02, dp: 2, tip: "Stream-to-stream pull during the skeleton march." }, { k: "axis", col: C.trunk, lab: "axis pull", min: 0, max: 1, step: 0.005, dp: 3, tip: "Pull toward the centroid -> target axis." }, { k: "sigma", col: C.trunk, lab: "kernel range", min: 0, max: 1, step: 0.01, dp: 2, tip: "Attraction reach, as a fraction of layout radius." }, { k: "fast", col: C.trunk, lab: "fast kernel", chk: true, tip: "Skip the exp() kernel beyond 2.5 sigma (speed)." }, { k: "stiff", col: C.trunk, lab: "stiffness", min: 0, max: 1.5, step: 0.05, dp: 2, tip: "How much charge resists turning." }, { k: "soft", col: C.branch, lab: "attach soft", min: 0, max: 30, step: 1, dp: 0, tip: "Softmax temperature over competing attachments." } ]; function buildRows(box, specs) { for (const s of specs) { const get = s.get || (() => cfg[s.k]); const set = s.set || (v => cfg[s.k] = v); const row = box.append("label").attr("class", "row"); row.append("span").text(s.lab); row.append("span").attr("class", "q").text("?") .on("mouseenter", function () { // tooltip beside the ?, opening left const r = this.getBoundingClientRect(); tip.text(s.tip).style("display", "block"); const nn = tip.node(); let x = r.left - nn.offsetWidth - 12; if (x < 8) x = r.right + 12; // flip right if it would clip let y = Math.max(8, Math.min(window.innerHeight - nn.offsetHeight - 8, r.top + r.height / 2 - 19)); tip.style("left", x + "px").style("top", y + "px"); }) .on("mouseleave", () => tip.style("display", "none")); if (s.chk) { row.append("input").attr("type", "checkbox").attr("class", "chk") .style("--col", s.col) .property("checked", get()) .on("change", function () { set(this.checked); draw(); }); row.append("span").attr("class", "v"); } else { const out = row.append("input").attr("type", "range") .style("--col", s.col) .attr("min", s.min).attr("max", s.max).attr("step", s.step).attr("value", get()); const pct = v => ((v - s.min) / (s.max - s.min)) * 100 + "%"; // filled portion out.style("--pct", pct(+get())); const val = row.append("span").attr("class", "v").text((+get()).toFixed(s.dp)); out.on("input", function () { this.style.setProperty("--pct", pct(+this.value)); set(+this.value); val.text((+this.value).toFixed(s.dp)); draw(); }); } } } buildRows(optBox, OPTS); buildRows(parBox, PARAMS); draw(); start(); // playing by default // Observable cleanup: stop loops and remove the body-level tooltip on re-run invalidation.then(() => { stop(); cancelAnimationFrame(relaxId); curves.interrupt("morph"); tip.remove(); }); return root.node(); }2d:T5c5,// Initial settings for the chart, and the options config = ({ beta: 0.85, // bundle: spline tightness; 1 hugs the tree, 0 is straight chords ctrl: 8, // curve points: intermediate control points per path trunk: 0.15, // trunk offset: root anchor, fraction from target toward center leaf: 0, // leaf offset: per-source inward stem, fraction toward center samples: 24, // samples: jittered pipeline replicas averaged per curve jitter: 10, // jitter px: replica perturbation radius / blend-zone width smooth: 45, // smooth ms: temporal easing time constant bias: 0.5, // target bias: A*-style pull toward the target on each segment attract: 0.30, // attraction: stream-to-stream pull during the skeleton march axis: 0.05, // axis pull: pull toward the (centroid -> target) axis sigma: 0.25, // kernel range: attraction reach, fraction of the layout radius fast: true, // fast kernel: skip the exp() kernel beyond 2.5 sigma (speed) stiff: 0.6, // stiffness: how much charge resists turning soft: 8, // attach soft: softmax temperature over competing attachments (px) levels: 150, // march resolution for the main run repLevels: 80, // coarser resolution for the jittered replicas step: 12, // skeleton sampling spacing (px) minSave: 0.5, // px of length a merge must save to be accepted softCap: 12 // max blended attachment candidates })2e:T4901,router = function () { const hyp = (dx, dy) => Math.sqrt(dx * dx + dy * dy); // hypot is ~10x slower const GOLD = 2.39996322972865332; // decorrelates replica jitter phases // ===== stage 1: Lichtenberg skeleton ===== // level-set charge march: streams sweep inward, bend toward neighbors, and // fuse when they touch, recording a junction tree with per-edge charge. function skeleton(src, T, levels, c) { const nodes = [], edges = []; const items = src.map(p => { const dx = p.x - T.x, dy = p.y - T.y; const id = nodes.push({ x: p.x, y: p.y }) - 1; return { r: hyp(dx, dy), theta: Math.atan2(dy, dx), charge: 1, x: p.x, y: p.y, node: id, thetaNext: 0 }; }).sort((a, b) => b.r - a.r); const tid = nodes.push({ x: T.x, y: T.y }) - 1; const Rmax = items[0].r; if (Rmax < 1) { // all sources on target for (const s of items) edges.push({ a: s.node, b: tid, charge: s.charge }); return { nodes, edges, tid }; } const STEP = Math.max(3, Rmax / (levels || c.levels)); const SIG2 = Math.pow(Math.max(1, Rmax * c.sigma), 2); const MAXLAT = 1.2 * STEP, MERGE2 = Math.pow(2.5 * STEP, 2); // axis unit vector: from target through the source centroid let cx = 0, cy = 0; for (const p of src) { cx += p.x; cy += p.y; } cx /= src.length; cy /= src.length; const axD = hyp(cx - T.x, cy - T.y) || 1e-9; const axX = (cx - T.x) / axD, axY = (cy - T.y) / axD; const axW = Math.min(1, axD / (0.25 * Rmax)); // fades when surrounded const active = []; let idx = 0, r = Rmax; while (r > 0) { const rN = Math.max(0, r - STEP); while (idx < items.length && items[idx].r >= rN) active.push(items[idx++]); const CUT2 = 6.25 * SIG2; // kernel < 0.2% past 2.5s for (const o of active) o.sq = Math.sqrt(o.charge); for (const s of active) { const rx = s.x - T.x, ry = s.y - T.y; const rl = hyp(rx, ry) || 1; const tx = -ry / rl, ty = rx / rl; // lateral (tangent) dir let fx = 0, fy = 0; for (const o of active) { // neighbor attraction if (o === s) continue; const dx = o.x - s.x, dy = o.y - s.y; const d2 = dx * dx + dy * dy; if (c.fast && d2 > CUT2) continue; const k = Math.exp(-d2 / SIG2) * o.sq; fx += k * dx; fy += k * dy; } const proj = rx * axX + ry * axY; // pull onto the axis fx += axW * c.axis * (T.x + proj * axX - s.x); fy += axW * c.axis * (T.y + proj * axY - s.y); let lat = (fx * tx + fy * ty) * c.attract / Math.pow(s.charge, c.stiff); lat = Math.max(-MAXLAT, Math.min(MAXLAT, lat)); s.thetaNext = s.theta + lat / Math.max(rN, 4); } for (const s of active) { // step to the new ring s.theta = s.thetaNext; s.x = T.x + rN * Math.cos(s.theta); s.y = T.y + rN * Math.sin(s.theta); } let fused = true; // fuse touching streams while (fused && active.length > 1) { fused = false; outer: for (let i = 0; i < active.length; i++) for (let j = i + 1; j < active.length; j++) { const a = active[i], b = active[j]; const dx = a.x - b.x, dy = a.y - b.y; if (dx * dx + dy * dy < MERGE2) { const vx = a.charge * Math.cos(a.theta) + b.charge * Math.cos(b.theta); const vy = a.charge * Math.sin(a.theta) + b.charge * Math.sin(b.theta); const th = Math.atan2(vy, vx); const jx = T.x + rN * Math.cos(th), jy = T.y + rN * Math.sin(th); const jid = nodes.push({ x: jx, y: jy }) - 1; edges.push({ a: a.node, b: jid, charge: a.charge }, { a: b.node, b: jid, charge: b.charge }); a.charge += b.charge; a.theta = th; a.x = jx; a.y = jy; a.node = jid; active.splice(j, 1); fused = true; break outer; } } } r = rN; } for (const s of active) edges.push({ a: s.node, b: tid, charge: s.charge }); return { nodes, edges, tid }; } // index charge>=2 edges and sample attachment candidates as flat arrays function prep(sk, T, c) { const { nodes, edges, tid } = sk; const outEdge = new Array(nodes.length).fill(-1); edges.forEach((e, i) => { outEdge[e.a] = i; e.minT = Infinity; }); const skelIdx = []; // edges carrying >=2 paths let total = 0; edges.forEach((e, i) => { if (e.charge >= 2) { const A = nodes[e.a], B = nodes[e.b]; e.len = hyp(B.x - A.x, B.y - A.y); total += e.len; skelIdx.push(i); } }); // candidates: the target plus points sampled along the skeleton const cap = 260, spacing = Math.max(c.step, total / 220); const sx = new Float64Array(cap), sy = new Float64Array(cap), sp = new Float64Array(cap), se = new Int32Array(cap), st = new Float64Array(cap); let m = 0; sx[0] = T.x; sy[0] = T.y; sp[0] = 0; se[0] = -1; st[0] = 0; m = 1; for (const i of skelIdx) { const e = edges[i], A = nodes[e.a], B = nodes[e.b]; const K = Math.max(1, Math.round(e.len / spacing)); for (let k = 0; k <= K && m < cap; k++) { const t = k / K; const x = A.x + (B.x - A.x) * t, y = A.y + (B.y - A.y) * t; sx[m] = x; sy[m] = y; sp[m] = hyp(x - T.x, y - T.y); se[m] = i; st[m] = t; m++; } } return { outEdge, skelIdx, S: { sx, sy, sp, se, st, m } }; } // ===== stage 2: vascular routing ===== // cheapest biased connection from (x,y) to any candidate -> [cost, index] function attach(x, y, S, c) { const { sx, sy, sp, m } = S; let bc = Infinity, bi = 0; for (let i = 0; i < m; i++) { const dx = x - sx[i], dy = y - sy[i]; const cost = Math.sqrt(dx * dx + dy * dy) + c.bias * sp[i]; if (cost < bc) { bc = cost; bi = i; } } return [bc, bi]; } // trial Steiner junction for A,B: Weiszfeld toward A, B, best attachment, // and a bias-weighted pull to the target. function junction(A, B, T, S, c) { const ax = A.x, ay = A.y, bx = B.x, by = B.y, tx = T.x, ty = T.y; let px = (ax + bx) / 2, py = (ay + by) / 2; let qi = attach(px, py, S, c)[1], qx = S.sx[qi], qy = S.sy[qi]; for (let o = 0; o < 2; o++) { for (let it = 0; it < 6; it++) { let sw = 0, wx = 0, wy = 0, d, iw; d = hyp(px - ax, py - ay); iw = 1 / Math.max(1e-9, d); sw += iw; wx += iw * ax; wy += iw * ay; d = hyp(px - bx, py - by); iw = 1 / Math.max(1e-9, d); sw += iw; wx += iw * bx; wy += iw * by; d = hyp(px - qx, py - qy); iw = 1 / Math.max(1e-9, d); sw += iw; wx += iw * qx; wy += iw * qy; d = hyp(px - tx, py - ty); iw = c.bias / Math.max(1e-9, d); sw += iw; wx += iw * tx; wy += iw * ty; px = wx / sw; py = wy / sw; } qi = attach(px, py, S, c)[1]; qx = S.sx[qi]; qy = S.sy[qi]; } const attCost = hyp(px - qx, py - qy) + c.bias * S.sp[qi]; const cost = hyp(ax - px, ay - py) + hyp(bx - px, by - py) + c.bias * hyp(px - tx, py - ty) + attCost; return { px, py, qi, attCost, cost }; } // flow rides from sample qi downstream to the target: mark skeleton used function markUsed(S, qi, edges, outEdge, tid) { const ei = S.se[qi]; if (ei < 0) return; // attached to the target const e = edges[ei]; e.minT = Math.min(e.minT, S.st[qi]); let cur = e.b, guard = 0; while (cur !== tid && guard++ < edges.length + 1) { const oi = outEdge[cur]; if (oi < 0) break; const oe = edges[oi]; if (oe.minT === 0) break; // downstream already done oe.minT = 0; cur = oe.b; } } // greedy agglomerative merge: fuse the pair saving the most length, the // junction becomes a new item, repeat until no merge helps. function route(src, T, S, edges, outEdge, tid, mark, c) { const n = src.length; const items = src.map(p => ({ x: p.x, y: p.y, alive: true, bnode: { x: p.x, y: p.y, parent: null } })); const srcNodes = items.map(it => it.bnode); // per-source chain entry for (const it of items) { const a = attach(it.x, it.y, S, c); it.attCost = a[0]; it.attIdx = a[1]; } const P = [...Array(n)].map(() => new Array(n).fill(null)); const KNN = 8; // only kNN pairs may merge const allow = [...Array(n)].map(() => new Array(n).fill(false)); const bd = new Float64Array(KNN), bj = new Int32Array(KNN); const link = (i) => { // rebuild i's neighbors let cnt = 0; for (let j = 0; j < n; j++) { if (j === i || !items[j].alive) continue; const dx = items[i].x - items[j].x, dy = items[i].y - items[j].y; const d2 = dx * dx + dy * dy; if (cnt < KNN) { let k = cnt++; while (k > 0 && bd[k - 1] > d2) { bd[k] = bd[k - 1]; bj[k] = bj[k - 1]; k--; } bd[k] = d2; bj[k] = j; } else if (d2 < bd[KNN - 1]) { let k = KNN - 1; while (k > 0 && bd[k - 1] > d2) { bd[k] = bd[k - 1]; bj[k] = bj[k - 1]; k--; } bd[k] = d2; bj[k] = j; } } for (let k = 0; k < cnt; k++) { const j = bj[k]; allow[Math.min(i, j)][Math.max(i, j)] = true; } }; for (let i = 0; i < n; i++) link(i); // triangle-inequality prune: skip the solve when no saving is possible const calc = (i, j) => { const A = items[i], B = items[j]; if (hyp(A.x - B.x, A.y - B.y) >= A.attCost + B.attCost) P[i][j] = { cost: Infinity }; else P[i][j] = junction(A, B, T, S, c); }; const blackSegs = [], blackJuncs = []; for (;;) { let bi = -1, bpair = -1, bs = c.minSave; for (let i = 0; i < n; i++) { if (!items[i].alive) continue; for (let j = i + 1; j < n; j++) { if (!items[j].alive || !allow[i][j]) continue; if (!P[i][j]) calc(i, j); // lazy solve const sv = items[i].attCost + items[j].attCost - P[i][j].cost; if (sv > bs) { bs = sv; bi = i; bpair = j; } } } if (bi < 0) break; const mj = P[bi][bpair]; blackSegs.push([items[bi].x, items[bi].y, mj.px, mj.py], [items[bpair].x, items[bpair].y, mj.px, mj.py]); blackJuncs.push([mj.px, mj.py]); const jn = { x: mj.px, y: mj.py, parent: null }; items[bi].bnode.parent = jn; items[bpair].bnode.parent = jn; items[bpair].alive = false; items[bi] = { x: mj.px, y: mj.py, alive: true, attCost: mj.attCost, attIdx: mj.qi, bnode: jn }; for (let k = 0; k < n; k++) { if (k < bi) P[k][bi] = null; else P[bi][k] = null; } link(bi); } for (const it of items) { // survivors attach direct if (!it.alive) continue; it.bnode.attIdx = it.attIdx; blackSegs.push([it.x, it.y, S.sx[it.attIdx], S.sy[it.attIdx]]); if (mark) markUsed(S, it.attIdx, edges, outEdge, tid); } return { blackSegs, blackJuncs, srcNodes }; } // ===== stage 3: bundle control points ===== // resample a polyline into ctrl+2 evenly spaced control points function ctrlPts(poly, c) { const p = [poly[0]]; for (let i = 1; i < poly.length; i++) { const q = poly[i], l = p[p.length - 1]; if (hyp(q[0] - l[0], q[1] - l[1]) > 0.25) p.push(q); } if (p.length === 1) p.push([p[0][0], p[0][1]]); const cum = [0]; for (let i = 1; i < p.length; i++) cum.push(cum[i - 1] + hyp(p[i][0] - p[i - 1][0], p[i][1] - p[i - 1][1])); const L = cum[cum.length - 1]; const out = [p[0]]; for (let k = 1; k <= c.ctrl; k++) { const s = L * k / (c.ctrl + 1); let i = 1; while (i < p.length - 1 && cum[i] < s) i++; const t = (s - cum[i - 1]) / Math.max(1e-9, cum[i] - cum[i - 1]); out.push([p[i - 1][0] + (p[i][0] - p[i - 1][0]) * t, p[i - 1][1] + (p[i][1] - p[i - 1][1]) * t]); } out.push(poly[poly.length - 1]); // true endpoint return out; } // soft attachment: blend control points over near-tied candidates with // softmax weights so a point floats between branches instead of snapping. function blend(bn, S, sk, outEdge, cache, endPt, startPt, c) { const prefix = []; let cur = bn; for (;;) { prefix.push([cur.x, cur.y]); if (cur.parent) cur = cur.parent; else break; } let cand = cache.get(cur); // shared per terminal if (!cand) { const { sx, sy, sp, m } = S; const tau = Math.max(0.01, c.soft); // tau -> 0 = hard argmin const cut = 2.5 * tau; const costs = new Float64Array(m); let mn = Infinity; for (let s = 0; s < m; s++) { const dx = cur.x - sx[s], dy = cur.y - sy[s]; const cost = Math.sqrt(dx * dx + dy * dy) + c.bias * sp[s]; costs[s] = cost; if (cost < mn) mn = cost; } cand = []; for (let s = 0; s < m; s++) if (costs[s] - mn < cut) cand.push([s, Math.exp(-(costs[s] - mn) / tau)]); if (cand.length > c.softCap) { cand.sort((a, b) => b[1] - a[1]); cand.length = c.softCap; } cache.set(cur, cand); } const acc = Array.from({ length: c.ctrl + 2 }, () => [0, 0]); let wsum = 0; for (const [s, w] of cand) { const poly = startPt ? [startPt, ...prefix] : prefix.slice(); if (S.se[s] >= 0) { // ride the skeleton down poly.push([S.sx[s], S.sy[s]]); let nid = sk.edges[S.se[s]].b, guard = 0; while (guard++ < sk.edges.length + 1) { poly.push([sk.nodes[nid].x, sk.nodes[nid].y]); if (nid === sk.tid) break; const oi = outEdge[nid]; if (oi < 0) break; nid = sk.edges[oi].b; } } else { poly.push([sk.nodes[sk.tid].x, sk.nodes[sk.tid].y]); } if (endPt) poly.push(endPt); // trunk hop to true target const cp = ctrlPts(poly, c); for (let j = 0; j < c.ctrl + 2; j++) { acc[j][0] += w * cp[j][0]; acc[j][1] += w * cp[j][1]; } wsum += w; } const inv = 1 / wsum; return acc.map(p => [p[0] * inv, p[1] * inv]); } // one pipeline pass: skeleton -> routing for a given source layout function once(src, T, mark, levels, c) { const sk = skeleton(src, T, levels, c); const pr = prep(sk, T, c); const rt = route(src, T, pr.S, sk.edges, pr.outEdge, sk.tid, mark, c); return { sk, pr, rt }; } // ===== per-frame state: temporal easing across calls ===== let ema = null, emaT = 0, lag = 0; function frame(src, tgt, center, c, line) { // root anchor + leaf anchors: branches come inboard, one shared trunk const anchor = { x: tgt.x + (center.x - tgt.x) * c.trunk, y: tgt.y + (center.y - tgt.y) * c.trunk }; const leafA = src.map(p => ({ x: p.x + (center.x - p.x) * c.leaf, y: p.y + (center.y - p.y) * c.leaf })); // main run on true positions: the displayed tree + used-skeleton marks const base = once(leafA, anchor, true, 0, c); const sk = base.sk, skelIdx = base.pr.skelIdx; const n = src.length; const runs = []; const collect = (run) => { const cache = new Map(), arr = new Array(n), endPt = [tgt.x, tgt.y]; for (let i = 0; i < n; i++) arr[i] = blend(run.rt.srcNodes[i], run.pr.S, run.sk, run.pr.outEdge, cache, endPt, [src[i].x, src[i].y], c); runs.push(arr); }; collect(base); // ensemble: rerun the whole pipeline on Fibonacci-disk jittered sources const j = src.map(() => ({ x: 0, y: 0 })); for (let k = 0; k < c.samples; k++) { const rad = c.jitter * Math.sqrt((k + 0.5) / c.samples); for (let i = 0; i < n; i++) { const ph = k * GOLD + i * 2.6651441426902251; j[i].x = leafA[i].x + rad * Math.cos(ph); j[i].y = leafA[i].y + rad * Math.sin(ph); } collect(once(j, anchor, false, c.repLevels, c)); } // average the replicas' control points const cnt = runs.length, inv = 1 / cnt; const avg = src.map((_, i) => Array.from({ length: c.ctrl + 2 }, (_, jj) => { let x = 0, y = 0; for (let r = 0; r < cnt; r++) { x += runs[r][i][jj][0]; y += runs[r][i][jj][1]; } return [x * inv, y * inv]; })); // temporal easing: frame-rate-independent EMA on interior control points const tNow = performance.now(); const alpha = (ema && c.smooth >= 1) ? 1 - Math.exp(-(tNow - emaT) / c.smooth) : 1; emaT = tNow; if (!ema) ema = avg; else { lag = 0; for (let i = 0; i < n; i++) for (let jj = 1; jj < c.ctrl + 1; jj++) { ema[i][jj][0] += (avg[i][jj][0] - ema[i][jj][0]) * alpha; ema[i][jj][1] += (avg[i][jj][1] - ema[i][jj][1]) * alpha; lag = Math.max(lag, Math.abs(avg[i][jj][0] - ema[i][jj][0]), Math.abs(avg[i][jj][1] - ema[i][jj][1])); } } const fin = ema; // build path strings; pin exact endpoints so curves stay on the dots const seg = (x1, y1, x2, y2) => "M" + x1.toFixed(1) + "," + y1.toFixed(1) + "L" + x2.toFixed(1) + "," + y2.toFixed(1); let curveD = ""; for (let i = 0; i < n; i++) { const cp = fin[i]; cp[0] = [src[i].x, src[i].y]; cp[c.ctrl + 1] = [tgt.x, tgt.y]; curveD += line(cp); } let usedD = "", unusedD = "", blackD = ""; for (const i of skelIdx) { // solid = carries flow const e = sk.edges[i], A = sk.nodes[e.a], B = sk.nodes[e.b]; if (e.minT === Infinity) unusedD += seg(A.x, A.y, B.x, B.y); else if (e.minT <= 0) usedD += seg(A.x, A.y, B.x, B.y); else { const mx = A.x + (B.x - A.x) * e.minT, my = A.y + (B.y - A.y) * e.minT; unusedD += seg(A.x, A.y, mx, my); usedD += seg(mx, my, B.x, B.y); } } for (const s of base.rt.blackSegs) blackD += seg(s[0], s[1], s[2], s[3]); usedD += seg(anchor.x, anchor.y, tgt.x, tgt.y); // the shared trunk for (let i = 0; i < n; i++) // the leaf stems blackD += seg(src[i].x, src[i].y, leafA[i].x, leafA[i].y); return { usedD, unusedD, blackD, curveD, lag }; } return { frame, reset() { ema = null; } }; }2f:[{"id":"2d42222bfeb2c1be9bd64923afef8b6b9c93ad7ad487556b4742e713e7c1a173d8a91512ad5c005af2a2f17fa32f8d14aa10a1777c44b731172385f1479862af","href":"https://static.observableusercontent.com/files/2d42222bfeb2c1be9bd64923afef8b6b9c93ad7ad487556b4742e713e7c1a173d8a91512ad5c005af2a2f17fa32f8d14aa10a1777c44b731172385f1479862af","name":"image@2.png","type":"image/png","lastModified":1783978264019.929,"size":5755956},{"id":"70ec46ed4f3e00af0fd73a5f23c4e54de8d35280056894335f421625261f87b22e12efce2090cb7c7366fc49f3c9d72d13e7046a875745cae3a7b818d7d543be","href":"https://static.observableusercontent.com/files/70ec46ed4f3e00af0fd73a5f23c4e54de8d35280056894335f421625261f87b22e12efce2090cb7c7366fc49f3c9d72d13e7046a875745cae3a7b818d7d543be","name":"image@1.png","type":"image/png","lastModified":1783978047144.649,"size":2461388},{"id":"6d9830e033d03a3ba254e12b9b43b53dd40b74029840f5b03718b1e0b27b96dcb3c345a14f6b20ba7690d38d4a19ff319e9d31f6d0943b026bbce142715bb6bc","href":"https://static.observableusercontent.com/files/6d9830e033d03a3ba254e12b9b43b53dd40b74029840f5b03718b1e0b27b96dcb3c345a14f6b20ba7690d38d4a19ff319e9d31f6d0943b026bbce142715bb6bc","name":"image.png","type":"image/png","lastModified":1783977930998.675,"size":429769},{"id":"f1ecb85eb6f6df7802a713cbaba47dcee522c048a2a34c7dfc404af55233dcfeb92eb8a812aa2ed2a9514c9421b7e74fdbb3f86b3f4d0bf453d77ee7755b0d50","href":"https://static.observableusercontent.com/files/f1ecb85eb6f6df7802a713cbaba47dcee522c048a2a34c7dfc404af55233dcfeb92eb8a812aa2ed2a9514c9421b7e74fdbb3f86b3f4d0bf453d77ee7755b0d50","name":"image@4.png","type":"image/png","lastModified":1783978753614.2,"size":482427}] 2a:{"title":"Lichtenberg Edge Bundling","cells":[{"id":0,"value":"# Lichtenberg Edge Bundling\n## Spatial edge bundling inspired by lighting, erosion and blood vessels","pinned":false,"hidden":false,"mode":"md"},{"id":70,"value":"Drag nodes or play/pause animation to explore edge bundling. Turn the skeleton check box off to see the production version.","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"I was inspired by Lichtenberg figures, which are caused by distributed charges flowing together in streams that discharge a surface or volume.\n\nThe `router()` function creates edge bundling in 3 steps:\n\n1. **Lichtenberg skeleton:** Simulate every leaf marching inward toward the root; where streams meet, they merge, tracing out a branching tree. Keep only the branches carrying two or more leaves.\n2. **Vascular routing:** Connect each leaf onto that skeleton by the shortest branching path, so nearby leaves join and travel together, like blood vessels or river tributaries.\n3. **Smoothing into curves:** Place evenly spaced points along each path; soften each connection by averaging over small random jitters to create smooth transition when slightly moving a point would snap from one branch to another. Then draw a B-spline from each leaf, through its points, to the root.\n\n\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"Lichtenberg discharge in acrylic:

\n\nScars left after a lightning strike:

\n\nSand erosion pattern:

\n\nBlood vessels on retina:

","pinned":false,"hidden":false,"mode":"md"}],"files":"$W2f","stdlib":"1","titling":"auto"}