# Progress Log — Career Constellation Clinical Pathway Overhaul # Branch: ralph/constellation-overhaul # Started: 2026-02-16 ## Codebase Patterns - CareerConstellation.tsx is a D3 force-directed graph rendered in an SVG with React overlay buttons for accessibility - D3 simulation uses forceSimulation with charge, link, x, y, and collide forces - Module-level window.matchMedia reads for prefersReducedMotion and supportsCoarsePointer - DashboardLayout manages constellation state: highlightedNodeId, pinnedNodeId via callbacks - Work experience data in src/data/consultations.ts, skills in src/data/skills.ts, constellation-specific data in src/data/constellation.ts - CSS layout: .pathway-columns is a grid that switches from 1fr (mobile) to minmax(0,1.15fr) minmax(0,1.5fr) at desktop breakpoint - .pathway-graph-sticky has position: sticky; top: 12px for the graph column - Design tokens in index.css :root — use var(--accent), var(--border-light), var(--text-tertiary), etc. - Use the d3-viz skill for all D3 rendering stories - yScale domain reversal automatically flows through all timeline elements (guides, dots, labels, role positions, simulation forces) — no per-element changes needed ## 2026-02-16 - US-001 - Reversed yScale domain from [minYear, maxYear] to [maxYear, minYear] so 2025 appears at top - Updated buildScreenReaderDescription() to mention reverse-chronological order - Files changed: src/components/CareerConstellation.tsx - **Learnings for future iterations:** - The yScale is the single source of truth for vertical positioning — reversing its domain is a one-line change that cascades to all D3 elements using it - Year guide lines, year dots, year labels, role initial positions, and simulation forceY all reference yScale — no individual element updates needed - buildScreenReaderDescription() is defined at module level (line ~63), not inside the component ---