/* global React */ const { useEffect, useRef, useState } = React; // Animated posterior-distribution figure for the hero. // Renders a smooth bell with shaded 50% / 94% HDI bands and a gently drifting mean. function PosteriorFigure({ variant = "posterior" }) { const W = 560, H = 380; const PAD = { l: 40, r: 24, t: 36, b: 56 }; const innerW = W - PAD.l - PAD.r; const innerH = H - PAD.t - PAD.b; const [t, setT] = useState(0); useEffect(() => { let raf; const start = performance.now(); const loop = (now) => { setT(((now - start) / 1000) % 16); raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, []); // Smooth ambient drift parameters const driftMu = 0.35 * Math.sin((t / 16) * Math.PI * 2); // ±0.35 const driftSigma = 1 + 0.06 * Math.sin((t / 16) * Math.PI * 2 + 1); // ~1±0.06 // Three posterior densities (channels), olive + clay + slate const densities = [ { mu: 1.6 + driftMu, sigma: 0.62 * driftSigma, color: "var(--olive-700)", band: "var(--olive-300)", band2: "var(--olive-200)", label: "Channel A" }, { mu: -0.4 + driftMu * 0.6, sigma: 0.5 * driftSigma, color: "var(--clay)", band: "var(--clay-soft)", band2: "var(--clay-soft)", label: "Channel B", faded: true }, { mu: 2.6 + driftMu * 0.4, sigma: 0.45 * driftSigma, color: "var(--slate)", band: "var(--slate-soft)", band2: "var(--slate-soft)", label: "Channel C", faded: true }, ]; const xMin = -2.5, xMax = 5; const xScale = (x) => PAD.l + ((x - xMin) / (xMax - xMin)) * innerW; // density of normal const pdf = (x, mu, sigma) => Math.exp(-((x - mu) ** 2) / (2 * sigma * sigma)) / (sigma * Math.sqrt(2 * Math.PI)); // compute global yMax for normalization let yMax = 0; densities.forEach(d => { yMax = Math.max(yMax, pdf(d.mu, d.mu, d.sigma)); }); const yScale = (y) => PAD.t + innerH - (y / yMax) * (innerH - 8); const buildPath = (mu, sigma) => { const N = 120; let d = ""; for (let i = 0; i <= N; i++) { const x = xMin + ((xMax - xMin) * i) / N; const y = pdf(x, mu, sigma); d += (i === 0 ? "M" : "L") + xScale(x).toFixed(2) + "," + yScale(y).toFixed(2) + " "; } return d; }; const buildArea = (mu, sigma, lo, hi) => { const N = 80; let d = "M" + xScale(lo).toFixed(2) + "," + yScale(0).toFixed(2) + " "; for (let i = 0; i <= N; i++) { const x = lo + ((hi - lo) * i) / N; const y = pdf(x, mu, sigma); d += "L" + xScale(x).toFixed(2) + "," + yScale(y).toFixed(2) + " "; } d += "L" + xScale(hi).toFixed(2) + "," + yScale(0).toFixed(2) + " Z"; return d; }; // x-axis ticks const ticks = [-2, -1, 0, 1, 2, 3, 4]; if (variant === "forest") return ; if (variant === "trace") return ; const main = densities[0]; const hdi94 = [main.mu - 1.96 * main.sigma, main.mu + 1.96 * main.sigma]; const hdi50 = [main.mu - 0.674 * main.sigma, main.mu + 0.674 * main.sigma]; return ( {/* zero line */} {/* faded other channels (just outlines) */} {densities.slice(1).map((d, i) => ( ))} {/* main: 94% HDI band */} {/* 50% HDI band on top */} {/* main outline */} {/* posterior mean */} {/* HDI tick markers at base */} {[hdi94[0], hdi94[1]].map((x, i) => ( ))} {/* x-axis */} {ticks.map(tk => ( {tk} ))} β · COEFFICIENT (LOG-LIFT) {/* legend / annotations */} 94% HDI 50% HDI {/* mean callout */} μ = {main.mu.toFixed(2)} ); } function ForestPlot() { const W = 560, H = 380, PAD = { l: 100, r: 30, t: 32, b: 40 }; const innerW = W - PAD.l - PAD.r; const innerH = H - PAD.t - PAD.b; const channels = [ { name: "tv_spend", mean: 0.42, lo: 0.18, hi: 0.71 }, { name: "youtube_spend", mean: 0.31, lo: 0.12, hi: 0.55 }, { name: "search_brand", mean: 0.27, lo: 0.16, hi: 0.42 }, { name: "search_nb", mean: 0.18, lo: 0.05, hi: 0.34 }, { name: "social_paid", mean: 0.11, lo: -0.03, hi: 0.28 }, { name: "ooh", mean: 0.06, lo: -0.05, hi: 0.18 }, { name: "podcast", mean: -0.04, lo: -0.18, hi: 0.10 }, ]; const xMin = -0.3, xMax = 0.85; const xScale = (x) => PAD.l + ((x - xMin) / (xMax - xMin)) * innerW; const ticks = [-0.2, 0, 0.2, 0.4, 0.6, 0.8]; const rowH = innerH / channels.length; const [t, setT] = useState(0); useEffect(() => { let raf, s = performance.now(); const tick = (n) => { setT(((n - s) / 1000) % 8); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); return ( CHANNEL COEFFICIENTS · 94% HDI {/* zero line */} {channels.map((c, i) => { const y = PAD.t + i * rowH + rowH / 2; const drift = 0.012 * Math.sin((t / 8) * Math.PI * 2 + i * 0.7); const lo = c.lo + drift, hi = c.hi + drift, m = c.mean + drift; const isNeg = m < 0; return ( {c.name} ); })} {ticks.map(tk => ( {tk.toFixed(1)} ))} ); } function TracePlot() { const W = 560, H = 380, PAD = { l: 36, r: 24, t: 28, b: 32 }; const innerW = W - PAD.l - PAD.r; const innerH = (H - PAD.t - PAD.b) / 4; const chains = [ { color: "var(--olive-700)" }, { color: "var(--clay)" }, { color: "var(--slate)" }, { color: "var(--olive-400)" }, ]; const [t, setT] = useState(0); useEffect(() => { let raf, s = performance.now(); const tick = (n) => { setT(((n - s) / 1000) % 12); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); // pseudo-random walk seeded per-chain const seriesPath = (seed, target) => { const N = 220; const phase = (t / 12) * Math.PI * 2; let d = ""; let v = target; for (let i = 0; i <= N; i++) { // deterministic-ish noise using sin combos const noise = Math.sin(i * 0.31 + seed) * 0.18 + Math.sin(i * 0.097 + seed * 1.7 + phase) * 0.1 + Math.cos(i * 0.21 + seed * 0.6) * 0.07; v = v * 0.85 + (target + noise) * 0.15; const x = PAD.l + (i / N) * innerW; const y = PAD.t + innerH * 0.5 - v * (innerH * 0.45); d += (i === 0 ? "M" : "L") + x.toFixed(2) + "," + y.toFixed(2) + " "; } return d; }; return ( MCMC TRACE · 4 CHAINS · R̂ = 1.003 {chains.map((c, idx) => { const cy = PAD.t + innerH * 0.5; return ( c{idx+1} ); })} ); } window.PosteriorFigure = PosteriorFigure;