olemd/forskjeller.naiv.no

Ole-Morten Duesund 4f82236b8b Ny visualisering: hvem eier egentlig boligen din? SSB-data 2015–2024

Tre diagrammer basert på SSB-tabellene 14068, 14059 og 14065:
- Kakediagram: 34 % eier fritt, 38 % eier med banklån, 28 % leier
- Stablet stolpe: gjeldsbyrde over tid (lån >3M tredoblet seg)
- Horisontal stablet: eierskap etter husholdningstype (65 % av unge leier)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-03-16 19:52:47 +01:00

3.3 KiB

Raw Blame History

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).

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

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.

3.3 KiB Raw Blame History Unescape Escape