import {embed} from "@observablehq/auto-resizing-embed"
data = FileAttachment("c6_yksiot_hinnat@2.csv").csv({typed: true})
// Mittareiden valikko ja niihin liittyvät sarakenimet
metricOptions = [
{ label: "Postinumeroalueen keskimääräinen neliöhinta (€/m2)", column: "zipsqprice" },
{ label: "Etäisyys keskustasta (km)", column: "etaisyys_keskustasta" },
]
// Valintavalikko
viewof selectedMetric = Inputs.select(metricOptions, {
label: "Valitse mittari",
format: d => d.label
})
filteredData = {
const data = await FileAttachment("c6_yksiot_hinnat@2.csv").csv({ typed: true });
return data.map(d => ({
Kaupunki: d.kunta,
Periodi: d.after,
Arvo: d[selectedMetric.column]
}));
}
Plot.plot({
color: { legend: false },
y: {
label: selectedMetric.label,
domain: [0, d3.max(filteredData, d => d.Arvo)],
tickFormat: ""
},
x: {},
marks: [
Plot.barY(filteredData, {
fx: "Kaupunki",
x: "Periodi",
y: "Arvo",
fill: "Periodi",
tip: true,
text: d => d.arvo.toFixed(2)
}),
Plot.ruleY([0])
]
})
osuus_plot = Plot.plot({
marginLeft: 100, // Lisää tilaa vasemmalle
marginRight: 100,
marginBottom: 40,
color: { legend: false },
style: {
fontSize: "14px",
},
title: `${selectedMetric.label} kunnittain ja valmistumisvuosittain`,
x: {
label: selectedMetric.label,
domain: [0, d3.max(filteredData, d => d.Arvo)],
tickFormat: d3.format("d"),
labelAnchor: "center"
},
y: {label:null},
fy: {label:""},
marks: [
Plot.barX(filteredData, {
fy: "Kaupunki", // Note: Using fy instead of fx for vertical faceting
y: "Periodi",
x: "Arvo",
fill: "Periodi",
tip: null,
text: d => d.Arvo.toString() // Fixed typo: was 'arvo' (lowercase), should be 'Arvo'
}),
Plot.text(filteredData, {
fy: "Kaupunki", // Note: Using fy instead of fx for vertical faceting
y: "Periodi",
x: d => d.Arvo/2,
fill: "black",
text: d => d.Arvo.toFixed(1)
}),
Plot.ruleX([0])
]
})
Plot.plot({
marginLeft: 150, // Lisää tilaa vasemmalle
marginRight: 150,
title: `${selectedMetric.label} yksiöissä kunnittain ja valmistumisvuosittain`,
x: {
label: selectedMetric.label,
domain: [0, d3.max(filteredData, d => d.Arvo)]
},
y: {
tickFormat: d => d,
label: null
},
marks: [
Plot.barX(filteredData, {
x: "Arvo",
y: d => `${d.Kaupunki} (${d.Periodi})`,
fill: "#3399ff"
}),
Plot.text(filteredData, {
x: "Arvo",
y: d => `${d.Kaupunki} (${d.Periodi})`,
text: d => d.Arvo.toFixed(2),
dx: 5,
dy: 0,
textAnchor: "start"
})
]
})
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.
