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","cells":[{"id":0,"value":"md`# Compare Chronic Diseases in U.S. States\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":206,"value":"tableState1 = {\n if (state1 !== null) {\n // if (disease === \"Demographics\") {\n // d3.select(table1)\n // .select(\"p.table-title\")\n // .style(\"background-color\", colors[0])\n // .style(\"padding\", \"12px\")\n // .style(\"display\", \"inline-block\");\n // return table1;\n // }\n return html`

${\n statesGeoByFips.get(state1).properties.name\n }

${getDiseaseStateTable(state1)}

`;\n }\n return \"select a state\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"rowChartState1 = drawRowChart({\n data: dataState1,\n pct: true,\n title: `${disease} Prevalence in ${state1Name} by Race/Ethnicity`,\n width: chartWidth,\n ticksX: 5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"tableState2 = {\n if (state2 !== null) {\n // if (disease === \"Demographics\") {\n // d3.select(table2)\n // .select(\"p.table-title\")\n // .style(\"background-color\", colors[1])\n // .style(\"padding\", \"12px\")\n // .style(\"display\", \"inline-block\");\n // return table2;\n // }\n return html`

${\n statesGeoByFips.get(state2).properties.name\n }

${getDiseaseStateTable(state2)}

`;\n }\n return \"select a second state\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"rowChartState2 = drawRowChart({\n data: dataState2,\n pct: true,\n title: `${disease} Prevalence in ${state2Name} by Race/Ethnicity`,\n width: chartWidth,\n ticksX: 5\n})","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":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":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":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"}