Public
Edited
May 6
2 forks
Insert cell
Insert cell
import {embed} from "@observablehq/auto-resizing-embed"
Insert cell
data = FileAttachment("pinta_alat_uudet_yksiot_c6@5.csv").csv({typed: true})
Insert cell
viewof select_kunta = Inputs.select(["Helsinki", "Turku", "Tampere", "Espoo", "Oulu", "Vantaa"], {label: "Valitse kunta:"})
Insert cell
viewof select_ara = Inputs.select(["Kaikki", "Markkinaehtoinen", "Ara"], {label: "Valitse tarkasteltavat asunnot:"})
Insert cell
plotti = Plot.plot({
marginTop: 30,
marginBottom: 40,
marginLeft: 55,
marginRight: 30,
x: {tickFormat: "", label: "Valmistumisvuosi"}, // no comma for years
y: {axis: "left", label: "Uudet asunnot", transform: (d) => d}, // show sales in millions
style: {
fontSize: "14px",
},
color: "blue",
marks: [
Plot.axisY(d3.scaleLinear(d3.extent(data, (d) => d.mean_pala), [0, d3.max(data, (d) => d.sum_obs)]).ticks(), {color: "red", anchor: "right", label: "Keskipinta-ala (m2)", y: d3.scaleLinear(d3.extent(data, (d) => d.mean_pala), [0, d3.max(data, (d) => d.sum_obs)]), tickFormat: d3.scaleLinear(d3.extent(data, (d) => d.mean_pala), [0, d3.max(data, (d) => d.sum_obs)]).tickFormat()}),
Plot.ruleY([0]),
Plot.barY(data.filter(d => d.kunta === select_kunta && d.ara === select_ara), {x: "vavv", y: (d) => d.sum_obs, fill: "steelblue"}),
Plot.lineY(data.filter(d => d.kunta === select_kunta && d.ara === select_ara), Plot.mapY((D) => D.map(d3.scaleLinear(d3.extent(data, (d) => d.mean_pala), [0, d3.max(data, (d) => d.sum_obs)])), {x: "vavv", y: (d) => d.mean_pala, stroke: "red"})),
Plot.dot(data.filter(d => d.kunta === select_kunta && d.ara === select_ara), Plot.mapY((D) => D.map(d3.scaleLinear(d3.extent(data, (d) => d.mean_pala), [0, d3.max(data, (d) => d.sum_obs)])), {x: "vavv", y: (d) => d.mean_pala, stroke: "red"}))
]
});

Insert cell

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.
Learn more