forskjeller.naiv.no/public/index.html
Ole-Morten Duesund 2eef9d9f31 Ny visualisering: «Det er dyrt å være fattig» — boutgifter etter inntekt
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>
2026-03-16 20:04:26 +01:00

204 lines
6.1 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="nb">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forskjeller — interaktive visualiseringer</title>
<meta property="og:type" content="website">
<meta property="og:locale" content="nb_NO">
<meta property="og:site_name" content="Forskjeller">
<meta property="og:title" content="Forskjeller">
<meta property="og:description" content="Interaktive visualiseringer som viser hvordan små forskjeller vokser over tid.">
<meta property="og:url" content="https://forskjeller.naiv.no/">
<meta name="twitter:card" content="summary">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #f5f2eb;
--ink: #1a1714;
--ink2: #5a5650;
--ink3: #8a857e;
--accent: #c0392b;
--border: rgba(26,23,20,0.12);
}
body {
font-family: 'DM Sans', sans-serif;
background: var(--bg);
color: var(--ink);
min-height: 100vh;
display: flex;
flex-direction: column;
}
header {
background: var(--ink);
color: var(--bg);
padding: 3.5rem 2rem 3rem;
text-align: center;
position: relative;
overflow: hidden;
}
header::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
-45deg,
transparent,
transparent 40px,
rgba(255,255,255,0.02) 40px,
rgba(255,255,255,0.02) 41px
);
}
header .eyebrow {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(245,242,235,0.5);
margin-bottom: 1rem;
font-weight: 400;
}
header h1 {
font-family: 'Fraunces', serif;
font-size: clamp(2.2rem, 6vw, 3.5rem);
font-weight: 600;
line-height: 1.1;
margin-bottom: 1rem;
position: relative;
}
header p.lead {
font-size: clamp(0.95rem, 2vw, 1.1rem);
color: rgba(245,242,235,0.65);
max-width: 520px;
margin: 0 auto;
font-weight: 300;
line-height: 1.7;
}
main {
max-width: 640px;
margin: 0 auto;
padding: 3rem 1.25rem 4rem;
flex: 1;
}
.topics {
display: grid;
gap: 1rem;
}
.topic-card {
display: block;
background: #fff;
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.5rem 1.75rem;
text-decoration: none;
color: var(--ink);
transition: border-color 0.15s, box-shadow 0.15s;
}
.topic-card:hover {
border-color: var(--accent);
box-shadow: 0 2px 12px rgba(192,57,43,0.08);
}
.topic-card h2 {
font-family: 'Fraunces', serif;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 0.4rem;
}
.topic-card p {
font-size: 0.95rem;
color: var(--ink2);
line-height: 1.6;
}
.topic-card .arrow {
display: inline-block;
color: var(--accent);
font-size: 0.85rem;
margin-top: 0.75rem;
font-weight: 500;
letter-spacing: 0.02em;
}
footer {
text-align: center;
padding: 2rem 1rem;
font-size: 12px;
color: var(--ink3);
border-top: 1px solid var(--border);
}
footer a { color: var(--ink3); }
</style>
<script async src="/implausibly/js/pa-hrD38igEdOJ7wP3NdA40I.js"></script>
<script>
window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
plausible.init({ endpoint: "/implausibly/api/event" })
</script>
</head>
<body>
<header>
<p class="eyebrow">forskjeller.naiv.no</p>
<h1>Forskjeller</h1>
<p class="lead">Interaktive visualiseringer som viser hvordan tilsynelatende små forskjeller vokser over tid.</p>
</header>
<main>
<div class="topics">
<a href="lonn/" class="topic-card">
<h2>Lønnsforskjellen vokser</h2>
<p>Prosentvise lønnstillegg ser rettferdige ut, men gjør de rike rikere. Se hvordan en liten forskjell i startlønn blir til hundretusener over en karriere.</p>
<span class="arrow">Se kalkulatoren &rarr;</span>
</a>
<a href="sparing/" class="topic-card">
<h2>Rentes rente forsterker</h2>
<p>Likt sparebeløp, ulik avkastning. Noen få prosentpoeng i forskjell skaper enorme gap over tid — takket være rentes rente-effekten.</p>
<span class="arrow">Se kalkulatoren &rarr;</span>
</a>
<a href="bolig/" class="topic-card">
<h2>Boligforskjellen forsterkes</h2>
<p>To boliger med ulik pris stiger like mye i prosent — men belåningen forsterker gapet i egenkapital dramatisk.</p>
<span class="arrow">Se kalkulatoren &rarr;</span>
</a>
<a href="arv/" class="topic-card">
<h2>Arvens forsprang</h2>
<p>Person A starter fra null, person B arver en sum. Begge sparer likt — men gapet lukkes aldri. Arvet formue vokser eksponentielt uavhengig av innsats.</p>
<span class="arrow">Se kalkulatoren &rarr;</span>
</a>
<a href="lonnsutvikling/" class="topic-card">
<h2>Dobbel ulikhet i lønn</h2>
<p>Direktørene fikk 3× flere kroner i lønnsvekst enn renholdere — og høyere prosentvekst. Dobbel ulikhet i praksis. Reelle SSB-tall, 20162025.</p>
<span class="arrow">Se visualiseringen &rarr;</span>
</a>
<a href="boligeierskap/" class="topic-card">
<h2>Hvem eier boligen din?</h2>
<p>Bare 1 av 3 eier boligen fritt. 38 % deler eierskapet med banken, og 28 % leier. Unge aleneboende? 2 av 3 leier. Reelle SSB-tall.</p>
<span class="arrow">Se visualiseringen &rarr;</span>
</a>
<a href="boutgifter/" class="topic-card">
<h2>Det er dyrt å være fattig</h2>
<p>41 % av de fattigste bruker over 40 % av inntekten på bolig. Blant de rikeste: 7 %. Rike betaler mer i kroner, men det merkes knapt. SSB-data 20152024.</p>
<span class="arrow">Se visualiseringen &rarr;</span>
</a>
</div>
</main>
<footer>
Tallene er illustrative og ikke finansiell rådgivning · <a href="https://kode.naiv.no/olemd/forskjeller.naiv.no">Kildekode</a>
</footer>
</body>
</html>