2e:null 2f:["$","title",null,{"children":"Plot: Bivariate choropleth, explained | Observable | Observable"}] 34:T524,chart = { const L = legend(); const color = L.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`${L}` ], style: "overflow: visible;" }); }35:T423,Plot.plot({ width: 450, inset: 10, color: legend().scale("color"), marks: [ Plot.linearRegressionY(data, { x: "diabetes", y: "obesity", opacity: 0.5 }), Plot.dot(data, { x: "diabetes", y: "obesity", fill: bivariateClass, channels: { county: "county" }, tip: true, r: 1.4 }), Plot.text( data, Plot.groupZ( { text: "count", x: "mean", y: "mean" }, { fontSize: 14, stroke: "white", strokeWidth: 8, fill: "currentColor", x: "diabetes", y: "obesity", z: (d) => bivariateClass(d).toString() } ) ), ["p33", "p67"].map((pxx) => [ Plot.ruleX( data, Plot.groupZ( { x: pxx }, { x: "diabetes", strokeDasharray: 4, strokeOpacity: 0.4 } ) ), Plot.ruleY( data, Plot.groupZ( { y: pxx }, { y: "obesity", strokeDasharray: 4, strokeOpacity: 0.4 } ) ) ]) ] })36:[{"id":"1ec3edc43ba66c0db419744c479d1b5118bb405587189f3ad739a10853f6f933d86824e809f4b4ad18053ab33fb5dc7c5f3d6bc601654c8ea976afd5b321f517","href":"https://static.observableusercontent.com/files/1ec3edc43ba66c0db419744c479d1b5118bb405587189f3ad739a10853f6f933d86824e809f4b4ad18053ab33fb5dc7c5f3d6bc601654c8ea976afd5b321f517","name":"counties-albers-10m.json","type":"application/json","lastModified":1689178057359.153,"size":795407},{"id":"85cd1742bcef2c42ca4a117fb91627fc9df397f34399898dee65f3a90232edf24fb6348be342ee0216e0a6880bded77a0062a0223d5d96b60ddcffcf210532c6","href":"https://static.observableusercontent.com/files/85cd1742bcef2c42ca4a117fb91627fc9df397f34399898dee65f3a90232edf24fb6348be342ee0216e0a6880bded77a0062a0223d5d96b60ddcffcf210532c6","name":"cdc_diabetes_obesity_2020.csv","type":"text/csv","lastModified":1689178057359.153,"size":46612}] 32:{"id":"b16a0b5366d7d4cb","slug":"plot-bivariate-choropleth-explained","title":"Plot: Bivariate choropleth, explained","thumbnail":"b8f8cc642bf41798f6726477404c4aaedf054ab742254cab9b0dfebb12e3db2b","access_level":"public","create_time":"$D2023-07-12T16:07:37.359Z","update_time":"$D2024-09-23T09:48:54.469Z","view_time":null,"first_public_time":"$D2023-07-12T16:19:55.126Z","has_unpublished_edits":null,"fork":{"id":"7404b5045f6afa2d","slug":"plot-bivariate-choropleth","title":"Plot: Bivariate choropleth","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":34,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":1010,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}],"members":[{"type":"group","id":"76aea96fc709f166","login":"8233674146ba4cfe","name":"Plot","avatar_url":null,"tier":"public","role":"editor"},{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"},{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"title":"Plot: Bivariate choropleth, explained","cells":[{"id":3,"value":"

Plot: Bivariate choropleth, explained

Observable Plot › Gallery

\n\n# Bivariate choropleth, explained\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). Our [code only](/@observablehq/plot-bivariate-choropleth) version is ready to fork and adapt.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"viewof scheme = Inputs.select(new Map(schemes.map(s => [s.name, s.colors])), {key: \"BuPu\", label: \"Color scheme\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"---\n

${legend()}

**Building this chart** begins with the color scale. We generate it with a small chart that will be used as a legend. Nine squares rotated 45° represent all the possible pairs of diabetes & obesity levels — 0 for low, 1 for medium, 2 for high. Each pair is transformed into a number, matched to the color scheme. For example, the class of counties where diabetes is medium and obesity is high is represented by [1, 2], and the associated color is at index 5 (“12” in base 3). The legend is included in the main chart, and its scale is used to color the counties according to their classification.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":430,"value":"legend = () =>\n Plot.plot({\n color: {\n range: scheme,\n transform: ([a, b]) => 3 * a + b,\n unknown: \"#ccc\" // See Valdez-Cordova, Alaska\n },\n axis: null,\n margin: 0,\n inset: 18,\n width: 106,\n height: 106,\n style: \"overflow: visible;\", // for the tip\n marks: [\n Plot.dot(d3.cross([0, 1, 2], [0, 1, 2]), {\n x: ([a, b]) => b - a,\n y: ([a, b]) => b + a,\n symbol: \"square\",\n rotate: 45,\n r: 14,\n fill: (d) => d,\n title: ([a, b]) => `Diabetes${label(a)}\\nObesity${label(b)}`,\n tip: true\n }),\n Plot.text([\"Obesity →\"], {\n frameAnchor: \"right\",\n fontWeight: \"bold\",\n rotate: -45,\n dy: 10\n }),\n Plot.text([\"← Diabetes\"], {\n frameAnchor: \"left\",\n fontWeight: \"bold\",\n rotate: 45,\n dy: 10\n })\n ]\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"The three labels are presented as an array, indexed by [0, 1, 2]. A utility function is used to display them with surrounding parentheses in the interactive tips.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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":830,"value":"Up to this point, the mini-chart that creates the legend and the color scale does not have an idea of the actual values that correspond to “low” or “high”. To compute the corresponding thresholds, we need an actual dataset. **The data** was downloaded from the CDC website, and joined in a single file that has three columns: county (FIPS), obesity (prevalence among adults, %), and diabetes (prevalence among adults, %) — to reproduce, see the [data preparation notebook](https://observablehq.com/@fil/obesity-diabetes-by-county-2020).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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":747,"value":"**The bivariate classification** is a partition of the data into nine classes, obtained as an intersection of a quantile partition on each of the two dimensions. First, by incidence of _diabetes_:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"diabetes = Plot.plot({\n width: 640,\n height: 330,\n x: {line: true},\n color: { type: \"quantile\", range: [0, 1, 2].map((i) => scheme[3 * i]) },\n marks: [\n Plot.dotX(\n data,\n Plot.dodgeY({\n x: \"diabetes\",\n fill: \"diabetes\",\n r: 1.2,\n padding: 0.2,\n })\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"Second partition, by incidence of _obesity_:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"obesity = Plot.plot({\n width: 640,\n height: 170,\n x: {line: true},\n color: { type: \"quantile\", range: [0, 1, 2].map((i) => scheme[i]) },\n marks: [\n Plot.dotX(\n data,\n Plot.dodgeY({\n x: \"obesity\",\n fill: \"obesity\",\n r: 1.2,\n padding: 0.2,\n })\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"The quantiles derived from these two dimensions inform a _bivariateClass_ function, that reads the `{diabetes, obesity}` value of a county and return its class as, say, [1, 2] if the incidence of diabetes is in the medium quantile, and the incidence of obesity in the high quantile.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"bivariateClass = {\n const d = diabetes.scale(\"color\").domain; // thresholds for diabetes\n const o = obesity.scale(\"color\").domain; // thresholds for obesity\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":953,"value":"There is no obligation to separate the classes by quantiles. A common method is [Jenks’ natural breaks](https://observablehq.com/@visionscarto/natural-breaks) — we could even set the values manually from some other reference. Let’s also mention that we can compute the quantiles directly with [d3.scaleQuantile](https://d3js.org/d3-scale/quantile):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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":761,"value":"On a scatterplot, the classification looks like this — with the quantiles on each dimension marked by horizontal and vertical rules, and an indication of the number of counties in each bivariate class. (The quantiles in each dimension have the same number of values, by definition, but the intersections don’t, reflecting the correlation between the two dimensions.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":574,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":988,"value":"**The color schemes** were developed by [Joshua Stevens](http://www.joshuastevens.net/cartography/make-a-bivariate-choropleth-map/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":991,"value":"schemes = [\n {\n name: \"RdBu\", \n colors: [\n \"#e8e8e8\", \"#e4acac\", \"#c85a5a\",\n \"#b0d5df\", \"#ad9ea5\", \"#985356\",\n \"#64acbe\", \"#627f8c\", \"#574249\"\n ]\n },\n {\n name: \"BuPu\", \n colors: [\n \"#e8e8e8\", \"#ace4e4\", \"#5ac8c8\",\n \"#dfb0d6\", \"#a5add3\", \"#5698b9\", \n \"#be64ac\", \"#8c62aa\", \"#3b4994\"\n ]\n },\n {\n name: \"GnBu\", \n colors: [\n \"#e8e8e8\", \"#b5c0da\", \"#6c83b5\",\n \"#b8d6be\", \"#90b2b3\", \"#567994\",\n \"#73ae80\", \"#5a9178\", \"#2a5a5b\"\n ]\n },\n {\n name: \"PuOr\", \n colors: [\n \"#e8e8e8\", \"#e4d9ac\", \"#c8b35a\",\n \"#cbb8d7\", \"#c8ada0\", \"#af8e53\",\n \"#9972af\", \"#976b82\", \"#804d36\"\n ]\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":798,"value":"---\nThe **geographic data** is our usual counties TopoJSON file, preprojected with the Albers-USA projection to a 975×610 frame.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"