Plot.plot((() => {
const n = 3;
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(": ")
}))
]
}
})())