31:T4e8,stateNameToFips = new Map([ ["Arizona", "04"], ["South Dakota", "46"], ["Florida", "12"], ["Iowa", "19"], ["Mississippi", "28"], ["Louisiana", "22"], ["Alaska", "02"], ["Pennsylvania", "42"], ["Kentucky", "21"], ["Illinois", "17"], ["North Dakota", "38"], ["Missouri", "29"], ["Montana", "30"], ["Oklahoma", "40"], ["Indiana", "18"], ["Vermont", "50"], ["District of Columbia", "11"], ["New Hampshire", "33"], ["Alabama", "01"], ["Massachusetts", "25"], ["Virgin Islands", "78"], ["New Jersey", "34"], ["Nevada", "32"], ["Colorado", "08"], ["New York", "36"], ["Washington", "53"], ["Utah", "49"], ["Connecticut", "09"], ["Virginia", "51"], ["Oregon", "41"], ["Texas", "48"], ["Georgia", "13"], ["Maryland", "24"], ["Puerto Rico", "72"], ["Minnesota", "27"], ["Wisconsin", "55"], ["Wyoming", "56"], ["Idaho", "16"], ["South Carolina", "45"], ["California", "06"], ["West Virginia", "54"], ["North Carolina", "37"], ["Ohio", "39"], ["New Mexico", "35"], ["Hawaii", "15"], ["Kansas", "20"], ["Nebraska", "31"], ["Delaware", "10"], ["Guam", "66"], ["Maine", "23"], ["Michigan", "26"], ["Rhode Island", "44"], ["Arkansas", "05"], ["Tennessee", "47"] ])32:[] 2f:{"title":"Compare Chronic Diseases in U.S. States (V2)","cells":[{"id":0,"value":"md`# Compare Chronic Diseases in U.S. States (V2)\n\nA second take on [Compare Chronic Diseases in U.S. States](https://observablehq.com/@clhenrick/compare-chronic-diseases-in-us-states) that uses a more compact layout for displaying the selected data in a table and grouped bar chart.\n\nUse the \"Mad Lib\" below to select a chronic disease and two states to compare it in. You may also use the map to select states, first click on a selected state to deselect it. Uses data from the U.S. Census 2014–2018 ACS 5 Year estimates and CDC Chronic Disease Indicators.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"madlib = html`

I'd like to compare \n${viewof disease.bind(\n html`${selectStateOptions.map(({ value, label }) =>\n Object.assign(html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"mapTitle = html`

Mean Prevalence of ${disease} for all Racial/Ethnic Groups in the United States

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"map = drawChoroplethMap({\n adminLevel: \"states\",\n colorScale: mapColorScale,\n data: mapData,\n tooltipContents: mapTooltipContent,\n width: mapWidth\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"mapLegend = {\n const l = legend({\n title: `Mean Prevalence of ${disease} Across All Racial/Ethnic Groups (%)`,\n color: mapColorScale,\n tickFormat: \".2f\"\n });\n\n d3.select(l)\n .selectAll(\"text\")\n .attr(\"font-size\", \"12px\");\n\n return l;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":673,"value":"statesDiseaseTable = html`

${disease} Prevalence by Race/Ethnicity

${getDiseaseStatesTable()}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"groupedBarChart = vl\n .markBar()\n .data(groupedBarData)\n .width(100)\n .encode(\n vl.column().fieldN('race'),\n vl.x().fieldN(\"state\"),\n vl.y().fieldQ(groupedBarYLabel),\n vl.color().fieldN(\"state\")\n )\n .render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"viewof disease = new View(\"Diabetes\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"viewof state1 = new View(\"06\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"viewof state2 = new View(\"32\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"state1Name = stateFipsToName.get(state1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"state2Name = stateFipsToName.get(state2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":761,"value":"groupedBarYLabel = `${disease} (%)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":717,"value":"groupedBarData = {\n const data = dataState1\n .map(({ value, name }) => transformRow({ value, name, state: state1Name }))\n .concat(\n dataState2.map(({ value, name }) =>\n transformRow({ value, name, state: state2Name })\n )\n );\n\n function transformRow({ value, name, state }) {\n return {\n race: name,\n state,\n [groupedBarYLabel]: value\n };\n }\n\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"tableData = {\n const diseaseData = diseaseToData.get(disease);\n const dataS1 = diseaseData.find(d => d.locationdesc === state1Name);\n const dataS2 = diseaseData.find(d => d.locationdesc === state2Name);\n\n const keys = Object.keys(dataS1).filter(key => key !== \"locationdesc\");\n\n return keys.map(key => {\n return {\n name: key,\n [state1Name]: dataS1[key],\n [state2Name]: dataS2[key]\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"dataState1 = {\n const data = diseaseToData\n .get(disease)\n .find(d => d.locationdesc === state1Name);\n\n return Object.entries(data)\n .map(([key, value]) => ({ name: key, value }))\n .filter(d => d.name !== \"locationdesc\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"dataState2 = {\n const data = diseaseToData\n .get(disease)\n .find(d => d.locationdesc === stateFipsToName.get(state2));\n\n return Object.entries(data)\n .map(([key, value]) => ({ name: key, value }))\n .filter(d => d.name !== \"locationdesc\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"mapWidth = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":634,"value":"chartWidth = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":636,"value":"tableWidth = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":513,"value":"mapTooltipContent = d =>\n `${stateFipsToName.get(d.id)}
${disease} prevalence: ${d3.format(\".2f\")(\n d.value\n )}%`","pinned":true,"hidden":false,"mode":"ojs"},{"id":502,"value":"mapData = diseaseToData.get(disease).map(d => ({\n id: stateNameToFips.get(d.locationdesc),\n value: d3.mean(\n Object.entries(d)\n .filter(([key, value]) => key !== \"locationdesc\")\n .map(([key, value]) => value)\n )\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":479,"value":"mapColorScale = d3\n .scaleQuantize()\n .domain(d3.extent(mapData, d => d.value))\n .range([\"#f0f9e8\", \"#bae4bc\", \"#7bccc4\", \"#43a2ca\", \"#0868ac\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":481,"value":"mapHeight = (width * 2) / 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":483,"value":"mapPadding = 24","pinned":true,"hidden":false,"mode":"ojs"},{"id":517,"value":"stateFipsToName = new Map(\n Array.from(stateNameToFips).map(([key, value]) => [value, key])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"getDiseaseStatesTable = () => {\n const table = d3.create(\"table\");\n const header = table.append(\"thead\");\n const body = table.append(\"tbody\");\n\n header\n .append(\"tr\")\n .selectAll(\"th\")\n .data([\"Race/Ethnicity\", state1Name, state2Name])\n .join(\"th\")\n .text(d => d);\n\n body\n .selectAll(\"tr\")\n .data(tableData)\n .join(\"tr\")\n .each(renderRow);\n\n function renderRow(d) {\n const row = d3.select(this);\n row.append(\"td\").text(d.name);\n row.append(\"td\").html(valueCell(d[state1Name]));\n row.append(\"td\").html(valueCell(d[state2Name]));\n }\n\n function valueCell(value) {\n return isValue(value) ? `${value}%` : \"no data\";\n }\n\n function isValue(value) {\n return value !== undefined && value !== null && value !== \"\";\n }\n\n return table.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":377,"value":"getDiseaseStateTable = fips => {\n const stateName = statesGeoByFips.get(fips).properties.name;\n const diseaseData = diseaseToData\n .get(disease)\n .find(d => d.locationdesc === stateName);\n const data = Object.keys(diseaseData)\n .slice(1)\n .map(key => ({ name: key, value: diseaseData[key] }));\n\n const table = d3.create(\"table\");\n const header = table.append(\"thead\");\n const body = table.append(\"tbody\");\n\n header\n .append(\"tr\")\n .selectAll(\"th\")\n .data([\"Race/Ethnicity\", `Prevalence of ${disease}`])\n .join(\"th\")\n .text(d => d);\n\n body\n .selectAll(\"tr\")\n .data(data)\n .join(\"tr\")\n .each(renderRow);\n\n function renderRow({ name, value }) {\n const row = d3.select(this);\n row.append(\"td\").text(name);\n const valueCell = row\n .append(\"td\")\n .html(isValue(value) ? `${value}%` : \"no data\");\n }\n\n function isValue(value) {\n return value !== undefined && value !== null && value !== \"\";\n }\n\n return table.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":299,"value":"selectStateOptions = allStatesFips\n .map(({ name, fips }) => ({\n label: name,\n value: fips\n }))\n .sort((a, b) => +a.value - +b.value)","pinned":true,"hidden":false,"mode":"ojs"},{"id":356,"value":"diseaseToData = new Map([\n [\"Asthma\", dataAsthma],\n [\"COPD\", dataCopd],\n [\"Diabetes\", dataDiabetes]\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":352,"value":"dataCopd = pivotbyRaceCopd.objects()","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"dataDiabetes = pivotbyRaceDiabetes.objects()","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"dataAsthma = pivotbyRaceAsthma.objects()","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"asthmaQ = \"Current asthma prevalence among adults aged >= 18 years\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"diabetesQ = \"Prevalence of diagnosed diabetes among adults aged >= 18 years\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"copdQ = \"Prevalence of chronic obstructive pulmonary disease among adults >= 18\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"import { View } from \"@mbostock/synchronized-views\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":286,"value":"import { select, autoSelect } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":539,"value":"import { legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"import { html, svg } from \"@observablehq/htl\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"import { Tooltip } from \"534d662eaa9b53f1\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":493,"value":"import { drawChoroplethMap } from \"@clhenrick/reusable-county-choropleth-map\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"import { pivotbyRaceTable as pivotbyRaceCopd } with {\n copdQ as questionPicker\n} from \"@clhenrick/het-data-intake-u-s-chronic-disease-indicators-cdi-brfss\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":319,"value":"import { pivotbyRaceTable as pivotbyRaceAsthma } with {\n asthmaQ as questionPicker\n} from \"@clhenrick/het-data-intake-u-s-chronic-disease-indicators-cdi-brfss\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":340,"value":"import { pivotbyRaceTable as pivotbyRaceDiabetes } with {\n diabetesQ as questionPicker\n} from \"@clhenrick/het-data-intake-u-s-chronic-disease-indicators-cdi-brfss\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"// import { table as table1, viewof valueTypePicker as vtp1 } with {\n// state1 as selectedFips\n// } from \"@clhenrick/acs-race-ethnicity-characteristics-by-state\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":209,"value":"// import { table as table2, viewof valueTypePicker as vtp2 } with {\n// state2 as selectedFips\n// } from \"@clhenrick/acs-race-ethnicity-characteristics-by-state\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":698,"value":"import { vl } from '@vega/vega-lite-api'","pinned":true,"hidden":false,"mode":"ojs"},{"id":565,"value":"import { drawRowChart } from \"@clhenrick/reusable-row-chart\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"import { allStatesFips } from \"@clhenrick/acs-race-ethnicity-characteristics-by-state\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {\n mapConfig,\n path,\n projection,\n statesGeo,\n statesGeoByFips,\n us,\n topojson\n} from \"@clhenrick/reusable-choropleth-map\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}