chart = {
const legend = Plot.plot({
color: {
range: scheme,
transform: ([a, b]) => 3 * a + b,
unknown: "#ccc"
},
axis: null,
margin: 0,
inset: 18,
width: 106,
height: 106,
style: "overflow: visible;",
marks: [
Plot.dot(d3.cross([0, 1, 2], [0, 1, 2]), {
x: ([a, b]) => b - a,
y: ([a, b]) => b + a,
symbol: "square",
rotate: 45,
r: 14,
fill: (d) => d,
title: ([a, b]) => `Diabetes${label(a)}\nObesity${label(b)}`,
tip: true
}),
Plot.text(["Obesity →"], {
frameAnchor: "right",
fontWeight: "bold",
rotate: -45,
dy: 10
}),
Plot.text(["← Diabetes"], {
frameAnchor: "left",
fontWeight: "bold",
rotate: 45,
dy: 10
})
]
});
const color = legend.scale("color");
const index = new Map(data.map(({ county, ...rest }) => [county, rest]));
return Plot.plot({
width: 975,
height: 610,
projection: "identity",
color,
marks: [
Plot.geo(
topojson.feature(us, us.objects.counties),
Plot.centroid({
stroke: "white",
strokeWidth: 0.125,
fill: (d) => bivariateClass(index.get(d.id)),
title: (d) => {
const name = `${d.properties.name}, ${states.get(d.id.slice(0, 2)).name}`;
const value = index.get(d.id);
if (!value || (isNaN(value.diabetes) && isNaN(value.obesity)))
return `${name}\nno data`;
const [dc, oc] = bivariateClass(value);
return `${name}\n${
isNaN(value.diabetes) ? "No Data" : value.diabetes
}% Diabetes${label(dc)}\n${
isNaN(value.obesity) ? "No Data" : value.obesity
}% Obesity${label(oc)}`;
},
tip: true
})
),
Plot.geo(topojson.mesh(us, us.objects.states, (a, b) => a !== b), {stroke: "white"}),
() => svg`<g transform="translate(835,410)">${legend}`
],
style: "overflow: visible;"
});
}