A curated, evolving exploration of how the world connects in unexpected ways.
);
}
function TerminalDetail({ correlation, themeColors }) {
const [highlightedAnnotation, setHighlightedAnnotation] = React.useState(null);
// CO₂ scenario state: ppm value of the active "Common rooms" scenario.
// Only meaningful when chartType === "co2-slider", but lifted here so the
// chart card and the scenarios card can share/sync it. null = no highlight,
// letting the entrance animation play unobstructed on initial load.
const [highlightedPpm, setHighlightedPpm] = React.useState(null);
// Reset state when the correlation itself changes.
React.useEffect(() => {
setHighlightedAnnotation(null);
setHighlightedPpm(null);
}, [correlation.id]);
return (
{/* Big hero card with delta chart */}
{/* R coefficient panel */}
{/* Why card */}
{/* So what card */}
{/* Annotations card — or anchor scenarios for interactive scrub charts */}
{correlation.anchorScenarios ? (
) : (
)}
{/* Take it with you removed — share lives in the chart card header */}
);
}
function DeltaChartCard({ correlation, themeColors, highlightedAnnotation, highlightedPpm }) {
const { dataA, dataB } = correlation;
const n = dataA.length;
const w = 920;
// co2-slider chart no longer needs extra footer space; same height as the
// other chart variants.
const h = 360;
const pad = { l: 40, r: 40, t: 32, b: 40 };
// Live-fill animation: 0..1 progress, restarts whenever correlation.id changes.
const progress = useChartProgress(correlation.id, 1900);
const chartType = correlation.chartType || "delta-bar";
const cadenceLabel = chartType === "yearly-bars"
? `Annual · ${correlation.dataA.length} years · hrs per day`
: chartType === "co2-slider"
? `Dose-response · ${correlation.dataA.length} pts · 400–2500 ppm`
: correlation.weekLabels
? `Co-movement · ${correlation.weekLabels.length} pts · normalized`
: "Co-movement · normalized deviation from mean";
return (
{cadenceLabel}
{correlation.titleNode || correlation.title}
{chartType === "co2-slider" ? (
) : (
)}
);
}
// -----------------------------------------------------------------------------
// Chart body: DUAL-LINE
// Two normalized series rendered as lines with soft area fills underneath.
// Best for parallel/co-rising stories (e.g. GLP-1 use × "food noise" lexicon).
// -----------------------------------------------------------------------------
function DualLineChartBody({ correlation, themeColors, progress, highlightedAnnotation, w, h, pad }) {
const { dataA, dataB, annotations } = correlation;
const normA = normalize(dataA);
const normB = normalize(dataB);
const n = dataA.length;
const innerW = w - pad.l - pad.r;
const innerH = h - pad.t - pad.b;
const cx = (i) => pad.l + (i / (n - 1)) * innerW;
const cy = (v) => pad.t + (1 - v) * innerH;
const baseY = pad.t + innerH;
const scanX = pad.l + progress * innerW;
const linePath = (norm) => norm.map((v, i) => `${i === 0 ? "M" : "L"}${cx(i).toFixed(2)},${cy(v).toFixed(2)}`).join(" ");
const areaPath = (norm) => `${linePath(norm)} L${cx(n - 1).toFixed(2)},${baseY} L${cx(0).toFixed(2)},${baseY} Z`;
const pathA = linePath(normA);
const pathB = linePath(normB);
const areaA = areaPath(normA);
const areaB = areaPath(normB);
const clipId = `chart-clip-${correlation.id}`;
const gradAId = `gradA-${correlation.id}`;
const gradBId = `gradB-${correlation.id}`;
const clipW = Math.max(0, progress * innerW);
return (
<>
{/* baseline */}
{/* clipped wave layer */}
{/* scan line — visible while drawing */}
{progress < 1 && progress > 0.01 && (
)}
);
}
// -----------------------------------------------------------------------------
// Chart body: DELTA-BAR
// Two-sided bars deviating from a center line. Best for inverse correlations
// where the bars naturally point opposite directions (e.g. temp × whisky).
// -----------------------------------------------------------------------------
function DeltaBarChartBody({ correlation, themeColors, progress, highlightedAnnotation, w, h, pad }) {
const { dataA, dataB, annotations } = correlation;
const normA = normalize(dataA);
const normB = normalize(dataB);
const n = dataA.length;
const innerW = w - pad.l - pad.r;
const innerH = h - pad.t - pad.b;
const cx = (i) => pad.l + (i / (n - 1)) * innerW;
const mid = pad.t + innerH / 2;
const halfH = innerH / 2;
const barW = (innerW / n) * 0.42;
const scanX = pad.l + progress * innerW;
return (
<>
{/* center line */}
{/* bars */}
{normA.map((v, i) => {
const dA = v - 0.5;
const dB = normB[i] - 0.5;
const yA = mid - dA * 2 * halfH;
const yB = mid - dB * 2 * halfH;
const x = cx(i);
const barFrac = i / (n - 1);
const fadeWindow = 1 / n;
const localT = Math.max(0, Math.min(1, (progress - barFrac) / fadeWindow));
if (localT <= 0) return null;
return (
);
})}
{/* scan line — visible while drawing */}
{progress < 1 && progress > 0.01 && (
)}
);
}
// -----------------------------------------------------------------------------
// Chart body: YEARLY-BARS
// Paired vertical bars per year, with explicit "no data" treatment for gaps
// (e.g. 2020 ATUS pause). Best for annual cadence stories where each year
// is a discrete event rather than a point on a continuous trend.
// -----------------------------------------------------------------------------
function YearlyBarsChartBody({ correlation, themeColors, progress, highlightedAnnotation, w, h, pad }) {
const { dataA, dataB, weekLabels, annotations } = correlation;
const n = dataA.length;
const innerW = w - pad.l - pad.r;
const innerH = h - pad.t - pad.b;
// Use the actual maxes (with a small headroom) — keeps absolute hours legible.
const validA = dataA.filter((v) => v != null);
const validB = dataB.filter((v) => v != null);
const maxVal = Math.max(...validA, ...validB) * 1.1;
const slotW = innerW / n;
const barW = Math.min(22, slotW * 0.32);
const gap = 4;
const cx = (i) => pad.l + slotW * (i + 0.5);
const baseY = pad.t + innerH;
const barH = (v) => (v / maxVal) * innerH;
const scanX = pad.l + progress * innerW;
return (
<>
{/* baseline */}
{/* horizontal gridlines (every 0.2 hrs ≈ 12 min) */}
{[0.2, 0.4, 0.6, 0.8].map((tick) => {
if (tick > maxVal) return null;
const y = baseY - (tick / maxVal) * innerH;
return (
{tick.toFixed(1)}h
);
})}
{/* paired bars per year */}
{dataA.map((vA, i) => {
const vB = dataB[i];
const x = cx(i);
// Stagger so each bar starts shortly after the previous, and the LAST
// bar's window finishes exactly at progress=1. Map i∈[0,n-1] → [0, 1-fadeWindow].
const fadeWindow = 0.22;
const barFrac = (i / Math.max(1, n - 1)) * (1 - fadeWindow);
const localT = Math.max(0, Math.min(1, (progress - barFrac) / fadeWindow));
if (localT <= 0) return null;
// 2020-style gap: render a dashed empty slot with a "no data" label
if (vA == null || vB == null) {
return (
NO DATA · COVID
);
}
const hA = barH(vA) * localT;
const hB = barH(vB) * localT;
return (
{/* Value labels on top of each bar — only once fully drawn */}
{localT > 0.85 && (
<>
{vA.toFixed(2)}
{vB.toFixed(2)}
)}
{/* Year label below */}
{weekLabels ? weekLabels[i] : i}
);
})}
{/* scan line — visible while drawing */}
{progress < 1 && progress > 0.01 && (
)}
);
}
// -----------------------------------------------------------------------------
// Shared overlay: annotations (vertical guide + circle + callout)
// -----------------------------------------------------------------------------
function ChartAnnotationsLayer({ annotations, progress, highlightedAnnotation, themeColors, n, cx, pad, h, w }) {
return (
<>
{annotations.map((a, i) => {
const annFrac = a.idx / (n - 1);
const visible = progress >= annFrac;
if (!visible) return null;
const fadeT = progress >= 1 ? 1 : Math.min(1, (progress - annFrac) * 6);
const isHighlighted = highlightedAnnotation === i;
return (
{isHighlighted && (
)}
{isHighlighted && (
)}
{isHighlighted && (
)}
);
})}
);
}
// -----------------------------------------------------------------------------
// Shared overlay: x-axis ticks (auto-stepped by series length)
// -----------------------------------------------------------------------------
function ChartXTicksLayer({ correlation, progress, themeColors, n, cx, pad, h }) {
const labels = correlation.weekLabels;
const step = labels && labels.length > 60 ? 12 : labels && labels.length > 30 ? 8 : 4;
return (
<>
{correlation.dataA.map((_, i) => {
if (i % step !== 0) return null;
const tickFrac = i / (n - 1);
if (progress < tickFrac) return null;
const fadeT = Math.min(1, (progress - tickFrac) * 6);
const lbl = labels ? labels[i] : monthLabel(i);
return (
{lbl}
);
})}
);
}
function Legend({ dotColor, label, themeColors }) {
return (
{label}
);
}
// -----------------------------------------------------------------------------
// Chart body: CO2-SLIDER (mirrored-bars dose-response)
// X-axis is CO₂ ppm (controlled, not time). The chart is split by a centered
// baseline:
// ABOVE → orange bars rising as ppm climbs (the room filling with CO₂)
// BELOW → blue bars dropping as composite cognitive score falls
// Together the two halves form a widening "scissor" that visualizes the core
// story at a glance: as one goes up, the other goes down. The slider drives a
// glow column + paired floating readouts; the bars themselves are static across
// scrubs so the user can see where they are on the full curve.
// -----------------------------------------------------------------------------
function CO2SliderChartBody({ correlation, themeColors, progress, highlightedPpm, w, h, pad }) {
const scenarios = correlation.anchorScenarios || []; const { dataA: ppmAxis, dataB: scores } = correlation;
const minPpm = ppmAxis[0];
const maxPpm = ppmAxis[ppmAxis.length - 1];
const innerW = w - pad.l - pad.r;
const innerH = h - pad.t - pad.b;
// We split the inner area in two — top half for CO₂, bottom half for score.
// Leave a small gutter around the centerline so the two halves don't kiss.
const gutter = 6;
const halfH = (innerH - gutter * 2) / 2;
const cy = pad.t + innerH / 2; // visual centerline
const topBaseline = cy - gutter; // where orange bars start (growing up)
const botBaseline = cy + gutter; // where blue bars start (growing down)
const xForPpm = (p) => pad.l + ((p - minPpm) / (maxPpm - minPpm)) * innerW;
// Same interpolation as before — drives the live readouts.
const scoreAtPpm = (p) => {
if (p <= ppmAxis[0]) return scores[0];
if (p >= ppmAxis[ppmAxis.length - 1]) return scores[scores.length - 1];
for (let i = 0; i < ppmAxis.length - 1; i++) {
const a = ppmAxis[i];
const b = ppmAxis[i + 1];
if (p >= a && p <= b) {
const t = (p - a) / (b - a);
return scores[i] + t * (scores[i + 1] - scores[i]);
}
}
return scores[scores.length - 1];
};
// Bar geometry: 22 ppm steps (400→2500 by 100). Width = full step minus a
// small gap so bars feel like a column, not a continuous wash.
const stepW = innerW / (ppmAxis.length - 1);
const barW = Math.max(6, stepW * 0.62);
// Normalize CO₂: 400 ppm = 0, 2500 ppm = 1. (Use the dataset bounds so the
// top bar at 2500 reaches all the way up.)
const co2Norm = (p) => (p - minPpm) / (maxPpm - minPpm);
// Cognitive deficit: 0 at score 100 (or above), grows as score falls toward
// 40. We clamp at the same normalized scale as CO₂ so the "scissor" is
// visually proportional. Max deficit = 100 - 40 = 60 score points.
const deficitNorm = (score) => Math.max(0, Math.min(1, (100 - score) / 60));
// Reveal animation: bars unfurl left→right with the same progress curve as
// the other charts (1.9s default). Each bar fades in as `progress` crosses
// its x position.
const revealAt = (i) => {
const t = i / (ppmAxis.length - 1);
return Math.max(0, Math.min(1, (progress - t * 0.9) * 8));
};
// Highlight state — null means no scenario is selected, so we just show the
// bars without the floating readout column.
const hasHighlight = highlightedPpm != null;
const currentScore = hasHighlight ? scoreAtPpm(highlightedPpm) : 0;
const currentX = hasHighlight ? xForPpm(highlightedPpm) : 0;
const dropPct = hasHighlight ? Math.round(100 - currentScore) : 0;
// X-axis ticks anchored at meaningful CO₂ landmarks
const xTicks = [
{ ppm: 420, label: "420\noutdoor" },
{ ppm: 1000, label: "1000\nASHRAE" },
{ ppm: 1500, label: "1500" },
{ ppm: 2000, label: "2000" },
{ ppm: 2500, label: "2500" },
];
return (
<>
{/* axis labels for each half */}
CO₂ ↑
SCORE ↓
{/* centerline + ppm tick labels straddling it */}
{xTicks.map((t) => (
{t.label.split("\n").map((line, li) => (
{line}
))}
))}
{/* gradients */}
{/* mirrored bars */}
{ppmAxis.map((p, i) => {
const x = xForPpm(p) - barW / 2;
const upH = co2Norm(p) * halfH;
const downH = deficitNorm(scores[i]) * halfH;
const fade = revealAt(i);
// Highlight the bar nearest the active scenario, if any.
const isCurrent = hasHighlight && Math.abs(xForPpm(p) - currentX) < stepW / 2;
return (
{/* CO₂ bar (up) */}
{/* score bar (down) */}
);
})}
{/* slider position glow column — only when a scenario is highlighted AND the entrance animation has cleared the local bars */} {hasHighlight && progress * 0.9 + 0.05 >= co2Norm(highlightedPpm) * 0.9 && (
{/* CO₂ readout at top */}
{Math.round(highlightedPpm).toLocaleString()}
{` ppm`}
{/* score readout at bottom */}
−{dropPct}%
{` cognition`}
)}
{/* Scenario markers — small dots on the centerline at each anchor ppm.
Hint that the chart is interactive without obscuring the bars. They
fade in only after the entrance animation has reached their x. */}
{scenarios.map((s, i) => {
const sx = xForPpm(s.ppm);
const reveal = Math.max(0, Math.min(1, (progress - co2Norm(s.ppm) * 0.9) * 6));
const isActive = highlightedPpm != null && Math.abs(highlightedPpm - s.ppm) < 50;
return (
{isActive && (
)}
);
})}
);
}
// Slider + live readout that lives below the SVG. Drives the same `ppm` state
// the chart body reads from, so motion is fully linked.
// (Unused — the CO₂ chart now uses the same progress-driven entrance animation
// as the other charts. Kept here previously, removed in favor of scenario-tap
// highlighting via the AnchorScenariosCard.)
function RPanel({ correlation, themeColors }) {
const r = correlation.r;
const strength = Math.abs(r);
const label =
strength >= 0.9 ? "very strong" :
strength >= 0.7 ? "strong" :
strength >= 0.5 ? "substantial" :
strength >= 0.3 ? "moderate" :
"weak";
const sigDots = Math.min(5, Math.round(strength * 5));
// Number counts up in lockstep with the chart fill (same duration, no delay).
const numberProgress = useChartProgress(`r:${correlation.id}`, 1900);
const animatedR = r * numberProgress;
// Meter fills band-by-band in lockstep with the chart and number.
const meterProgress = useChartProgress(`meter:${correlation.id}`, 1900);
const filledBands = Math.floor(meterProgress * sigDots + 0.0001);
// Which band the moving notch is currently over (0..sigDots-1)
const notchIndex = meterProgress >= 1
? sigDots - 1
: Math.min(sigDots - 1, Math.floor(meterProgress * sigDots));
// Only show the active label after the meter settles, so words don't flash mid-fill
const showLabel = meterProgress >= 1;
return (
{[0, 1, 2, 3, 4].map((i) => {
// For the active band, fill partial width based on the actual
// correlation strength within that band's 0.2-wide window.
// e.g. r=0.97 → "very strong" band fills 85% (since 0.97 sits
// 85% of the way from 0.8 → 1.0).
const bandLow = i * 0.2;
const isActiveBand = i === sigDots - 1 && meterProgress >= 1;
const intraBandFill = Math.max(0, Math.min(1, (strength - bandLow) / 0.2));
const isFullyFilled = i < filledBands && !isActiveBand;
return (
);
}
// -----------------------------------------------------------------------------
// AnchorScenariosCard
// Replaces AnnotationsCard for interactive scrub charts (currently CO₂). Each
// scenario is a real-world ppm value with a plain-language label; clicking it
// snaps the chart's slider there. Selected state derives from `ppm` proximity
// rather than a click index — so dragging the slider also reflects in the
// card without needing a second source of truth.
// -----------------------------------------------------------------------------
function AnchorScenariosCard({ correlation, themeColors, highlightedPpm, onHighlight }) {
const ppm = highlightedPpm;
const scrollRef = React.useRef(null);
const rowRefs = React.useRef([]);
// Same interpolation as the chart body — keep them in lockstep.
const ppmAxis = correlation.dataA;
const scores = correlation.dataB;
const scoreAtPpm = (p) => {
if (p <= ppmAxis[0]) return scores[0];
if (p >= ppmAxis[ppmAxis.length - 1]) return scores[scores.length - 1];
for (let i = 0; i < ppmAxis.length - 1; i++) {
const a = ppmAxis[i];
const b = ppmAxis[i + 1];
if (p >= a && p <= b) {
const t = (p - a) / (b - a);
return scores[i] + t * (scores[i + 1] - scores[i]);
}
}
return scores[scores.length - 1];
};
// Find the scenario closest to the current highlighted ppm. If nothing is
// highlighted (null), no scenario is active.
const scenarios = correlation.anchorScenarios;
let activeIdx = -1;
if (ppm != null) {
let bestDist = Infinity;
scenarios.forEach((s, i) => {
const d = Math.abs(s.ppm - ppm);
if (d < bestDist) {
bestDist = d;
activeIdx = i;
}
});
// Only consider it "active" if we're reasonably close (within 75 ppm).
if (bestDist > 75) activeIdx = -1;
}
const handleClick = (i, ppmVal) => {
onHighlight(ppmVal);
// If user clicks a row past the first couple, scroll the *next* row into
// view so they get a hint there's more below. Uses the container's own
// scrollTop — never scrollIntoView.
const container = scrollRef.current;
const nextRow = rowRefs.current[i + 1];
if (container && nextRow && i >= 2 && i < scenarios.length - 1) {
const targetTop = nextRow.offsetTop - container.clientHeight + nextRow.offsetHeight + 8;
if (targetTop > container.scrollTop) {
container.scrollTo({ top: targetTop, behavior: "smooth" });
}
}
};
return (