Viz showcase

10 reusable SVG components · brand-token-driven · no external libs

Reference posture. NYMag's The Sift as the brand anchor for the headline Topic Landscape. FiveThirtyEight + Pudding.cool + Tufte for the rest: hairline strokes (≤ 1.25px), no rounded blobs, generous whitespace, data-ink-first. All colors via :root tokens from docs/BRAND_GUIDE.md. Inter for labels, JetBrains Mono for numbers. Animations 150ms ease-out, hover-only.

1. Topic Landscape

2D scatter — Disagreement Index (X) × Signal:Noise Ratio (Y). The headline viz. NYMag The Sift energy.

viz.renderTopicLandscape(el, { topics, niche_colors })

2 + 3 + 5. Inline trio — DI Badge · Tier Position Strip · Velocity Sparkline

DI badge replaces the bare "47" number. Tier strip + sparkline make the topic feel like a place, not a row.

viz.renderDIBadge(el, { disagreement_index, tier_positions }) viz.renderTierStrip(el, { tier_positions, consensus_stance }) viz.renderSparkline(el, { velocity })

4. Mirror Alignment Radar

4-axis alignment quadrilateral (Tier 1 · Archetype · Tribe · Platform). Baseline ring at 0.5.

viz.renderMirrorRadar(el, { alignment_to_tier_1, … })

7. Source Tier Pyramid

Inverted: T1 narrow top → T5 wide bottom. Counts of signals per tier.

viz.renderTierPyramid(el, { tier_pyramid })

6. Persona Constellation

52 personas projected from real 7-dim voice profiles via PCA. Color by archetype. Operator view.

viz.renderConstellation(el, { constellation, archetype_colors })

8. Trajectory Timeline

Per-topic stance evolution across 8 time buckets. Mirror page — how the user has moved.

viz.renderTrajectory(el, { trajectory })

9. Stance Distribution

5-bin poll histogram with optional tribe overlay (your tribe vs platform).

viz.renderStanceDistribution(el, { bins, platform, tribe })

10. Disagreement Heatmap

5×5 pairwise tier disagreement, diagonal blanked. Hot = bigger stance gap.

viz.renderDisagreementHeatmap(el, { grid })

Bonus — Topic list with inline DI badges + sparklines

Shows how the inline micro-viz components compose into a list view.