Diabetes${labels[j] && ` (${labels[j]})`} Obesity${labels[i] && ` (${labels[i]})`}

2b:null 2c:["$","title",null,{"children":"Bivariate Choropleth with toggles | Monika Tuchowska | Observable"}] 31:T64b,chart = { const svg = d3.create("svg") .attr("width", 975) .attr("height", 610) .attr("viewBox", [0, 0, 975, 610]) .attr("style", "max-width: 100%; height: auto;"); svg.append(legend) .attr("transform", "translate(870,450)"); const x = d3.scaleQuantile(Array.from(data, d => d.diabetes), d3.range(n)); const y = d3.scaleQuantile(Array.from(data, d => d.obesity), d3.range(n)); const index = d3.index(data, d => d.county); const path = d3.geoPath(); const color = (value) => { if (!value) return "#ccc"; const {diabetes: a, obesity: b} = value; if (diabetesFilter && obesityFilter) return colors[y(b) + x(a) * n]; if (diabetesFilter) return colors[x(a)*n] if (obesityFilter) return colors[y(b)] return "white" }; const format = (value) => { if (!value) return "N/A"; const {diabetes: a, obesity: b} = value; return `${a}% Diabetes${labels[x(a)] && ` (${labels[x(a)]})`} ${b}% Obesity${labels[y(b)] && ` (${labels[y(b)]})`}`; }; svg.append("g") .selectAll("path") .data(topojson.feature(us, us.objects.counties).features) .join("path") .attr("fill", d => color(index.get(d.id))) .attr("d", path) .append("title") .text(d => `${d.properties.name}, ${states.get(d.id.slice(0, 2)).name} ${format(index.get(d.id))}`); svg.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); return svg.node(); }32:T42b,legend = () => { const k = 24; const arrow = DOM.uid(); return svg` ${d3.cross(d3.range(n), d3.range(n)).map(([i, j]) => svg` Diabetes${labels[j] && ` (${labels[j]})`} Obesity${labels[i] && ` (${labels[i]})`} `)} Diabetes} Obesity `; }33:[{"id":"85cd1742bcef2c42ca4a117fb91627fc9df397f34399898dee65f3a90232edf24fb6348be342ee0216e0a6880bded77a0062a0223d5d96b60ddcffcf210532c6","href":"https://static.observableusercontent.com/files/85cd1742bcef2c42ca4a117fb91627fc9df397f34399898dee65f3a90232edf24fb6348be342ee0216e0a6880bded77a0062a0223d5d96b60ddcffcf210532c6","name":"cdc_diabetes_obesity_2020.csv","type":"text/csv","lastModified":1689622959320.12,"size":46612},{"id":"6b1776f5a0a0e76e6428805c0074a8f262e3f34b1b50944da27903e014b409958dc29b03a1c9cc331949d6a2a404c19dfd0d9d36d9c32274e6ffbc07c11350ee","href":"https://static.observableusercontent.com/files/6b1776f5a0a0e76e6428805c0074a8f262e3f34b1b50944da27903e014b409958dc29b03a1c9cc331949d6a2a404c19dfd0d9d36d9c32274e6ffbc07c11350ee","name":"counties-albers-10m.json","type":"application/octet-stream","lastModified":1689622959320.12,"size":795407}] 2f:{"id":"5cfa416a619f5d54","slug":null,"title":"Bivariate Choropleth with toggles","thumbnail":"26eacbf3a35ef8c172d5dff6fa1e0d937ff08b93d828ddb086fcd633e40ffa86","access_level":"public","create_time":"$D2023-07-17T19:42:39.320Z","update_time":"$D2024-05-01T19:36:35.026Z","view_time":null,"first_public_time":"$D2023-07-17T19:42:39.320Z","has_unpublished_edits":null,"fork":{"id":"8b1da0468b5f1e92","slug":"bivariate-choropleth","title":"Bivariate choropleth","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"07f2f7dfb158916a","login":"tuchowska","name":"Monika Tuchowska","avatar_url":"https://avatars-next.observableusercontent.com/09caa02f9916abbb16b1df5949e9eeda374531f41967f85c9027d9a181d45a08","tier":"starter_2024"},"version":519,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c097745b3b212897","login":"tuchowska","name":"Monika Tuchowska","avatar_url":"https://avatars-next.observableusercontent.com/09caa02f9916abbb16b1df5949e9eeda374531f41967f85c9027d9a181d45a08","tier":null}],"members":[{"type":"individual","id":"c097745b3b212897","login":"tuchowska","name":"Monika Tuchowska","avatar_url":"https://avatars-next.observableusercontent.com/09caa02f9916abbb16b1df5949e9eeda374531f41967f85c9027d9a181d45a08","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Bivariate Choropleth with toggles","cells":[{"id":0,"value":"# Bivariate Choropleth with toggles\n\nI modified Mike Bostock's [Bivariate choropleth](https://observablehq.com/@d3/bivariate-choropleth) to allow for toggling variables on and off.\n\nDiabetes and obesity prevalence by county, 2020. Colors: [Joshua Stevens](http://www.joshuastevens.net/cartography/make-a-bivariate-choropleth-map/) Data: [CDC](https://www.cdc.gov/diabetes/data/countydata/countydataindicators.html)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":194,"value":"viewof colors = Inputs.radio(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":475,"value":"viewof diabetesFilter = Inputs.toggle({ value:true, label: \"Diabetes\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"povertyLegend = Legend(d3.scaleOrdinal([\"Low\", \"Med\", \"High\"], diabetesColors), {\n tickSize: 0, \n width: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"viewof obesityFilter = Inputs.toggle({ value:true, label: \"Obesity\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"obesityLegend = Legend(d3.scaleOrdinal([\"Low\", \"Med\", \"High\"], obesityColors), {\n tickSize: 0, \n width: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"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":483,"value":"diabetesColors = [colors[0],colors[3], colors[6]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"obesityColors = colors.slice(0,3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"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":216,"value":"labels = [\"low\", \"\", \"high\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"n = Math.floor(Math.sqrt(colors.length))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"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"},{"id":8,"value":"us = FileAttachment(\"counties-albers-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"