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>
This commit is contained in:
Ole-Morten Duesund 2026-03-16 20:04:26 +01:00
commit 2eef9d9f31
5 changed files with 503 additions and 0 deletions

View file

@ -28,6 +28,7 @@ Each calculator directory contains two files following the same pattern:
- **`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 (20162025).
- **`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 (20152024).
- **`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 (20152024).
**External dependencies** (loaded via CDN, no install needed): Chart.js 4.4.1, Google Fonts (Fraunces + DM Sans).

View file

@ -5,4 +5,5 @@
- [ ] **BNP per innbygger (internasjonale forskjeller)** — Ny kalkulator i `public/verden/` som viser hvordan forskjeller i BNP per innbygger mellom land vokser over tid med prosentvis vekst. Samme prosentvise vekst gir stadig større absolutt gap mellom rike og fattige land.
- [x] **Lønnsutvikling: prosent vs. kroner** — Visualisering i `public/lonnsutvikling/` basert på reell SSB-statistikk. Viser dobbel ulikhet: høytlønte fikk både flere kroner OG høyere prosentvekst. Data fra SSB tabell 11418, 20162025.
- [x] **Hvem eier boligen din?** — Visualisering i `public/boligeierskap/` basert på SSB-data (tabeller 14068, 14059, 14065). Viser at bare 34 % eier fritt, 38 % deler med banken, 28 % leier. Gjeldsbyrde over tid og eierskap etter husholdningstype. 20152024.
- [x] **Det er dyrt å være fattig** — Visualisering i `public/boutgifter/` basert på SSB-data (tabeller 14061, 14067). Boutgifter som andel av inntekt per kvartil, byrde over tid, eierskap etter inntektsgruppe. 20152024.
- [ ] **Store formuer i Norge — arv vs. selvbygd** — Analyse/visualisering av hvordan store formuer i Norge har utviklet seg, og hvor stor andel som er arvet. Krever research og dataarbeid.

262
public/boutgifter/app.js Normal file
View file

@ -0,0 +1,262 @@
// SSB data: Boutgifter og boligeierskap etter inntekt
// Tabell 14061: Boligøkonomi etter inntektsgruppe (boutgifter som andel av inntekt)
// Tabell 14067: Boligeierskap etter inntektsgruppe
// Hentet 2026-03-16 via SSB PxWeb API v2
// --- Data ---
const YEARS = ['2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024'];
// Boutgifter som andel av inntekt per kvartil, 2024 (tabell 14061)
const QUARTILE_LABELS = ['Laveste kvartil', 'Andre kvartil', 'Tredje kvartil', 'Høyeste kvartil'];
const HOUSING_BURDEN = {
under10: [ 5.2, 10.8, 16.6, 22.0],
from10to19: [12.4, 26.1, 22.8, 24.6],
from20to29: [19.3, 28.2, 29.0, 28.2],
from30to39: [22.4, 19.5, 18.9, 17.7],
from40to59: [23.6, 12.7, 11.5, 6.4],
over60: [17.1, 2.8, 1.2, 1.0]
};
// Andel med boutgifter >40% av inntekt (40-59% + 60%+) over tid (tabell 14061)
const HEAVY_BURDEN = {
q1: [33.6, 33.4, 32.9, 34.5, 33.8, 33.5, 35.6, 41.8, 42.9, 40.7],
q2: [ 7.3, 7.0, 7.0, 6.3, 8.3, 6.0, 7.6, 12.3, 12.5, 15.5],
q3: [ 4.2, 3.1, 4.2, 3.9, 3.2, 3.6, 3.6, 6.0, 9.3, 12.7],
q4: [ 2.5, 1.2, 1.9, 2.5, 2.5, 3.5, 2.5, 4.6, 5.9, 7.4]
};
// Eierskap etter inntektsgruppe og utsatte grupper, 2024 (tabell 14067)
const OWNERSHIP_GROUPS = [
{ name: 'Sosialhjelpsmottakere', selveier: 13.9, andel: 4.6, leier: 81.5 },
{ name: 'Lavinntekt (EU 60 %)', selveier: 21.2, andel: 10.8, leier: 68.0 },
{ name: 'Laveste kvartil', selveier: 33.2, andel: 12.6, leier: 54.3 },
{ name: 'Barnefamilier lav inntekt', selveier: 39.0, andel: 8.5, leier: 52.5 },
{ name: 'Aleneboende eldre lav innt.', selveier: 52.4, andel: 23.9, leier: 23.7 },
{ name: 'Uføretrygdede', selveier: 55.6, andel: 13.7, leier: 30.7 },
{ name: 'Andre kvartil', selveier: 60.3, andel: 18.2, leier: 21.5 },
{ name: 'Tredje kvartil', selveier: 70.2, andel: 15.6, leier: 14.2 },
{ name: 'Høyeste kvartil', selveier: 79.7, andel: 13.6, leier: 6.7 },
];
// --- Formattering ---
function fmtPct(n) {
return n.toLocaleString('nb-NO', { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + '\u202f%';
}
const GRID_COLOR = 'rgba(0,0,0,0.06)';
const TICK_COLOR = '#8a857e';
function baseOpts() {
return {
responsive: true, maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: '#1a1714',
titleColor: '#f5f2eb',
bodyColor: 'rgba(245,242,235,0.7)',
padding: 10,
cornerRadius: 4,
titleFont: { family: 'DM Sans', size: 12 },
bodyFont: { family: 'DM Sans', size: 12 }
}
},
scales: {
x: {
ticks: { color: TICK_COLOR, font: { size: 11, family: 'DM Sans' }, maxRotation: 0 },
grid: { display: false },
border: { color: 'rgba(0,0,0,0.1)' }
},
y: {
ticks: { color: TICK_COLOR, font: { size: 11, family: 'DM Sans' }, callback: v => v + ' %' },
grid: { color: GRID_COLOR },
border: { dash: [3, 3], color: 'transparent' }
}
}
};
}
// --- Diagram 1: Boutgifter som andel av inntekt (stablet horisontal) ---
var chart1Opts = baseOpts();
chart1Opts.indexAxis = 'y';
chart1Opts.scales = {
x: {
stacked: true,
max: 100,
ticks: { color: TICK_COLOR, font: { size: 11, family: 'DM Sans' }, callback: v => v + ' %' },
grid: { color: GRID_COLOR },
border: { dash: [3, 3], color: 'transparent' }
},
y: {
stacked: true,
ticks: { color: TICK_COLOR, font: { size: 11, family: 'DM Sans' }, autoSkip: false },
grid: { display: false },
border: { color: 'rgba(0,0,0,0.1)' }
}
};
chart1Opts.plugins.tooltip = {
mode: 'index',
callbacks: {
label: function(c) {
return ' ' + c.dataset.label + ': ' + fmtPct(c.parsed.x);
}
},
backgroundColor: '#1a1714',
titleColor: '#f5f2eb',
bodyColor: 'rgba(245,242,235,0.7)',
padding: 10,
cornerRadius: 4,
titleFont: { family: 'DM Sans', size: 12 },
bodyFont: { family: 'DM Sans', size: 12 }
};
new Chart(document.getElementById('chart1'), {
type: 'bar',
data: {
labels: QUARTILE_LABELS,
datasets: [
{ label: 'Under 10 %', data: HOUSING_BURDEN.under10, backgroundColor: '#2c6e49cc', borderColor: '#2c6e49', borderWidth: 1, borderRadius: 1 },
{ label: '1019 %', data: HOUSING_BURDEN.from10to19, backgroundColor: '#27ae60cc', borderColor: '#27ae60', borderWidth: 1, borderRadius: 1 },
{ label: '2029 %', data: HOUSING_BURDEN.from20to29, backgroundColor: '#e67e22cc', borderColor: '#e67e22', borderWidth: 1, borderRadius: 1 },
{ label: '3039 %', data: HOUSING_BURDEN.from30to39, backgroundColor: '#e74c3ccc', borderColor: '#e74c3c', borderWidth: 1, borderRadius: 1 },
{ label: '4059 %', data: HOUSING_BURDEN.from40to59, backgroundColor: '#c0392bcc', borderColor: '#c0392b', borderWidth: 1, borderRadius: 1 },
{ label: '60 %+', data: HOUSING_BURDEN.over60, backgroundColor: '#8b1a1acc', borderColor: '#8b1a1a', borderWidth: 1, borderRadius: 1 }
]
},
options: chart1Opts
});
// --- Diagram 2: Tung boutgiftsbyrde over tid (linje) ---
function buildLegend(containerId, items) {
var container = document.getElementById(containerId);
items.forEach(function(item) {
var span = document.createElement('span');
var swatch = document.createElement('span');
swatch.className = 'swatch';
swatch.style.background = item.color;
span.appendChild(swatch);
span.appendChild(document.createTextNode(item.name));
container.appendChild(span);
});
}
var chart2Lines = [
{ name: 'Laveste kvartil', data: HEAVY_BURDEN.q1, color: '#c0392b' },
{ name: 'Andre kvartil', data: HEAVY_BURDEN.q2, color: '#e67e22' },
{ name: 'Tredje kvartil', data: HEAVY_BURDEN.q3, color: '#1a4a8a' },
{ name: 'Høyeste kvartil', data: HEAVY_BURDEN.q4, color: '#2c6e49' }
];
buildLegend('legend2', chart2Lines);
var chart2Opts = baseOpts();
chart2Opts.scales.y.max = 50;
chart2Opts.plugins.tooltip = {
callbacks: {
label: function(c) {
return ' ' + c.dataset.label + ': ' + fmtPct(c.parsed.y);
}
},
backgroundColor: '#1a1714',
titleColor: '#f5f2eb',
bodyColor: 'rgba(245,242,235,0.7)',
padding: 10,
cornerRadius: 4,
titleFont: { family: 'DM Sans', size: 12 },
bodyFont: { family: 'DM Sans', size: 12 }
};
new Chart(document.getElementById('chart2'), {
type: 'line',
data: {
labels: YEARS,
datasets: chart2Lines.map(function(line) {
return {
label: line.name,
data: line.data,
borderColor: line.color,
backgroundColor: line.color + '12',
fill: false,
tension: 0.3,
pointRadius: 0,
pointHoverRadius: 4,
borderWidth: 2.5
};
})
},
options: chart2Opts
});
// --- Diagram 3: Eierskap etter inntektsgruppe (horisontal stablet) ---
var chart3Opts = baseOpts();
chart3Opts.indexAxis = 'y';
chart3Opts.scales = {
x: {
stacked: true,
max: 100,
ticks: { color: TICK_COLOR, font: { size: 11, family: 'DM Sans' }, callback: v => v + ' %' },
grid: { color: GRID_COLOR },
border: { dash: [3, 3], color: 'transparent' }
},
y: {
stacked: true,
ticks: { color: TICK_COLOR, font: { size: 11, family: 'DM Sans' }, autoSkip: false },
grid: { display: false },
border: { color: 'rgba(0,0,0,0.1)' }
}
};
chart3Opts.plugins.tooltip = {
mode: 'index',
callbacks: {
label: function(c) {
return ' ' + c.dataset.label + ': ' + fmtPct(c.parsed.x);
}
},
backgroundColor: '#1a1714',
titleColor: '#f5f2eb',
bodyColor: 'rgba(245,242,235,0.7)',
padding: 10,
cornerRadius: 4,
titleFont: { family: 'DM Sans', size: 12 },
bodyFont: { family: 'DM Sans', size: 12 }
};
new Chart(document.getElementById('chart3'), {
type: 'bar',
data: {
labels: OWNERSHIP_GROUPS.map(function(g) { return g.name; }),
datasets: [
{
label: 'Selveier',
data: OWNERSHIP_GROUPS.map(function(g) { return g.selveier; }),
backgroundColor: '#2c6e49cc',
borderColor: '#2c6e49',
borderWidth: 1,
borderRadius: 2
},
{
label: 'Andelseier',
data: OWNERSHIP_GROUPS.map(function(g) { return g.andel; }),
backgroundColor: '#1a4a8acc',
borderColor: '#1a4a8a',
borderWidth: 1,
borderRadius: 2
},
{
label: 'Leier',
data: OWNERSHIP_GROUPS.map(function(g) { return g.leier; }),
backgroundColor: '#c0392bcc',
borderColor: '#c0392b',
borderWidth: 1,
borderRadius: 2
}
]
},
options: chart3Opts
});

View file

@ -0,0 +1,233 @@
<!DOCTYPE html>
<html lang="nb">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Det er dyrt å være fattig — boutgifter etter inntekt, SSB-data 20152024</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="Det er dyrt å være fattig">
<meta property="og:description" content="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.">
<meta property="og:url" content="https://forskjeller.naiv.no/boutgifter/">
<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">
<link rel="stylesheet" href="../style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
<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>
<style>
.source-strip {
text-align: center;
padding: 0.75rem 1rem;
font-size: 12px;
color: var(--ink3);
background: var(--bg2);
border-bottom: 1px solid var(--border);
}
.source-strip a { color: var(--ink3); text-decoration: underline; }
.key-number {
text-align: center;
padding: 2rem 1rem;
margin-bottom: 2.5rem;
}
.key-number .kn-value {
font-family: 'Fraunces', serif;
font-size: clamp(2.5rem, 7vw, 4rem);
font-weight: 600;
color: var(--accent);
line-height: 1.1;
}
.key-number .kn-label {
font-size: 1rem;
color: var(--ink2);
margin-top: 0.5rem;
max-width: 540px;
margin-left: auto;
margin-right: auto;
}
.comparison-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 2.5rem;
}
@media (max-width: 480px) {
.comparison-grid { grid-template-columns: 1fr; }
}
.comparison-card {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 6px;
padding: 1.25rem;
text-align: center;
}
.comparison-card .cc-title {
font-size: 11px;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--ink3);
margin-bottom: 0.5rem;
}
.comparison-card .cc-main {
font-family: 'Fraunces', serif;
font-size: clamp(1.8rem, 5vw, 2.4rem);
font-weight: 600;
line-height: 1.1;
}
.comparison-card .cc-sub {
font-size: 0.85rem;
color: var(--ink2);
margin-top: 0.3rem;
}
.comparison-card .cc-detail {
font-size: 12px;
color: var(--ink3);
margin-top: 0.15rem;
}
.h-300 { height: 300px; }
@media (max-width: 480px) {
.h-300 { height: 250px; }
}
</style>
</head>
<body>
<header>
<p class="eyebrow">SSB-data 20152024</p>
<h1>Det er dyrt<br><em>å være fattig</em></h1>
<p class="lead">De fattigste betaler minst i kroner — men mest av inntekten sin. 41 % av de fattigste bruker over 40 % av inntekten på bolig. Blant de rikeste: 7 %.</p>
<div class="stamp">Boligbyrden</div>
</header>
<div class="source-strip">
Data: <a href="https://www.ssb.no/statbank/table/14061/" target="_blank" rel="noopener">SSB tabell 14061</a>,
<a href="https://www.ssb.no/statbank/table/14067/" target="_blank" rel="noopener">14067</a>
— Boligøkonomi og boligeierskap, husholdninger
</div>
<main>
<!-- Nøkkeltall -->
<div class="key-number">
<div class="kn-value">17× mer sannsynlig</div>
<div class="kn-label">De fattigste er 17 ganger mer sannsynlig å bruke over 60 % av inntekten på bolig enn de rikeste (17 % mot 1 %).</div>
</div>
<!-- Sammenligning -->
<div class="comparison-grid">
<div class="comparison-card">
<div class="cc-title">Laveste inntektskvartil</div>
<div class="cc-main" style="color:#c0392b;">120 065 kr/år</div>
<div class="cc-sub">41 % bruker &gt;40 % av inntekten</div>
<div class="cc-detail">54 % leier — bygger ingen formue</div>
</div>
<div class="comparison-card">
<div class="cc-title">Høyeste inntektskvartil</div>
<div class="cc-main" style="color:#2c6e49;">262 940 kr/år</div>
<div class="cc-sub">7 % bruker &gt;40 % av inntekten</div>
<div class="cc-detail">93 % eier — bygger formue</div>
</div>
</div>
<!-- Diagram 1: Boutgiftsandel per inntektsgruppe -->
<div class="chart-section">
<div class="chart-header">
<div>
<div class="chart-title">Boutgifter spiser inntekten</div>
<div class="chart-desc">Boutgifter som andel av inntekt, etter inntektskvartil, 2024</div>
</div>
<div class="legend">
<span><span class="swatch" style="background:#2c6e49;"></span>&lt;10 %</span>
<span><span class="swatch" style="background:#27ae60;"></span>1019 %</span>
<span><span class="swatch" style="background:#e67e22;"></span>2029 %</span>
<span><span class="swatch" style="background:#e74c3c;"></span>3039 %</span>
<span><span class="swatch" style="background:#c0392b;"></span>4059 %</span>
<span><span class="swatch" style="background:#8b1a1a;"></span>60 %+</span>
</div>
</div>
<div class="chart-wrap h-240"><canvas id="chart1"></canvas></div>
</div>
<div class="insight">
De rikeste betaler <strong>dobbelt så mye i kroner</strong> (263 000 vs 120 000 kr/år) — men det utgjør bare
en liten del av inntekten deres. For de fattigste er bolig en <strong>kvelerslange</strong>:
17 % bruker over 60 % av inntekten bare på å ha et sted å bo.
</div>
<!-- Diagram 2: Utviklingen over tid -->
<div class="chart-section">
<div class="chart-header">
<div>
<div class="chart-title">Byrden vokser</div>
<div class="chart-desc">Andel med boutgifter &gt;40 % av inntekt, per kvartil, 20152024</div>
</div>
<div class="legend" id="legend2"></div>
</div>
<div class="chart-wrap h-240"><canvas id="chart2"></canvas></div>
</div>
<div class="insight">
Siden 2015 har andelen med tung boligbyrde (&gt;40 % av inntekt) steget for <strong>alle inntektsgrupper</strong>,
men gapet forblir enormt. I 2024 har de fattigste <strong>5× flere</strong> med tung boligbyrde enn de rikeste.
Rentehoppet fra 2022 rammet alle — men de fattigste hadde minst å gå på.
</div>
<!-- Diagram 3: Eierskap etter inntektsgruppe -->
<div class="chart-section">
<div class="chart-header">
<div>
<div class="chart-title">Penger kjøper eierskap</div>
<div class="chart-desc">Boligeierskap etter inntektsgruppe og utsatte grupper, 2024</div>
</div>
<div class="legend">
<span><span class="swatch" style="background:#2c6e49;"></span>Selveier</span>
<span><span class="swatch" style="background:#1a4a8a;"></span>Andelseier</span>
<span><span class="swatch" style="background:#c0392b;"></span>Leier</span>
</div>
</div>
<div class="chart-wrap h-300"><canvas id="chart3"></canvas></div>
</div>
<div class="insight">
<strong>82 % av sosialhjelpsmottakere leier.</strong> Blant barnefamilier med lav inntekt leier over halvparten.
De betaler husleie som aldri blir til egenkapital — mens boligeiere bygger formue automatisk.
Slik forsterker boligmarkedet ulikheten: de fattige betaler andres boliglån.
</div>
<!-- Forklaring -->
<div class="explainer">
<h3>Hvorfor er dette viktig?</h3>
<p>Bolig er den største utgiftsposten for de fleste husholdninger. Men byrden er <strong>fundamentalt ulik</strong>:
de fattigste bruker en langt større andel av inntekten på å bo — og får mindre igjen for det.</p>
<div class="formula-box">
Fattigste kvartil: <span>120 065 kr/år</span> → 40 % av inntekten<br>
Rikeste kvartil: <span>262 940 kr/år</span> → 15 % av inntekten<br>
Rike betaler mer, men har <span>mer igjen til alt annet</span>
</div>
<p>Det som gjør det ekstra skjevt: <strong>54 % av de fattigste leier</strong>. Husleien er en ren kostnad — ingen
egenkapital bygges opp. De rikeste derimot eier boligen, og boliglånsbetalinger er delvis sparing.
Slik fungerer boligmarkedet som en <strong>formuesmaskin for de rike</strong> og en
<strong>fattigdomsfelle for de fattige</strong>.</p>
<p>Tallene er hentet fra SSB levekårsundersøkelsen
(<a href="https://www.ssb.no/statbank/table/14061/" target="_blank" rel="noopener">tabell 14061</a>,
<a href="https://www.ssb.no/statbank/table/14067/" target="_blank" rel="noopener">14067</a>).
Boutgifter inkluderer husleie/renter/avdrag, kommunale avgifter, forsikring, strøm og fyring.</p>
</div>
</main>
<footer>
<a href="../">&larr; Alle visualiseringer</a> · Kilde: SSB tabeller 14061, 14067 · Laget med Chart.js · <a href="https://kode.naiv.no/olemd/forskjeller.naiv.no">Kildekode</a>
</footer>
<script src="app.js"></script>
</body>
</html>

View file

@ -187,6 +187,12 @@
<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>