Ole-Morten Duesund
2eef9d9f31
SSB-data (tabeller 14061 og 14067) som viser at: - 41 % av fattigste kvartil bruker >40 % av inntekten på bolig (vs 7 % rikeste) - 17 % av fattigste bruker 60 %+ av inntekten bare på bolig - 82 % av sosialhjelpsmottakere leier — bygger ingen formue - Byrden har økt kraftig for alle grupper etter rentehoppet i 2022 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
56 lines
3.6 KiB
Markdown
56 lines
3.6 KiB
Markdown
# CLAUDE.md
|
||
|
||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||
|
||
## Project Overview
|
||
|
||
Collection of interactive calculators visualizing how seemingly small differences grow exponentially over time. Norwegian-language UI. Hosted at `forskjeller.naiv.no`.
|
||
|
||
## Architecture
|
||
|
||
Static site in `public/` — no build system, no package manager. Serve `public/` as the site root. Each topic gets its own subdirectory with `index.html` and `app.js`.
|
||
|
||
### Shared CSS
|
||
|
||
`public/style.css` — Shared stylesheet used by all calculators (referenced as `../style.css`). CSS custom properties in `:root`, CSS Grid layouts, responsive breakpoints at 560px/480px/360px. Calculators can add a supplementary `<style>` block or extra CSS file for page-specific styles if needed.
|
||
|
||
### Shared pattern (all calculators)
|
||
|
||
Each calculator directory contains two files following the same pattern:
|
||
- `index.html` — Header, range-slider controls, stat cards, chart canvases, explainer section. Links to `../style.css`.
|
||
- `app.js` — Self-contained logic with `fmtKr()`, `fmtShort()`, `getData()`, `baseOpts()`, `update()`. Charts update with `'none'` animation mode.
|
||
|
||
### Calculators
|
||
|
||
- **`public/lonn/`** — Salary gap: percentage raises amplify absolute differences. Model: `gap = (B₀ − A₀) × (1 + r)ⁿ`
|
||
- **`public/sparing/`** — Compound interest: same savings, different returns. Model: `FV = P × ((1+r)^n - 1) / r` (monthly compounding). Stacked bar chart for deposits vs interest.
|
||
- **`public/bolig/`** — Housing leverage: same price growth, different starting prices. 85% LTV amplifies equity gap ~6.67×. Model: `Equity = Price × (1+g)^n - Loan`
|
||
- **`public/arv/`** — Inheritance gap: lump sum + equal savings, gap never closes. Model: `Gap = Arv × (1+r)^n`. Has percentage y-axis chart.
|
||
- **`public/lonnsutvikling/`** — Data-driven visualization (not a calculator): real SSB wage data showing how equal percentage growth translates to vastly different kroner amounts across occupations. No sliders — hard-coded SSB table 11418 data (2016–2025).
|
||
- **`public/boligeierskap/`** — Data-driven visualization: who really owns Norwegian housing? Three charts: doughnut (own outright / own with bank / rent), stacked bar (loan size distribution over time), horizontal stacked bar (ownership by household type). SSB tables 14068, 14059, 14065 data (2015–2024).
|
||
- **`public/boutgifter/`** — Data-driven visualization: "it's expensive to be poor". Three charts: housing cost burden by income quartile, heavy burden trend over time, ownership by income group. SSB tables 14061, 14067 data (2015–2024).
|
||
|
||
**External dependencies** (loaded via CDN, no install needed): Chart.js 4.4.1, Google Fonts (Fraunces + DM Sans).
|
||
|
||
### OpenGraph
|
||
|
||
All pages must include OG meta tags (`og:type`, `og:locale`, `og:site_name`, `og:title`, `og:description`, `og:url`) and `twitter:card`. No `og:image` for now. Base URL: `https://forskjeller.naiv.no/`.
|
||
|
||
### Key Design Decisions
|
||
|
||
- Color palette: Blue (#1a4a8a) = A, Red (#c0392b) = B, Purple (#4a3a8a) = gap
|
||
- All charts share `baseOpts()` — modify this for consistent chart styling changes
|
||
- Label pattern: "I dag" at year 0, show every 5th year, always show last year
|
||
- DOM updates use `textContent` or DOM methods (not innerHTML) for security
|
||
|
||
## Development
|
||
|
||
```bash
|
||
python3 -m http.server 8000 -d public
|
||
# open http://localhost:8000/ for landing page
|
||
# open http://localhost:8000/{lonn,sparing,bolig,arv}/ for individual calculators
|
||
```
|
||
|
||
## Language
|
||
|
||
All user-facing text is in Norwegian Bokmål (nb-NO). Use Norwegian for UI strings and `nb-NO` locale for number formatting.
|