Public
Edited
Aug 17, 2023
Insert cell
Insert cell
Insert cell
happiness_data.csv
X
Logged GDP per capita
Y
Ladder score
Color
Social support
Size
Generosity
Facet X
Facet Y
Region
Mark
dot
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Plot.plot((() => {
const n = 3; // number of facet columns
const keys = Array.from(d3.union(filteredData.map((d) => d["Region"])));
const index = new Map(keys.map((key, i) => [key, i]));
const fx = (key) => index.get(key) % n;
const fy = (key) => Math.floor(index.get(key) / n);
return {
width: 1200,
height: 1200,
r: {domain: [-0.3,0.6], range: [1,10]},
color: {scheme: "plasma", label: "Social support", legend: true, reverse: true},
marks: [
Plot.dot(Happiness, {x: "Logged GDP per capita", y: "Ladder score", r: 1, fill: "#bbb"}),
Plot.dot(filteredData, {x: "Logged GDP per capita", y: "Ladder score", fx: (d) => fx(d["Region"]),fy: (d) => fy(d["Region"]),stroke: "Social support", r: "Generosity"}),
Plot.tip(filteredData, Plot.pointer({
x: "Logged GDP per capita",
y: "Ladder score",
fx: (d) => fx(d["Region"]),fy: (d) => fy(d["Region"]),
title: (d) => [d["Region"], d["Country"]].join(": ")
}))
]
}
})())
Insert cell
Array.from(d3.union(filteredData.map((d) => d["Region"])))
Insert cell
urbanization@3.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
duckdb = DuckDBClient.of({happiness: Happiness, urbanization:urbanization})
Insert cell
duckdb
select h.*, u.* from happiness as h join urbanization as u on h.CountryCode = u.CountryCode where "urbanization" <= ${selectedUrbanization}
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