31:T654,md`**Some Viz Ideas:** - [ ] Grouped bar chart showing each race/ethnicity diabetes % by state - [ ] Regular bar chart showing selected race/ethnicity diabetes % by state - [x] Regular bar chart showing each race/ethnicity for a selected state - [ ] Small tables showing all race / ethnicity % diabetes for a selected state - [ ] Map of U.S. states showing race/ethnicity with the largest diabetes % (_not sure this would work because of missing race/ethnicity data for quite a few states_) - [ ] Map of U.S. states showing max diabetes % for all race/ethnicity - [x] Small multiples of maps of U.S. states showing % for each race/ethnicity - [x] Map of U.S. states showing % values for selected race / ethnicity - [ ] Map of U.S. states showing % difference for a selected race from white people - [ ] Map of U.S. states showing estimated population with diabetes (would require combining with ACS data) - [x] Dot Chart showing all states & diabetes % values for all races - [ ] Instead of small multiples in the above ideas, maybe instead allow for comparing two states, or comparing a single state to the national average for all states **Prerequisites** - [ ] Join the diabetes data with ACS population characteristics data so that we have population counts by race / ethnicity? - **Question: how do we correctly or most accurately map the CDC's definitions of race/ethnicity to the U.S. Census' defiinition?** - This will be necessary to show disparity compared with a group's % of the total population for a state, to give a per capita number, to give estimated number of total people by race with diabetes.`32:T1033,dotChart = { // TODO: clicking on a dot updates the legend selection? // TODO: sort by race descending or sort by state alphabetically const radius = 6; const padding = 3; const margin = { top: 36, left: 125, bottom: 48, right: 48 }; const height = stateNames.length * radius * 3 + padding * 4; const yScale = d3 .scalePoint() .range([margin.top, height - margin.bottom]) .domain(stateNames) .padding(0.5); const xScale = d3 .scaleLinear() .range([margin.left, width - margin.right]) .domain([0, d3.max(data, d => d.datavalue)]); const xAxis = g => g .attr("transform", `translate(0, ${margin.top})`) .call(d3.axisTop(xScale).tickFormat(d => `${d}%`)) .call(g => g.select(".domain").remove()); const xAxis2 = g => g .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(xScale).tickFormat(d => `${d}%`)) .call(g => g.select(".domain").remove()); const yAxis = g => g .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(yScale).tickSize(0)) .call(g => g.select(".domain").remove()); const container = html`

`; const svg = d3 .select(container) .append("svg") .attr("viewBox", `0 0 ${width} ${height}`); const div = d3 .select(container) .append("div") .classed("tooltip", true); const tooltip = new Tooltip(div); svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr("fill", "#fff"); svg.append("g").call(yAxis); svg.append("g").call(xAxis); svg.append("g").call(xAxis2); const states = svg .selectAll("g.state") .data(Array.from(groupedState), ([state, d]) => state) .join("g") .classed("state", true) .attr( "transform", ([state, d]) => `translate(0, ${yScale(d[0].locationdesc)})` ); states .append("line") .attr("x1", margin.left) .attr("y1", 0) .attr("x2", width - margin.right) .attr("y2", 0) .attr("stroke", "#e2e2e2"); states .append("line") .classed("min-max", true) .attr("x1", ([, d]) => xScale(d3.min(d, v => v.datavalue))) .attr("y1", 0) .attr("x2", ([, d]) => xScale(d3.max(d, v => v.datavalue))) .attr("y2", 0) .attr("stroke", "#ccc") .attr("stroke-width", 3); states .selectAll("circle") .data(([state, d]) => d.filter(d2 => d2.datavalue !== null)) .join("circle") .attr("cx", d => xScale(d.datavalue)) .attr("cy", 0) .attr("r", radius) .attr("fill", setFillAttr) .attr("opacity", 1) .attr("stroke", "#333") .attr("stroke-width", 0) .on("mouseover", handleMouseover) .on("mouseout", handleMouseout) .on("mousemove", handleMousemove); function setFillAttr(d) { if (!dotChartRaceFilter.size) { return raceColorScale(d.stratification1); } else if (dotChartRaceFilter.has(d.stratification1)) { d3.select(this).raise(); return raceColorScale(d.stratification1); } else { return "#ccc"; } } function handleMouseover(event, d) { if (!dotChartRaceFilter.size) { reveal(event, d); } else if (dotChartRaceFilter.has(d.stratification1)) { reveal(event, d); } } function reveal(event, d) { d3.select(event.target) .attr("stroke-width", 2) .raise(); tooltip.display(d, tooltipContents); } function handleMouseout() { d3.select(this).attr("stroke-width", 0); tooltip.hide(); } function handleMousemove(event) { tooltip.move(event); } function tooltipContents({ stratification1, datavalue, locationdesc }) { return `${locationdesc}
${stratification1}, ${datavalue}%`; } return container; }33:T5f6,small_multiple_maps_all_races = { const p = 12; const w = Math.floor(width / 2) - p * 2; const h = (w * 3) / 5; const container = html`

`; for (let race of groups) { const name = race.replace(/,/gi, "").replace(/ /gi, ""); const curData = data .filter(d => d.stratification1 === race) .map(({ locationabbr, datavalue }) => ({ id: stateAbbrToFips.get(locationabbr), value: datavalue })); const div = html`

${race}

${drawChoroplethMap({ adminLevel: "states", data: curData, colorScale: mapColorScale, name: `${name}-diabetes-pct`, tooltipContents, zoomEnabled: false, borderEnabled: false, width: w, height: h })}

`; container.append(div); } return container; }34:T746,chart = { const margin = { top: 12, right: 24, bottom: 60, left: 125 }; const height = 225; const data = selectedStateData.slice(); const xScale = d3 .scaleLinear() .domain([0, 25]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleBand() .domain(data.map(d => d.stratification1).sort()) .range([margin.top, height - margin.bottom]) .padding(0.3); const xAxis = g => g .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(xScale).tickFormat(d => `${d}%`)) .call(g => g.select(".domain").remove()); const yAxis = g => g .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(yScale)) .call(g => g.select(".domain").remove()); const container = html`

`; const svg = d3 .select(container) .append("svg") .attr("viewBox", `0 0 ${width} ${height}`); svg.append("g").call(yAxis); svg.append("g").call(xAxis); const barGroups = svg .selectAll("g.bar-group") .data(data, d => d.stratification1) .join("g") .classed("bar-group", true); barGroups .append("rect") .attr("x", xScale(0)) .attr("y", d => yScale(d.stratification1)) .attr("height", yScale.bandwidth()) .attr("width", d => xScale(d.datavalue) - xScale(0)) .attr("fill", "steelblue"); barGroups .append("text") .attr("fill", "#333") .attr("font-size", 12) .attr("font-family", "sans-serif") .attr("x", d => { if (d.datavalue === null) { return xScale(0) + 6; } else { return xScale(d.datavalue) + 6; } }) .attr("y", d => yScale(d.stratification1)) .attr("dy", yScale.bandwidth() / 2 + 4) .text(d => (d.datavalue !== null ? `${d.datavalue}%` : "no data")); return container; }35:T744,bar_chart_all_states_sel_race = { const margin = { top: 12, right: 36, bottom: 36, left: 125 }; const height = stateNames.length * 24; const data = dataByRaceSelected; const xScale = d3 .scaleLinear() .domain([0, 25]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleBand() .domain(stateNames) .range([margin.top, height - margin.bottom]) .padding(0.3); const xAxis = g => g .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(xScale).tickFormat(d => `${d}%`)) .call(g => g.select(".domain").remove()); const yAxis = g => g .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(yScale)) .call(g => g.select(".domain").remove()); const container = html`

`; const svg = d3 .select(container) .append("svg") .attr("viewBox", `0 0 ${width} ${height}`); svg.append("g").call(yAxis); svg.append("g").call(xAxis); const barGroups = svg .selectAll("g.bar-group") .data(data, d => d.locationabbr) .join("g") .classed("bar-group", true); barGroups .append("rect") .attr("x", xScale(0)) .attr("y", d => yScale(d.locationdesc)) .attr("height", yScale.bandwidth()) .attr("width", d => xScale(d.datavalue) - xScale(0)) .attr("fill", "steelblue"); barGroups .append("text") .attr("fill", "#333") .attr("font-size", 12) .attr("font-family", "sans-serif") .attr("x", d => { if (d.datavalue === null) { return xScale(0) + 6; } else { return xScale(d.datavalue) + 6; } }) .attr("y", d => yScale(d.locationdesc)) .attr("dy", yScale.bandwidth() / 2 + 4) .text(d => (d.datavalue !== null ? `${d.datavalue}%` : "no data")); return container; }36:T7cc,groupedBarStateRace = { const margin = { top: 12, right: 36, bottom: 36, left: 125 }; const padding = 24; const height = stateNames.length * 3 * padding; const data = groupedBarData.slice(); console.log(data); const keys = groups.slice(); const groupKey = "locationdesc"; const xScale = d3 .scaleLinear() .domain([0, 25]) .range([margin.left, width - margin.right]); const yScale0 = d3 .scaleBand() .domain(stateNames) .rangeRound([margin.top, height - margin.bottom]) .paddingInner(0.3); const yScale1 = d3 .scaleBand() .domain(keys) .rangeRound([0, yScale0.bandwidth()]) .padding(0.1); const colorScale = raceColorScale.copy(); const xAxis = g => g .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(xScale).tickFormat(d => `${d}%`)) .call(g => g.select(".domain").remove()); const yAxis = g => g .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(yScale0)) .call(g => g.select(".domain").remove()); const container = html`

`; const svg = d3 .select(container) .append("svg") .attr("viewBox", `0 0 ${width} ${height}`); svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr("fill", "#fff"); svg.append("g").call(yAxis); svg.append("g").call(xAxis); svg .selectAll("g.bar-group") .data(data, d => d.locationdesc) .join("g") .classed("bar-group", true) .attr("transform", d => `translate(0, ${yScale0(d.locationdesc)})`) .selectAll("rect") .data(d => keys.map(key => ({ key, value: d[key] })).filter(d => d.value)) .join("rect") .attr("y", d => yScale1(d.key)) .attr("x", d => xScale(0)) .attr("height", yScale1.bandwidth()) .attr("width", d => xScale(d.value) - xScale(0)) .attr("fill", d => colorScale(d.key)); return container; }37:[] 2f:{"title":"Viz Ideas for U.S. Chronic Disease Indicators: Diabetes","cells":[{"id":0,"value":"md`# Viz Ideas for U.S. Chronic Disease Indicators: Diabetes\n\nSome potential visualizations that could be created for the dataset [_U.S. Chronic Disease Indicators: Diabetes_](https://observablehq.com/@clhenrick/het-data-intake-template-cdc-diabetes-state-level?collection=@clhenrick/msm-fellowship-data-intake), published by the CDC.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`## Visualizations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"dot_chart = md`### Dot Chart, Percentage of Population with Diabetes by Race/Ethnicity\n\nThis chart may be the best solution for showing all racial/ethnic groups at once for all states or a subset of states. Some ideas for interactivity that could help:\n\n- [x] interactive legend: clicking on a race/ethnicity highlights it in the chart\n- [x] tooltips on the circles in the chart\n- [ ] clicking on a circle in the chart could have the same effect as clicking on the legend\n- [ ] enable sorting states by highest to lowest diabetes % for a selected race/ethnicity\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"md`**Percentage of Population with Diabetes by Race/Ethnicity**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"viewof maxDisparityLegend = {\n const legend = swatchesInput({ color: raceColorScale });\n const legendSel = d3\n .select(legend)\n .style(\"font-size\", \"14px\")\n .style(\"text-transform\", \"capitalize\");\n return legend;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"dotChartRaceFilter = new Set(maxDisparityLegend)","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"raceColorScale = d3\n .scaleOrdinal()\n .domain(groups)\n .range([\n \"#f28e2c\",\n \"#4e79a7\",\n \"#edc949\",\n \"#76b7b2\",\n \"#59a14f\",\n \"#ff9da7\",\n \"#af7aa1\",\n \"#e15759\",\n \"#bab0ab\",\n \"#9c755f\"\n ])\n .unknown(\"#e2e2e2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"map_sel_race = md`### Map, Percentage Diabetes by Race/Ethnicity\n\nThe dropdown below updates the map to show diabetes values for a single race / ethnicity.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"viewof selectedRace = select({\n title: \"Selected race/ethnicity\",\n description: \"Choose a race/ethnicity to update the map\",\n options: groups,\n value: groups[0]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"legendMapSelectedRace = legend({\n color: mapColorScale,\n title: `Percent of ${selectedRace} diabetes prevelance`,\n width: 260\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"drawChoroplethMap({\n adminLevel: \"states\",\n data: mapDataSelectedRace,\n colorScale: mapColorScale,\n tooltipContents,\n zoomEnabled: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"tooltipContents = ({ id, value }) =>\n `${stateFipsToName.get(id)} : ${value !== null ? value : \"no data\"}${\n value !== null ? \"%\" : \"\"\n }`","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"mapDataSelectedRace = data\n .filter(d => d.stratification1 === selectedRace)\n .map(({ locationabbr, datavalue }) => ({\n id: stateAbbrToFips.get(locationabbr),\n value: datavalue\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"small_multiples_maps = md`### Small Multiple Maps, All Racial/Ethnic Groups\n\nWe draw one map for each race/ethnicity to allow for comparing diabetes among all groups. Grey means data for a given racial/ethnic group is missing / not available in that state.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":712,"value":"md`**Diabetes Prevalence in the United States by Race/Ethnicity** \n\nBased on data from the CDC's Chronic Disease Indicators. Grey indicates data is unavailable for that race/ethnicity.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"legendSmallMultipleMaps = legend({\n color: mapColorScale,\n title: `Percent of population with diabetes`,\n width: 260\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"bar_selected_state = md`### Bar Chart, Selected State\n\nShow data for each race/ethnicity for a selected state, when available.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"viewof selectedState = autoSelect({\n options: stateNames,\n placeholder: \"Search for a US state . . .\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"selectedStateData = groupedStateName.get(selectedState || defaultState)","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"defaultState = \"Georgia\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"bar_all_states_selected_race = md`### Bar Chart, All States, Selected Race/Ethnicity\n\nShow available data for a selected race/ethnicity for all states. A variation on this might be a grouped bar chart that shows each race/ethncity for all states. The missing race / ethnicity data sort of makes the chart harder to read IMO. Perhaps just not showing states when there is no data would make it simpler to read, but my concern there is that users might be confused as why a state is missing from the chart.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":617,"value":"viewof selectedRaceAllStates = select({\n title: \"Selected race/ethnicity\",\n description: \"Choose a race/ethnicity to update the map\",\n options: groups,\n value: groups[0]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":"dataByRaceSelected = dataByRace.get(selectedRaceAllStates)","pinned":false,"hidden":false,"mode":"ojs"},{"id":623,"value":"dataByRace = d3.group(data, d => d.stratification1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"grouped_bar_all_states_races = md`### Grouped Bar Chart, Each Race/Ethnicity by State\n\nShow each race/ethnicity for each state. As with the bar chart above, having inconsistent race/ethnicity data makes the chart a little more difficult to read and harder to compare states.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"groupedBarData = pivotbyRaceValue.objects()","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"mapColorScale = d3\n .scaleQuantize()\n .domain([0, 25])\n .range([\"#f0f9e8\", \"#bae4bc\", \"#7bccc4\", \"#43a2ca\", \"#0868ac\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"mapHeight = (width * 2) / 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"mapPadding = 24","pinned":true,"hidden":false,"mode":"ojs"},{"id":234,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"projection = d3\n .geoAlbersUsa()\n .fitExtent(\n [[mapPadding, mapPadding], [width - mapPadding, mapHeight - mapPadding]],\n { type: \"FeatureCollection\", features: statesGeo }\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":"statesGeo = topojson.feature(us, us.objects.states).features","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"us = d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@3/counties-10m.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":463,"value":"maxValue = d3.max(data, d => d.datavalue)","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"groups = Array.from(d3.group(data, d => d.stratification1).keys()).sort()","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"stateNames = Array.from(d3.group(data, d => d.locationdesc).keys()).sort()","pinned":true,"hidden":false,"mode":"ojs"},{"id":717,"value":"stateNameToFips = new Map(\n Array.from(stateFipsToName).map(([key, value]) => [value, key])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"stateFipsToName = new Map(\n Array.from(groupedStateName).map(([name, d]) => [d[0].locationid, name])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"stateFipsToAbbr = new Map(\n Array.from(stateAbbrToFips).map(([abbrv, fips]) => [fips, abbrv])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":346,"value":"stateAbbrToFips = new Map(\n Array.from(groupedState).map(([abbrv, d]) => [abbrv, d[0].locationid])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"states = Array.from(groupedState.keys()).sort()","pinned":true,"hidden":false,"mode":"ojs"},{"id":273,"value":"groupedStateName = d3.group(data, d => d.locationdesc)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"groupedState = d3.group(data, d => d.locationabbr)","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"data = dataRelevant","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"import { drawChoroplethMap } from \"@clhenrick/reusable-county-choropleth-map\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"import { Tooltip } from \"@clhenrick/tooltip-component\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"import { swatchesInput } from \"@clhenrick/color-swatches-input\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"import {\n dataRelevant,\n pivotbyRaceTable as pivotbyRaceValue\n} from \"@clhenrick/het-data-intake-template-cdc-diabetes-state-level\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":320,"value":"import { legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":275,"value":"import { select, autoSelect } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}