Public
Edited
Apr 12, 2023
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(combined, {x: "date", y: "home"}),
Plot.lineY(combined, {x: "date", y: "stock"})
]
})
Insert cell
data-E6cRt.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
chart1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
home = chart1.map((row) => {
return {
date: +row.category.match(/(\d{4})$/)[1],
home: row["Home Ownership Rate"]
};
})
Insert cell
stock = dataE6crt.map((row) => {
return {
date: row["X.1"],
stock: row["% Own stock"]
};
})
Insert cell
combined = {
let h = new Map();
let s = new Map();

for (let row of home.slice().reverse()) {
h.set(row.date, row.home);
}

for (let row of stock.slice().reverse()) {
s.set(row.date, row.stock);
}

const years = [...new Set([...s.keys(), ...h.keys()])].sort((a, b) => a - b);


let res = [];
for (let y of years) {
res.push({
date: new Date(`1/1/${y}`),
y,
home: h.get(y),
stock: s.get(y)
});
}
return res;
}
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