import {embed} from "@observablehq/auto-resizing-embed"
data = FileAttachment("pala_yksio22_muutto_ryhmat_c6@1.csv").csv({typed: true})
viewof select_syy = Inputs.select(["Yksinmuutto", "Kimppakämpästä", "Ero", "Vanhemmilta", "Pariskunnan yhteinen muutto", "Muu"], {label: "Valitse muuton tyyppi:"})
viewof select_periodi = Inputs.select(["2010-2016", "2017-2022"], {label: "Valitse valmistumisvuodet:"})
filteredData = data.filter(d => d.ryhmä === select_syy && d.periodi === select_periodi)
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
pinta_ala_plot = Plot.plot({
marginLeft: 110, // Lisää tilaa vasemmalle
marginRight: 100,
style: {
fontSize: "14px",
},
color: { legend: false },
title: `Muutto ${select_periodi} valmistuneeseen yksiöön, pinta-ala per asukas ennen ja jälkeen muuton`,
x: {
label: "Pinta-ala per asukas (m2)",
domain: [0, d3.max(filteredData, d => d.mean_pala_per_hlo)]
},
y: {label:null},
fy: {label:"Kunta"},
marks: [
Plot.barX(filteredData, {
fy: "kunta", // Note: Using fy instead of fx for vertical faceting
y: "muutto",
x: "mean_pala_per_hlo",
fill: "muutto",
tip: true,
text: d => d.mean_pala_per_hlo.toFixed(2) // Fixed typo: was 'arvo' (lowercase), should be 'Arvo'
}),
Plot.ruleX([0])
]
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
