# Data Story Route — Scrollytelling Explainer

## Subject

**The Great Housing Divide** — a scrollytelling data story examining how housing affordability in the United States has diverged from wage growth over the past 25 years, and what that means for different generations and metro areas.

## Narrative Sections

### 1. Priced Out (Hook)
Open with a stark framing: the American dream of homeownership is further out of reach than at any point in recent history. Show the widening gap between home prices and median incomes with a striking index-chart preview. Set the stakes for the story ahead.

### 2. When Prices Left Wages Behind (Line Chart)
Compare the S&P/Case-Shiller Home Price Index against Median Household Income, both indexed to 100 in the year 2000. The line chart spans 2000–2025. Key annotation: the post-2012 divergence where prices accelerate far beyond income growth, accelerated further by the pandemic era.

### 3. The Down Payment Mountain (Bar Chart)
Show how many years it takes a median-income household to save a 20% down payment in different US metro areas. Horizontal bar chart with stark differences: high-cost coastal metros demand 12–18 years of saving versus 6–9 in midwestern and southern cities. Annotations call out the national average and the San Francisco extreme.

### 4. The Rent Trap (Area Chart)
Rent as a percentage of median income from 2000 to 2025. The area chart uses a filled gradient to show the "affordability threshold" (30%) being crossed and staying crossed. Annotations highlight the tipping point around 2010 and the post-pandemic surge past 40%.

### 5. Generations Divided (Grouped Bar Chart)
Homeownership rates by age bracket, comparing 2000 against 2025. Four age groups side by side. The erosion is most dramatic for under-35 households (41% → 35%) and for 35–44 (68% → 60%). Annotations contextualise each generational shift and note the wealth-building consequences.

### 6. What Comes Next (Scatter Plot + Conclusion)
Scatter plot of US metros: wage growth (x-axis) vs price-to-income ratio (y-axis). Each dot labelled with city name, colour-coded by region. The plot reveals a clear cluster of unaffordable metros where wages have not kept pace with prices. The conclusion section draws the threads together and acknowledges policy dimensions without offering false certainty.

## Visual and Interaction Direction

- **Layout:** Split-screen scrollytelling on desktop — fixed chart panel on the right, scrolling text panel on the left. On mobile, stacked vertical with scroll-triggered reveals.
- **Chart rendering:** Canvas 2D API, hand-drawn with custom palettes and typography. No third-party charting library; all rendering is inline JavaScript.
- **Typography:** System font stack for body, clean sans-serif for headings and chart labels.
- **Colour palette:** Deep navy background for hero and section headers, warm coral accent for data highlights, muted teal and steel grey for secondary series.
- **Progress navigation:** Vertical dot rail on the left edge plus a reading progress bar across the top of the viewport.
- **Reveal logic:** Intersection Observer triggers chart drawing animations when a narrative section enters the viewport. Charts draw with a gentle sequencing effect — axes first, then data series, then annotations.
- **Annotation layer:** Key data points and trend lines are called out with labels and subtle connector lines directly on the charts.
- **Responsive breakpoints:** Full split at ≥900 px, stacked at <900 px with adjusted chart sizing.

## Technical Constraints

- Single `index.html` file with all CSS and JS inline.
- No external images, no external font files.
- Charts rendered via the Canvas 2D API — no SVG, no library.
- All scroll effects powered by the `IntersectionObserver` API — no jQuery, no scroll library.
- Data is fabricated but directionally accurate for demonstration purposes.
- Minimum 5 narrative sections, 3 distinct chart types, 1 annotation layer, 1 progress navigation system.