main = { attachCell; // ============================================================ // GEOMETRY CONSTANTS // // The chart lives in an SVG viewBox of size 2·halfW × 2·halfH. // The polar center coincides with the chart's vertical mid-line // and the column/stack baseline (barCenterZ); column bars sit on // a baseline at barBottomZ (= barCenterZ + w/2). // // (s, r) are the bend's source coordinates: s ∈ [-1, +1] runs along // the strip, r is cross-strip distance from the spine. r = +w/2 is // BELOW the spine in screen-space (column bar bottom); r = -w/2 is // ABOVE (column bar top). // ============================================================ const w = 0.5; const margin = 0.1; const halfW = Math.PI + margin; const halfH = Math.PI + margin; const viewBoxW = 2 * halfW; const viewBoxH = 2 * halfH; const barCenterZ = halfH; const barBottomZ = barCenterZ + w / 2; const polarCx = halfW; const polarCy = barCenterZ; const DONUT_INNER = 1 - w / 2; const TOTAL_AREA = 2 * Math.PI * w; const f4 = (n) => n.toFixed(4); const lerp = (a, b, t) => a + (b - a) * t; const norm = ([dx, dy]) => { const L = Math.hypot(dx, dy) || 1; return [dx / L, dy / L]; }; // ============================================================ // BEND // // Map the (s, r) flat strip into a 2D ring as `close` ramps 0 → 1. // At close = 0 the strip is flat (identity placement). At close = 1 // it forms a full ring centered on the polar center, with strip // ends (s = ±1) meeting at the BOTTOM of the chart and strip // center (s = 0) at the top. // // The bend pivots about z = +q (a point below the strip). Distance // from pivot to a point at (·, r) in flat space is (q - r), so: // • r = +w/2 (below spine) → smaller bend radius → INNER ring // • r = -w/2 (above spine) → larger bend radius → OUTER ring // // Returns the bent screen position plus the Jacobian columns: // dS = ∂(out)/∂s — direction of "+s motion" at this point // dR = ∂(out)/∂r — direction of "+r motion" at this point // (Both unnormalized; norm() is applied at the call site.) // ============================================================ const bend = (s, r, close) => { if (close === 0) { return { out: [halfW + s * Math.PI, barCenterZ + r], dS: [Math.PI, 0], dR: [0, 1], }; } const q = 1 / (0.999 * close + 0.001); const a = Math.PI * s / q; const sa = Math.sin(a), ca = Math.cos(a); const k = (q - r) * Math.PI / q; return { out: [halfW + (q - r) * sa, barCenterZ + q - (q - r) * ca - close * close * q], dS: [k * ca, k * sa], dR: [-sa, ca], }; }; // ============================================================ // BENT RECTANGLE PATH // // Trace a closed rectangle s ∈ [s0, s1] × r ∈ [rA, rB] (rA < rB), // bent through `close`. Each long edge (at rA or rB) is rendered // as two cubic-bezier sub-arcs; each subtends half the total bend // angle close·π·(s1-s0)/2. The two short edges (at s0 and s1) stay // radial in screen space and remain straight under the bend, so // their handles use theta = 0. // // Eight knots (corners + edge midpoints) traverse the rectangle: // knot k=0 1 2 3 4 5 6 7 // s-coord index (0=s0,1=sM,2=s1): 0 1 2 2 2 1 0 0 // r-coord index (0=rB,1=rM,2=rA): 0 0 0 1 2 2 2 1 // out direction: +s +s -r -r -s -s +r +r // in direction: +r +s +s -r -r -s -s +r // Encoded as KNOTS with direction codes 0=+s, 1=-s, 2=+r, 3=-r. // ============================================================ const KNOTS = [ // [sIdx, rIdx, outDir, inDir] [0, 0, 0, 2], [1, 0, 0, 0], [2, 0, 3, 0], [2, 1, 3, 3], [2, 2, 1, 3], [1, 2, 1, 1], [0, 2, 2, 1], [0, 1, 2, 2], ]; // Edge i is curved iff i ∈ {0,1,4,5} (the two long edges). The // remaining four edges connect inner↔outer at constant s and stay // straight in screen space. const CURVED_EDGE = [true, true, false, false, true, true, false, false]; const bentRectPath = (s0, s1, rA, rB, close) => { const sM = (s0 + s1) / 2; const rM = (rA + rB) / 2; const sCoords = [s0, sM, s1]; const rCoords = [rB, rM, rA]; const directionAt = (j, dirIdx) => { switch (dirIdx) { case 0: return j.dS; case 1: return [-j.dS[0], -j.dS[1]]; case 2: return j.dR; case 3: return [-j.dR[0], -j.dR[1]]; } }; const bent = KNOTS.map(([si, ri, outDir, inDir]) => { const j = bend(sCoords[si], rCoords[ri], close); return { out: j.out, outTangent: norm(directionAt(j, outDir)), inTangent: norm(directionAt(j, inDir)), }; }); const halfTheta = close * Math.PI * (s1 - s0) / 2; let d = `M${f4(bent[0].out[0])},${f4(bent[0].out[1])} `; for (let i = 0; i < 8; i++) { const a = bent[i], b = bent[(i + 1) % 8]; const chord = Math.hypot(b.out[0] - a.out[0], b.out[1] - a.out[1]); const theta = CURVED_EDGE[i] ? halfTheta : 0; // Standard 4/3·tan(θ/4)·R bezier approximation, via chord. const handleLen = chord / (3 * Math.cos(theta / 4) ** 2); const p1x = a.out[0] + a.outTangent[0] * handleLen; const p1y = a.out[1] + a.outTangent[1] * handleLen; const p2x = b.out[0] - b.inTangent[0] * handleLen; const p2y = b.out[1] - b.inTangent[1] * handleLen; d += `C${f4(p1x)},${f4(p1y)} ${f4(p2x)},${f4(p2y)} ${f4(b.out[0])},${f4(b.out[1])} `; } return d + "Z"; }; // ============================================================ // PRIMITIVE PATHS // ============================================================ const rectPath = (cx, cy, hw, hh) => { const x0 = cx - hw, x1 = cx + hw; const y0 = cy - hh, y1 = cy + hh; return `M${f4(x0)},${f4(y0)} L${f4(x1)},${f4(y0)} L${f4(x1)},${f4(y1)} L${f4(x0)},${f4(y1)} Z`; }; // Polar coordinates: angle 0 points DOWN (matches the bend's // close-at-bottom convention). Increasing angle sweeps CCW in // screen space (bottom → left → top → right). const polar = (a, r) => [polarCx - r * Math.sin(a), polarCy + r * Math.cos(a)]; // Annular sector (donut/pie wedge). Outer arc sweeps CCW from // startAngle to endAngle on a circle around the polar center. // Inner arc returns CW. SVG sweep flag 1 = CW path, but our outer // motion is CCW screen-wise — and SVG's chirality is inverted by // y-axis-down, so we use sweep=1 for outer (the arc that bulges // away from polarCenter) and sweep=0 for the inner return. const annularSectorPath = (startAngle, endAngle, innerR, outerR) => { const span = endAngle - startAngle; if (span <= 1e-9 || outerR <= 1e-9) return ""; const isFull = span >= 2 * Math.PI - 1e-6; const largeArc = span > Math.PI ? 1 : 0; const SWEEP = 1; const NOT_SWEEP = 1 - SWEEP; const [oxs, oys] = polar(startAngle, outerR); const [oxe, oye] = polar(endAngle, outerR); // Pie slice (no inner ring). if (innerR <= 1e-6) { if (isFull) { const [oxMid, oyMid] = polar(startAngle + Math.PI, outerR); return `M${f4(polarCx)},${f4(polarCy)} L${f4(oxs)},${f4(oys)} ` + `A${f4(outerR)},${f4(outerR)} 0 0 ${SWEEP} ${f4(oxMid)},${f4(oyMid)} ` + `A${f4(outerR)},${f4(outerR)} 0 0 ${SWEEP} ${f4(oxe)},${f4(oye)} Z`; } return `M${f4(polarCx)},${f4(polarCy)} L${f4(oxs)},${f4(oys)} ` + `A${f4(outerR)},${f4(outerR)} 0 ${largeArc} ${SWEEP} ${f4(oxe)},${f4(oye)} Z`; } // Annular sector. const [ixs, iys] = polar(startAngle, innerR); const [ixe, iye] = polar(endAngle, innerR); if (isFull) { const [oxMid, oyMid] = polar(startAngle + Math.PI, outerR); const [ixMid, iyMid] = polar(startAngle + Math.PI, innerR); return `M${f4(oxs)},${f4(oys)} ` + `A${f4(outerR)},${f4(outerR)} 0 0 ${SWEEP} ${f4(oxMid)},${f4(oyMid)} ` + `A${f4(outerR)},${f4(outerR)} 0 0 ${SWEEP} ${f4(oxe)},${f4(oye)} ` + `L${f4(ixe)},${f4(iye)} ` + `A${f4(innerR)},${f4(innerR)} 0 0 ${NOT_SWEEP} ${f4(ixMid)},${f4(iyMid)} ` + `A${f4(innerR)},${f4(innerR)} 0 0 ${NOT_SWEEP} ${f4(ixs)},${f4(iys)} Z`; } return `M${f4(oxs)},${f4(oys)} ` + `A${f4(outerR)},${f4(outerR)} 0 ${largeArc} ${SWEEP} ${f4(oxe)},${f4(oye)} ` + `L${f4(ixe)},${f4(iye)} ` + `A${f4(innerR)},${f4(innerR)} 0 ${largeArc} ${NOT_SWEEP} ${f4(ixs)},${f4(iys)} Z`; }; // ============================================================ // HISTOSPLINE // // A histospline is a natural cubic spline through (3·N + 1) knots // — one at each bar-edge (shared between neighbours) and one at // each bar's midpoint, for a total of 2·N+1 unique x-positions. // The midpoint y-values are tuned so each bar's spline-area equals // a chosen target (preserving column-bar areas under smoothing). // ============================================================ // Solve for natural-cubic-spline derivatives at each x. const naturalSplineDerivs = (xs, ys) => { const n = xs.length; if (n < 2) return ys.map(() => 0); if (n === 2) { const slope = (ys[1] - ys[0]) / (xs[1] - xs[0]); return [slope, slope]; } const h = new Array(n - 1); for (let i = 0; i < n - 1; i++) h[i] = xs[i + 1] - xs[i]; // Tridiagonal system for second derivatives M[i]. const lo = new Array(n - 2); const di = new Array(n - 2); const up = new Array(n - 2); const rh = new Array(n - 2); for (let i = 1; i <= n - 2; i++) { const k = i - 1; lo[k] = (i >= 2) ? h[i - 1] : 0; di[k] = 2 * (h[i - 1] + h[i]); up[k] = (i <= n - 3) ? h[i] : 0; rh[k] = 6 * ((ys[i + 1] - ys[i]) / h[i] - (ys[i] - ys[i - 1]) / h[i - 1]); } for (let k = 1; k < n - 2; k++) { const factor = lo[k] / di[k - 1]; di[k] -= factor * up[k - 1]; rh[k] -= factor * rh[k - 1]; } const M = new Array(n).fill(0); if (n >= 3) { M[n - 2] = rh[n - 3] / di[n - 3]; for (let k = n - 4; k >= 0; k--) { M[k + 1] = (rh[k] - up[k] * M[k + 2]) / di[k]; } } const derivs = new Array(n); for (let i = 0; i < n - 1; i++) { derivs[i] = (ys[i + 1] - ys[i]) / h[i] - h[i] * (2 * M[i] + M[i + 1]) / 6; } derivs[n - 1] = (ys[n - 1] - ys[n - 2]) / h[n - 2] + h[n - 2] * (M[n - 2] + 2 * M[n - 1]) / 6; return derivs; }; // Choose midpoint heights so that ∫ spline ≈ target area for each // bar segment. Closed-form: m = (6·meanH − yL − yR) / 4, clamped // non-negative. const computeMidHeights = (barHeights, barAreaTargets) => { const N = barHeights.length; const sharedEdgeHeights = new Array(N - 1); for (let i = 0; i < N - 1; i++) { sharedEdgeHeights[i] = (barHeights[i] + barHeights[i + 1]) / 2; } const midHeights = new Array(N); for (let i = 0; i < N; i++) { const yL = (i === 0) ? barHeights[0] : sharedEdgeHeights[i - 1]; const yR = (i === N - 1) ? barHeights[N - 1] : sharedEdgeHeights[i]; const meanH = barAreaTargets[i] / w; midHeights[i] = Math.max(0, (6 * meanH - yL - yR) / 4); } return { sharedEdgeHeights, midHeights }; }; // Build the full (3N) array of (xs, ys) knot positions, dedup // x-coincident pairs (averaging the y), and run the spline solver. // Returns derivatives at each of the 3N original positions. const histosplineDerivs = (sharedEdgeHeights, midHeights, barHeights) => { const N = barHeights.length; const x0 = halfW - (N * w) / 2; const xs = new Array(3 * N); const ys = new Array(3 * N); for (let i = 0; i < N; i++) { const xL = x0 + i * w; const xR = xL + w; xs[3*i] = xL; ys[3*i] = (i === 0) ? barHeights[0] : sharedEdgeHeights[i - 1]; xs[3*i+1] = (xL + xR) / 2; ys[3*i+1] = midHeights[i]; xs[3*i+2] = xR; ys[3*i+2] = (i === N - 1) ? barHeights[N - 1] : sharedEdgeHeights[i]; } // Adjacent shared edges have the same x; merge before the solver. const dx = []; const dy = []; const idx = new Array(xs.length); for (let k = 0; k < xs.length; k++) { const last = dx.length - 1; if (last >= 0 && Math.abs(xs[k] - dx[last]) < 1e-9) { dy[last] = (dy[last] + ys[k]) / 2; idx[k] = last; } else { dx.push(xs[k]); dy.push(ys[k]); idx[k] = dx.length - 1; } } const dDerivs = naturalSplineDerivs(dx, dy); return { xs, ys, derivs: xs.map((_, k) => dDerivs[idx[k]]) }; }; // Render one bar of the histospline. `bars[i] = {xL, xR}` defines // the bar's x-range (may differ from the canonical histospline grid // when transitioning from a non-uniform layout). `sourceFlat` is // the y-value the bar starts from when smoothness=0 (rectangle). // `mirrorAmount` ∈ [0,1] reflects the spline below the baseline, // morphing histospline→violin. const histosplineBarPath = ({ xL, xR, sourceFlat, smoothness, mirrorAmount, yL, yM, yR, mL, mM, mR }) => { const xM = (xL + xR) / 2; // smoothness=0 collapses to a flat rectangle at sourceFlat. const yLs = sourceFlat + (yL - sourceFlat) * smoothness; const yMs = sourceFlat + (yM - sourceFlat) * smoothness; const yRs = sourceFlat + (yR - sourceFlat) * smoothness; // mirrorAmount=1 reflects the spline into a violin shape; we // shrink it vertically to keep total area bounded. const heightScale = 1 - mirrorAmount / 2; const axis = barBottomZ - (w / 2) * mirrorAmount; const screenY = (h) => axis - h * heightScale; const yLp = screenY(yLs), yMp = screenY(yMs), yRp = screenY(yRs); const dxL = xM - xL, dxR = xR - xM; const slope = (m) => m * smoothness * heightScale; const c1x = xL + dxL / 3, c1y = yLp - slope(mL) * dxL / 3; const c2x = xM - dxL / 3, c2y = yMp + slope(mM) * dxL / 3; const c3x = xM + dxR / 3, c3y = yMp - slope(mM) * dxR / 3; const c4x = xR - dxR / 3, c4y = yRp + slope(mR) * dxR / 3; // Mirror y-coords across the axis; coefficient lets the lower // lobe shrink toward the axis as mirrorAmount → 0 (no mirror). const mirrorCoef = mirrorAmount / (2 - mirrorAmount); const mirror = (y) => axis + mirrorCoef * (axis - y); return `M${f4(xL)},${f4(mirror(yLp))} L${f4(xL)},${f4(yLp)} ` + `C${f4(c1x)},${f4(c1y)} ${f4(c2x)},${f4(c2y)} ${f4(xM)},${f4(yMp)} ` + `C${f4(c3x)},${f4(c3y)} ${f4(c4x)},${f4(c4y)} ${f4(xR)},${f4(yRp)} ` + `L${f4(xR)},${f4(mirror(yRp))} ` + `C${f4(c4x)},${f4(mirror(c4y))} ${f4(c3x)},${f4(mirror(c3y))} ${f4(xM)},${f4(mirror(yMp))} ` + `C${f4(c2x)},${f4(mirror(c2y))} ${f4(c1x)},${f4(mirror(c1y))} ${f4(xL)},${f4(mirror(yLp))} Z`; }; // High-level helper: given bar layout + source/final heights + // smoothness/mirror amount, return the path for one segment. const histosplineSegmentAt = ({ bars, sourceFlatHeights, finalBarHeights, barAreaTargets, smoothness, mirrorAmount = 0, segmentIndex }) => { const { sharedEdgeHeights, midHeights } = computeMidHeights(finalBarHeights, barAreaTargets); const { ys, derivs } = histosplineDerivs(sharedEdgeHeights, midHeights, finalBarHeights); const i = segmentIndex; const i0 = 3*i, i1 = 3*i + 1, i2 = 3*i + 2; return histosplineBarPath({ xL: bars[i].xL, xR: bars[i].xR, sourceFlat: sourceFlatHeights[i], smoothness, mirrorAmount, yL: ys[i0], yM: ys[i1], yR: ys[i2], mL: derivs[i0], mM: derivs[i1], mR: derivs[i2], }); }; // ============================================================ // LAYOUT HELPERS // ============================================================ const computeFracs = (weights) => { const total = weights.reduce((a, b) => a + b, 0); return total > 0 ? weights.map(w => w / total) : weights.map(() => 1 / weights.length); }; // Each bar's natural width in y-coords: 2π · frac_i. const computeBarWidths = (weights) => computeFracs(weights).map(f => 2 * Math.PI * f); // Linear-rectangle layouts parameterized by `l`: // l = -2 → column (tight, no gaps, h = 2π·frac, w = w) // l = -1 → compressed (gapped, w = w, h = 2π·frac) // l = 0 → stackedBar (no gaps, area-preserving widths) // Intermediate values interpolate between these. Used both for // rendering at end-states and for column↔compressed↔stackedBar // transitions. const linearRectShape = (l, weights) => { const wi = computeBarWidths(weights); let widths; if (l >= -1) { // Between compressed (l=-1) and stackedBar (l=0). const t = -l; widths = wi.map(width => width + (Math.min(width, w) - width) * t); } else { // Between column (l=-2) and compressed (l=-1). const t = -l - 1; widths = wi.map(width => Math.min(width, w) + (w - Math.min(width, w)) * t); } const heights = wi.map((width, i) => (width * w) / widths[i]); const gap = (l >= -1 ? 0 : -l - 1) * (w / 4); const totalWidth = widths.reduce((a, b) => a + b, 0) + gap * (widths.length - 1); let leftEdge = halfW - totalWidth / 2; return widths.map((bw, i) => { const rect = { cx: leftEdge + bw / 2, cy: barBottomZ - heights[i] / 2, hw: bw / 2, hh: heights[i] / 2, }; leftEdge += bw + gap; return rect; }); }; // Histospline canonical bar layout: N adjacent bars of width w, // centered. Used for histospline & violin end-states. const histosplineBars = (N) => { let left = halfW - (N * w) / 2; const bars = []; for (let i = 0; i < N; i++) { bars.push({ xL: left, xR: left + w }); left += w; } return bars; }; // Polar-mode parameters per chart node. Each polar node specifies // per-bar inner radius, angular fraction, and outer radius (either // a fixed value or "area-preserving" where outer is derived from // angular span and total area). // // donut: inner = DONUT_INNER, fracs from data, area-preserving // pie: inner = 0, fracs from data, area-preserving // radialBar: inner = 0, equal angular slices, R_i = √(2N·w·frac_i) // (outer is fixed per-bar so column area = wedge area) const POLAR_NODES = new Set(["donut", "pie", "radialBar"]); const polarNodeParams = (nodeId, fracs) => { const N = fracs.length; switch (nodeId) { case "donut": return { inner: fracs.map(() => DONUT_INNER), angleFracs: [...fracs], areaPreserving: true }; case "pie": return { inner: fracs.map(() => 0), angleFracs: [...fracs], areaPreserving: true }; case "radialBar": return { inner: fracs.map(() => 0), outer: fracs.map(f => Math.sqrt(2 * N * w * f)), angleFracs: fracs.map(() => 1 / N), areaPreserving: false, }; default: return null; } }; // Produce per-bar wedges from polar params at fully-rendered state. const wedgesFromPolarParams = (params, fracs) => { let cum = 0; return params.angleFracs.map((af, i) => { const startAngle = cum; const endAngle = cum + af * 2 * Math.PI; cum = endAngle; const inner = params.inner[i]; const outer = params.areaPreserving ? Math.sqrt(TOTAL_AREA * fracs[i] / (Math.PI * af) + inner * inner) : params.outer[i]; return { startAngle, endAngle, innerR: inner, outerR: outer }; }); }; // Stacked-strip y-boundaries: bar i covers [boundaries[i], boundaries[i+1]]. // Total span is [-1, +1]; widths come from computeBarWidths/π. const stackedBoundaries = (weights) => { const wi = computeBarWidths(weights); const out = [-1]; for (const wIdx of wi) out.push(out[out.length - 1] + wIdx / Math.PI); return out; }; // ============================================================ // CHART AT REST: pathAtNode // // Renders one segment of `nodeId` as if no transition is running. // ============================================================ const pathAtNode = (nodeId, weights, segmentIndex) => { const fracs = computeFracs(weights); const wi = computeBarWidths(weights); if (POLAR_NODES.has(nodeId)) { const wedges = wedgesFromPolarParams(polarNodeParams(nodeId, fracs), fracs); const wd = wedges[segmentIndex]; return annularSectorPath(wd.startAngle, wd.endAngle, wd.innerR, wd.outerR); } if (nodeId === "stackedBar") { const b = stackedBoundaries(weights); return bentRectPath(b[segmentIndex], b[segmentIndex + 1], -w/2, +w/2, 0); } if (nodeId === "column" || nodeId === "compressed") { const l = nodeId === "column" ? -2 : -1; const r = linearRectShape(l, weights)[segmentIndex]; return rectPath(r.cx, r.cy, r.hw, r.hh); } if (nodeId === "histospline" || nodeId === "violin") { const finalBarHeights = wi.slice(); return histosplineSegmentAt({ bars: histosplineBars(weights.length), sourceFlatHeights: finalBarHeights, finalBarHeights, barAreaTargets: wi.map(h => h * w), smoothness: 1, mirrorAmount: nodeId === "violin" ? 1 : 0, segmentIndex, }); } return ""; }; // ============================================================ // EDGE TRANSITIONS: pathForSegment // // Each edge between two chart nodes has a custom interpolation. // `t` ∈ [0,1] is the transition progress (already eased). // ============================================================ // ---- polar ↔ polar (donut/pie/radialBar) -------------------- const polarToPolar = (fromId, toId, t, fracs, segmentIndex) => { const A = polarNodeParams(fromId, fracs); const B = polarNodeParams(toId, fracs); let cum = 0; const wedges = A.angleFracs.map((afA, i) => { const af = lerp(afA, B.angleFracs[i], t); const inner = lerp(A.inner[i], B.inner[i], t); const start = cum; const end = cum + af * 2 * Math.PI; cum = end; const areaOuter = Math.sqrt(TOTAL_AREA * fracs[i] / (Math.PI * af) + inner * inner); const oA = A.areaPreserving ? areaOuter : A.outer[i]; const oB = B.areaPreserving ? areaOuter : B.outer[i]; return { startAngle: start, endAngle: end, innerR: inner, outerR: lerp(oA, oB, t) }; }); const wd = wedges[segmentIndex]; return annularSectorPath(wd.startAngle, wd.endAngle, wd.innerR, wd.outerR); }; // ---- stackedBar ↔ donut: bend the strip into a ring --------- const stackedToDonut = (forward, { t, weights, segmentIndex }) => { const close = forward ? t : 1 - t; const b = stackedBoundaries(weights); return bentRectPath(b[segmentIndex], b[segmentIndex + 1], -w/2, +w/2, close); }; // ---- column ↔ radialBar: bars curl into wedges, areas equal - // Three motions in lockstep: // • Bar's s-extent slides/resizes from column position to equal // 1/N angular slices. // • Bar bottom shifts in r-space from +w/2 to +1, where the // bend at close=1 lands exactly on the polar center. // • Bar height scales from h_i (column) to R_i = √(2N·w·frac_i) // (radial), so wedge area equals column area. // The bend `close` ramps 0 → 1 in parallel. const columnToRadialBar = (forward, { t, weights, fracs, segmentIndex }) => { const tt = forward ? t : 1 - t; const N = weights.length; const r = linearRectShape(-2, weights)[segmentIndex]; // Column endpoint values (in bend-space coords, s = (cx-halfW)/π). const colSCenter = (r.cx - halfW) / Math.PI; const colSHalf = r.hw / Math.PI; const colHeight = 2 * r.hh; const colRBot = (r.cy + r.hh) - barCenterZ; // = +w/2 // Radial-bar endpoint values. const radSCenter = -1 + (2 * segmentIndex + 1) / N; const radSHalf = 1 / N; const radRBot = 1; const radHeight = Math.sqrt(2 * N * w * fracs[segmentIndex]); const sCenter = lerp(colSCenter, radSCenter, tt); const sHalf = lerp(colSHalf, radSHalf, tt); const rBot = lerp(colRBot, radRBot, tt); const height = lerp(colHeight, radHeight, tt); return bentRectPath(sCenter - sHalf, sCenter + sHalf, rBot - height, rBot, tt); }; // ---- histospline-family transitions ------------------------- // Four edges share the same final renderer (histosplineSegmentAt) // but differ in how bars (xL/xR ranges), source heights, and final // heights interpolate. Each is a small function below. // column ↔ histospline: rectangular bars with a shrinking gap // smooth into a continuous spline. const columnToHistospline = (forward, { t, weights, wi, segmentIndex }) => { const s = forward ? t : 1 - t; const N = weights.length; const gap = (1 - s) * (w / 4); const total = N * w + (N - 1) * gap; const bars = []; let left = halfW - total / 2; for (let i = 0; i < N; i++) { bars.push({ xL: left, xR: left + w }); left += w + gap; } return histosplineSegmentAt({ bars, sourceFlatHeights: wi.slice(), finalBarHeights: wi.slice(), barAreaTargets: wi.map(h => h * w), smoothness: s, mirrorAmount: 0, segmentIndex, }); }; // stackedBar ↔ histospline: a flat strip's segments grow upward // out of the strip (sourceFlat = w, the strip thickness) and slide // their widths from y-width to canonical w. const stackedToHistospline = (forward, { t, weights, wi, segmentIndex }) => { const s = forward ? t : 1 - t; const N = weights.length; const widths = wi.map(srcW => lerp(srcW, w, s)); const bars = []; let left = halfW - widths.reduce((a, b) => a + b, 0) / 2; for (let i = 0; i < N; i++) { bars.push({ xL: left, xR: left + widths[i] }); left += widths[i]; } return histosplineSegmentAt({ bars, sourceFlatHeights: wi.map(() => w), finalBarHeights: wi.slice(), barAreaTargets: wi.map(srcW => srcW * w), smoothness: s, mirrorAmount: 0, segmentIndex, }); }; // histospline ↔ violin: canonical bars with mirrorAmount lerping // 0 → 1 (the spline reflects below the baseline). const histosplineToViolin = (forward, { t, weights, wi, segmentIndex }) => { const mirrorAmount = forward ? t : 1 - t; return histosplineSegmentAt({ bars: histosplineBars(weights.length), sourceFlatHeights: wi.slice(), finalBarHeights: wi.slice(), barAreaTargets: wi.map(h => h * w), smoothness: 1, mirrorAmount, segmentIndex, }); }; // stackedBar ↔ violin: like stackedToHistospline but mirrorAmount=1 // throughout, AND each bar's height is area/width (not its own // y-width), so the strip stays thickness w as widths morph. const stackedToViolin = (forward, { t, weights, wi, segmentIndex }) => { const s = forward ? t : 1 - t; const N = weights.length; const widths = wi.map(srcW => lerp(srcW, w, s)); const heights = wi.map((srcW, i) => (srcW * w) / widths[i]); const bars = []; let left = halfW - widths.reduce((a, b) => a + b, 0) / 2; for (let i = 0; i < N; i++) { bars.push({ xL: left, xR: left + widths[i] }); left += widths[i]; } return histosplineSegmentAt({ bars, sourceFlatHeights: heights.slice(), finalBarHeights: heights.slice(), barAreaTargets: heights.map(h => h * w), smoothness: s, mirrorAmount: 1, segmentIndex, }); }; // ---- linear-rect transitions (column ↔ compressed ↔ stackedBar) const RECT_LINEAR_POS = { column: -2, compressed: -1, stackedBar: 0 }; const linearRectTransition = (fromId, toId, t, weights, segmentIndex) => { const l = lerp(RECT_LINEAR_POS[fromId], RECT_LINEAR_POS[toId], t); const r = linearRectShape(l, weights)[segmentIndex]; return rectPath(r.cx, r.cy, r.hw, r.hh); }; // Edge handler dispatch. Each handler takes a `ctx` with everything // it might need (t, weights, fracs, wi, segmentIndex) plus a // `forward` flag so we don't duplicate handlers per direction. const EDGE_HANDLERS = { "stackedBar→donut": (ctx) => stackedToDonut (true, ctx), "donut→stackedBar": (ctx) => stackedToDonut (false, ctx), "column→radialBar": (ctx) => columnToRadialBar (true, ctx), "radialBar→column": (ctx) => columnToRadialBar (false, ctx), "column→histospline": (ctx) => columnToHistospline (true, ctx), "histospline→column": (ctx) => columnToHistospline (false, ctx), "stackedBar→histospline": (ctx) => stackedToHistospline(true, ctx), "histospline→stackedBar": (ctx) => stackedToHistospline(false, ctx), "histospline→violin": (ctx) => histosplineToViolin (true, ctx), "violin→histospline": (ctx) => histosplineToViolin (false, ctx), "stackedBar→violin": (ctx) => stackedToViolin (true, ctx), "violin→stackedBar": (ctx) => stackedToViolin (false, ctx), }; const pathForSegment = (fromId, toId, t, weights, segmentIndex) => { const fracs = computeFracs(weights); const wi = computeBarWidths(weights); if (POLAR_NODES.has(fromId) && POLAR_NODES.has(toId)) { return polarToPolar(fromId, toId, t, fracs, segmentIndex); } if (fromId in RECT_LINEAR_POS && toId in RECT_LINEAR_POS) { return linearRectTransition(fromId, toId, t, weights, segmentIndex); } const handler = EDGE_HANDLERS[`${fromId}→${toId}`]; if (!handler) return ""; return handler({ t, weights, fracs, wi, segmentIndex }); }; // ============================================================ // GRAPH ROUTING // ============================================================ const adjacency = (() => { const adj = new Map(); state.nodes.forEach(n => adj.set(n.id, new Set())); state.edges.forEach(e => { adj.get(e.a).add(e.b); adj.get(e.b).add(e.a); }); return adj; })(); const shortestPath = (fromId, toId) => { if (fromId === toId) return [fromId]; const visited = new Set([fromId]); const parent = new Map(); const queue = [fromId]; while (queue.length) { const cur = queue.shift(); for (const nb of adjacency.get(cur) || []) { if (visited.has(nb)) continue; visited.add(nb); parent.set(nb, cur); if (nb === toId) { const out = [toId]; let p = toId; while (parent.has(p)) { p = parent.get(p); out.unshift(p); } return out; } queue.push(nb); } } return null; }; // ============================================================ // EASING // // Each edge has a stored {easing, duration} indexed by canonical // edge id (state.edgeId). When traversing the edge in reverse, we // mirror "In" ↔ "Out" easings so the in/out feels consistent in // both directions. Bounce/Elastic don't have clean mirrors, so // we leave them as-is. // ============================================================ const NO_MIRROR_FAMILIES = ["Bounce", "Elastic"]; const mirrorEasing = (name) => { if (typeof name !== "string") return name; if (name.includes("InOut")) return name; if (NO_MIRROR_FAMILIES.some(f => name.includes(f))) return name; if (name.endsWith("Out")) return name.slice(0, -3) + "In"; if (name.endsWith("In")) return name.slice(0, -2) + "Out"; return name; }; const resolveEase = (name) => typeof d3[name] === "function" ? d3[name] : d3.easeCubicOut; const edgeSettings = (fromId, toId) => { const id = state.edgeId(fromId, toId); const { easing, duration } = state.transitions[id] || { easing: "easeCubicOut", duration: 500 }; const [canonFirst] = id.split("|"); return { easing: fromId === canonFirst ? easing : mirrorEasing(easing), duration, }; }; // ============================================================ // SVG SETUP & STATE WIRING // ============================================================ const wrap = html`

`; const svg = d3.select(wrap).append("svg") .attr("viewBox", `0 0 ${viewBoxW} ${viewBoxH}`) .attr("preserveAspectRatio", "xMidYMid meet") .style("width", "100%") .style("height", "100%") .style("display", "block") .style("touch-action", "none"); let targetNode = state.chartType; let activeToken = 0; // bumped whenever an edge starts/aborts let running = false; let paths; const drawAtCurrent = () => { paths .attr("fill", (_, i) => state.colors[i]) .attr("d", (_, i) => state.live.from === state.live.to ? pathAtNode(state.live.from, state.weights, i) : pathForSegment(state.live.from, state.live.to, state.live.progress, state.weights, i)); }; // Drag a bar vertically to adjust its weight. const WEIGHT_SPAN = 200; let dragStartWeight = 0, dragStartY = 0; const dragBehavior = d3.drag() .on("start", (event, i) => { dragStartWeight = state.weights[i]; dragStartY = event.y; }) .on("drag", (event, i) => { const dyView = event.y - dragStartY; const delta = -dyView / viewBoxH * WEIGHT_SPAN; const next = Math.max(0, Math.min(100, Math.round(dragStartWeight + delta))); if (next !== state.weights[i]) { const newWeights = state.weights.slice(); newWeights[i] = next; state.update({ weights: newWeights }); } }); const rebuildPaths = () => { const indices = state.weights.map((_, i) => i); paths = svg.selectAll("path").data(indices).join("path") .attr("fill", (i) => state.colors[i]) .attr("stroke", "white") .attr("stroke-width", 1) .attr("vector-effect", "non-scaling-stroke") .attr("d", (i) => pathAtNode(state.live.from, state.weights, i)) .style("cursor", "ns-resize") .call(dragBehavior); }; rebuildPaths(); const setLive = (from, to, progress) => { state.live.from = from; state.live.to = to; state.live.progress = progress; state.notifyLive(); }; setLive(state.chartType, state.chartType, 0); // Run a single edge transition. The activeToken / running flags // protect against stale callbacks (e.g., if we get interrupted by // a bar count change) actually mutating live state. const TRANSITION_NAME = "chart"; const runEdge = (fromId, toId) => { activeToken += 1; const myToken = activeToken; running = true; setLive(fromId, toId, 0); const { easing, duration } = edgeSettings(fromId, toId); paths.transition(TRANSITION_NAME) .duration(duration) .ease(resolveEase(easing)) .tween("edge", function() { const node = this; const i = +d3.select(node).datum(); return (t) => { if (myToken !== activeToken) return; state.live.progress = t; d3.select(node) .attr("fill", state.colors[i]) .attr("d", pathForSegment(fromId, toId, t, state.weights, i)); if (i === 0) state.notifyLive(); }; }) .on("end", () => { if (myToken !== activeToken) return; setLive(toId, toId, 0); running = false; // Replan if the user changed targets while we were running. if (toId !== targetNode) { const path = shortestPath(toId, targetNode); if (path && path.length > 1) runEdge(path[0], path[1]); } }); }; const planToTarget = () => { if (running) return; if (state.live.from === targetNode) { drawAtCurrent(); return; } const path = shortestPath(state.live.from, targetNode); if (path && path.length > 1) runEdge(path[0], path[1]); }; // React to state changes: // • bar-count change → rebuild DOM and abort any running tween. // • chartType change → start traversal toward new target. // • anything else (weights, colors) → redraw in place if not // already animating; running tweens read fresh state per frame. let lastCount = state.weights.length; const render = (s) => { if (s.weights.length !== lastCount) { lastCount = s.weights.length; activeToken += 1; paths.interrupt(TRANSITION_NAME); running = false; rebuildPaths(); drawAtCurrent(); return; } if (s.chartType !== targetNode) { targetNode = s.chartType; planToTarget(); return; } if (!running) drawAtCurrent(); }; const unsubscribe = state.subscribe(render); invalidation.then(unsubscribe); return wrap; }