262 lines
8.5 KiB
JavaScript
262 lines
8.5 KiB
JavaScript
|
// 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: '10–19 %', data: HOUSING_BURDEN.from10to19, backgroundColor: '#27ae60cc', borderColor: '#27ae60', borderWidth: 1, borderRadius: 1 },
|
|||
|
|
{ label: '20–29 %', data: HOUSING_BURDEN.from20to29, backgroundColor: '#e67e22cc', borderColor: '#e67e22', borderWidth: 1, borderRadius: 1 },
|
|||
|
|
{ label: '30–39 %', data: HOUSING_BURDEN.from30to39, backgroundColor: '#e74c3ccc', borderColor: '#e74c3c', borderWidth: 1, borderRadius: 1 },
|
|||
|
|
{ label: '40–59 %', 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
|
|||
|
|
});
|