28:null 29:["$","title",null,{"children":"Plot: Bivariate choropleth | Gordon Tu | Observable"}] 2e:T8d4,chart = { const legend = Plot.plot({ color: { range: scheme, transform: ([a, b]) => 3 * a + b, unknown: "#ccc" // See Valdez-Cordova, Alaska }, 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: width, height: 800, projection: "identity", color, marks: [ Plot.geo( topojson.feature(us, us.objects.counties), Plot.centroid({ stroke: "white", rough: { id: "I-am-an-id", roughness: 1, strokeWidth: 0.3, fillWeight: 0.51, bowing: 1, fillStyle: "cross-hatch", hachureGap: 2 }, 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 }) ) , () => svg`${legend}` ], style: "overflow: visible;" }); }2f:[{"id":"85cd1742bcef2c42ca4a117fb91627fc9df397f34399898dee65f3a90232edf24fb6348be342ee0216e0a6880bded77a0062a0223d5d96b60ddcffcf210532c6","href":"https://static.observableusercontent.com/files/85cd1742bcef2c42ca4a117fb91627fc9df397f34399898dee65f3a90232edf24fb6348be342ee0216e0a6880bded77a0062a0223d5d96b60ddcffcf210532c6","name":"cdc_diabetes_obesity_2020.csv","type":"text/csv","lastModified":1720456592539.162,"size":46612},{"id":"1ec3edc43ba66c0db419744c479d1b5118bb405587189f3ad739a10853f6f933d86824e809f4b4ad18053ab33fb5dc7c5f3d6bc601654c8ea976afd5b321f517","href":"https://static.observableusercontent.com/files/1ec3edc43ba66c0db419744c479d1b5118bb405587189f3ad739a10853f6f933d86824e809f4b4ad18053ab33fb5dc7c5f3d6bc601654c8ea976afd5b321f517","name":"counties-albers-10m.json","type":"application/json","lastModified":1720456592539.162,"size":795407}] 2c:{"id":"9fad24b12ec04364","slug":null,"title":"Plot: Bivariate choropleth","thumbnail":"7eb259e8ea67dded9be950d5beb0ae98189a1cc784a18e60389a3ceacc3598a3","access_level":"public","create_time":"$D2024-07-08T16:36:32.539Z","update_time":"$D2024-07-19T04:10:23.401Z","view_time":null,"first_public_time":"$D2024-07-08T16:36:32.539Z","has_unpublished_edits":null,"fork":{"id":"7404b5045f6afa2d","slug":"plot-bivariate-choropleth","title":"Plot: Bivariate choropleth","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"95a475743860b9ed","login":"tututwo","name":"Gordon Tu","avatar_url":"https://avatars-next.observableusercontent.com/4ac96dec3c5f9a5db3ebff1df2ae0966ce479368ab735e84e62a4b12da898290","tier":"starter_2024"},"version":1108,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9589da0a366d19b2","login":"tututwo","name":"Gordon Tu","avatar_url":"https://avatars-next.observableusercontent.com/4ac96dec3c5f9a5db3ebff1df2ae0966ce479368ab735e84e62a4b12da898290","tier":null}],"members":[{"type":"individual","id":"9589da0a366d19b2","login":"tututwo","name":"Gordon Tu","avatar_url":"https://avatars-next.observableusercontent.com/4ac96dec3c5f9a5db3ebff1df2ae0966ce479368ab735e84e62a4b12da898290","tier":null,"role":"editor"},{"type":"team","id":"95a475743860b9ed","login":"tututwo","name":"Gordon Tu","avatar_url":"https://avatars-next.observableusercontent.com/4ac96dec3c5f9a5db3ebff1df2ae0966ce479368ab735e84e62a4b12da898290","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Plot: Bivariate choropleth","cells":[{"id":3,"value":"

Plot: Bivariate choropleth

Observable Plot › Gallery

\n\n# Bivariate choropleth\n\nDiabetes and obesity prevalence by county, 2020. Colors: [Joshua Stevens](http://www.joshuastevens.net/cartography/make-a-bivariate-choropleth-map/). Data: [CDC](https://gis.cdc.gov/grasp/diabetes/diabetesatlas-surveillance.html). For details on the data and the method, read our [tutorial](https://observablehq.com/@observablehq/plot-bivariate-choropleth-explained). See also the [D3 version](/@d3/bivariate-choropleth).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1059,"value":"import { Plot } from \"@tututwo/rough-js-plugin-for-observable-plot\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1075,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1093,"value":"","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"","database":"null"},{"id":208,"value":"labels = [\"low\", \"\", \"high\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"label = i => labels[i] ? ` (${labels[i]})` : \"\" ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":831,"value":"data = FileAttachment(\"cdc_diabetes_obesity_2020.csv\").csv()\n .then((data) => {\n data.forEach((d) => {\n d.obesity = +d.obesity; // type as numeric\n d.diabetes = +d.diabetes;\n });\n return data;\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":959,"value":"diabetes_thresholds = d3.scaleQuantile(data.map(d => d.diabetes), [0, 1, 2]).quantiles()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":970,"value":"obesity_thresholds = d3.scaleQuantile(data.map(d => d.obesity), [0, 1, 2]).quantiles()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"bivariateClass = {\n const d = diabetes_thresholds;\n const o = obesity_thresholds;\n return (value) => {\n const { diabetes: a, obesity: b } = value;\n return [\n isNaN(a) ? a : +(a > d[0]) + (a > d[1]),\n isNaN(b) ? b : +(b > o[0]) + (b > o[1])\n ];\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"scheme = [\"#e8e8e8\",\"#ace4e4\",\"#5ac8c8\",\"#dfb0d6\",\"#a5add3\",\"#5698b9\",\"#be64ac\",\"#8c62aa\",\"#3b4994\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":"us = FileAttachment(\"counties-albers-10m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1"}} 2d:"$2c:body"