29:null 2a:["$","title",null,{"children":"Visualizing Racial/Ethnic Disparities in COVID-19 Deaths | Chris Henrick | Observable"}] 2f:T988,maxDisparityByCountyBar = { const margin = { top: 12, right: 48, bottom: 12, left: 175 }; const data = maxDisparityByCountyFiltered.slice(); const w = width; const h = data.length * 16; const format = d3.format(".2f"); const xScale = d3 .scaleLinear() .domain([0, d3.max(data, d => d.max.value)]) .range([margin.left, w - margin.right]); const yScale = d3 .scaleBand() .domain(data.map(d => d.label)) .range([h - margin.bottom, margin.top]) .padding(0.1); const xAxis = g => g .attr("transform", `translate(0, ${h - margin.bottom})`) .call(d3.axisBottom(xScale).tickFormat(d => format(d))) .call(g => g.select(".domain").remove()) .call(g => g.attr("font-size", 12)) .call(g => g.attr("text-anchor", "middle")); const yAxis = g => g .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(yScale).tickFormat(d => d.replace(/\_/gi, " "))) .call(g => g.select(".domain").remove()) .call(g => g.attr("font-size", 12)); const container = d3 .create("div") .style("max-height", "400px") .style("overflow-y", "auto") .style("border", "1px solid #ccc"); const svg = container.append("svg").attr("viewBox", `0 0 ${w} ${h}`); const barGroups = svg .append("g") .attr("id", "bars") .selectAll("g") .data(data) .join("g"); barGroups .append("rect") .attr("x", d => xScale(0)) .attr("y", d => yScale(d.label)) .attr("height", yScale.bandwidth()) .attr("width", d => xScale(d.max.value) - xScale(0)) .attr("fill", d => raceColorScale(d.max.name)); barGroups .append("text") .attr("fill", "#333") .attr("font-size", 12) .attr("font-family", "sans-serif") .attr("x", d => { if (d.max.value === null) { return xScale(0); } else { return xScale(d.max.value) + 6; } }) .attr("y", d => yScale(d.label)) .attr("dy", yScale.bandwidth() / 2 + 4) .text(d => (d.max.value !== null ? format(d.max.value) : "no data")); // svg // .append("text") // .text(`Highest COVID-19 mortality disparity per county`) // .attr("fill", "#333") // .attr("font-size", 12) // .attr("font-family", "sans-serif") // .attr("font-weight", "bold") // .attr("x", 12) // .attr("y", 12); // svg.append("g").call(xAxis); svg.append("g").call(yAxis); return container.node(); }30:Tf51,viewof maxDisparityChoropleth = { const options = {}; const w = options.width || width; const h = options.height || 600; const p = options.padding || 20; const data = maxDisparityByCountyFiltered.slice(); const initialState = { selected: null, hovered: null }; const projection = d3 .geoAlbersUsa() .fitExtent([[p, p], [w - p, h - p]], countiesGeo); const path = d3.geoPath(projection); const zoom = d3 .zoom() .scaleExtent([1, 8]) .on("zoom", zoomed); const container = html`

${mapStyles}

`; const containerSel = d3.select(container); const tooltipSel = containerSel.select(".map-tooltip"); const toolTip = new ToolTip(tooltipSel); const btnZoomIn = containerSel .select("button.zoom-in") .on("click", handleZoomIn); const btnZoomOut = containerSel .select("button.zoom-out") .on("click", handleZoomOut); const svg = d3 .select(container) .append("svg") .attr("viewBox", [0, 0, w, h]); const g = svg .append("g") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); g.append("g") .attr("id", "nation-boundary") .attr("stroke-width", 0.8) .append("path") // .attr("vector-effect", "non-scaling-stroke") .attr("d", path(topojson.mesh(us, us.objects.nation))) .attr("fill", "#eee") .attr("stroke", "#888"); g.append("g") .attr("id", "counties-data") .selectAll("path") .data(data, d => d.label) .join("path") .attr("vector-effect", "non-scaling-stroke") .attr("d", d => path(countiesGeoByFips.get(d.fips)[0])) .attr("fill", d => raceColorScale(d.max.name)) .on("mouseover", ({ currentTarget }, d) => { d3.select(currentTarget) .attr("stroke", "yellow") .attr("stroke-width", 2) .raise(); toolTip.display(d); dispatch("hovered", d.fips); }) .on("mouseout", ({ currentTarget }) => { d3.select(currentTarget) .attr("stroke", "none") .attr("stroke-width", 0); toolTip.hide(); }) .on("mousemove", event => { toolTip.move(event); }) .on("click", (event, d) => { dispatch("selected", d.fips); }); g.append("g") .attr("id", "county-boundaries") .attr("stroke-width", 0.5) .append("path") // .attr("vector-effect", "non-scaling-stroke") .attr( "d", path( topojson.mesh( us, us.objects.counties, (a, b) => a !== b && ((a.id / 1000) | 0) === ((b.id / 1000) | 0) ) ) ) .attr("fill", "none") .attr("stroke", "#e2e2e2"); g.append("g") .attr("id", "state-boundaries") .attr("stroke-width", 0.7) .append("path") .attr("vector-effect", "non-scaling-stroke") .attr("d", path(topojson.mesh(us, us.objects.states))) .attr("fill", "none") .attr("stroke", "#888"); svg .append("rect") .attr("width", w) .attr("height", h) .attr("fill", "none") .attr("stroke", "#222") .attr("stroke-width", 2); function zoomed({ transform }) { g.attr("transform", transform); g.selectAll("g").attr("stroke-width", 1 / transform.k); } function dispatch(key, value) { container.value = { ...container.value, ...{ [key]: value } }; container.dispatchEvent(new CustomEvent("input")); } function handleZoomIn(event) { svg .transition() .duration(500) .call(zoom.scaleBy, 1.74); } function handleZoomOut(event) { svg .transition() .duration(500) .call(zoom.scaleBy, 0.5); } svg.call(zoom); container.value = { ...initialState }; return container; }31:T496,class ToolTip { constructor(tooltipSel) { if (!tooltipSel || !tooltipSel.size()) { throw "Requires a tooltip element selection"; } this.tooltipSel = tooltipSel; } move(event) { const margin = 20; const { clientX: x, clientY: y } = event; const { width, height } = this.tooltipSel.node().getBoundingClientRect(); const left = this.clamp( margin, x - width / 2, window.innerWidth - width - margin ); const top = window.innerHeight > y + margin + height ? y + margin : y - height - margin; this.tooltipSel.style("top", `${top}px`).style("left", `${left}px`); } display({ fips }) { const { label, max: { name, value } } = maxDisparityByCounty.find(d => d.fips === fips); this.tooltipSel .classed("hidden", false) .html( `${label}
${name}: ${d3.format( ".2f" )(value)}` ); } hide() { this.tooltipSel.classed("hidden", true).html(""); } clamp(min, d, max) { return Math.max(min, Math.min(max, d)); } }32:T1094,beeswarm = { const w = width; const h = 550; const m = { top: 24, right: 24, bottom: 36, left: 24 }; const radius = 6; const collision = 8; const strengthX = 2; const strengthY = 0.1; const logBase = 10; const data = maxDisparityByCounty .filter(d => d.max.value) .map(d => Object.assign({}, d)) .sort((a, b) => a.max.name - b.max.name); const format = d3.format(".0f"); const xScale = d3 .scaleLog() .base(logBase) .domain([ 0.8, d3.max(maxDisparityByCounty.filter(d => d.max.value), d => d.max.value) ]) .range([m.left, w - m.right]); const colorScale = raceColorScale.copy(); const xAxis = g => g.attr("transform", `translate(0, ${h - m.bottom})`).call( d3 .axisBottom( xScale .copy() .domain([ 1, d3.max( maxDisparityByCounty.filter(d => d.max.value), d => d.max.value ) ]) ) .tickSizeOuter(0) .tickFormat(d => (d < 1 ? "" : format(d))) ); const xAxis2 = g => g .attr("transform", `translate(0, ${h - m.bottom})`) .attr("font-size", 14) .attr("font-family", "sans-serif, Arial") .call(g => { const text = g.append("text").attr("x", xScale.range()[0]); text .append("tspan") .attr("font-size", 22) .text("← "); text.append("tspan").text("Smaller Disparity"); }) .call(g => { const text = g .append("text") .attr("x", xScale.range()[1]) .attr("text-anchor", "end"); text.append("tspan").text("Greater Disparity"); text .append("tspan") .attr("font-size", 22) .text(" →"); }); const simulation = d3 .forceSimulation(data) .force( "x", d3 .forceX(function(d) { return xScale(d.max.value); }) .strength(strengthX) ) .force("y", d3.forceY(h / 2 - m.bottom / 2).strength(strengthY)) .force("collide", d3.forceCollide(collision)) .stop(); for (let i = 0; i < data.length; ++i) { simulation.tick(); } const container = html`

`; const tooltipSel = d3 .select(container) .append("div") .classed("tooltip-beeswarm", true) .classed("hidden", true); const svg = d3 .select(container) .append("svg") .attr("viewBox", `0 0 ${w} ${h}`); const xLine = svg .append("line") .attr("stroke", "rgb(96,125,139)") .attr("stroke-dasharray", "1,2"); const toolTip = new ToolTip(tooltipSel); // svg.append("g").call(xAxis); svg.append("g").call(xAxis2); svg .selectAll("circle") .data(data, d => d.label) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("fill", d => { if (!selectedRaces.size) { return colorScale(d.max.name); } return selectedRaces.has(d.max.name) ? colorScale(d.max.name) : colorScale(""); }) .attr("stroke-width", 2) .attr("r", radius) .on("mousemove", function(event) { toolTip.move(event); }) .on("mouseover", function(event, d) { if (selectedRaces.size && !selectedRaces.has(d.max.name)) return; d3.select(this).attr("stroke", "#333"); toolTip.display(d); // xLine // .attr("x1", d3.select(this).attr("cx")) // .attr("y1", d3.select(this).attr("cy")) // .attr("y2", h - m.bottom) // .attr("x2", d3.select(this).attr("cx")) // .attr("opacity", 1); }) .on("mouseout", function(event, d) { if (selectedRaces.size && !selectedRaces.has(d.max.name)) return; d3.select(this).attr("stroke", null); toolTip.hide(); // xLine.attr("opacity", 0); }); return container; }33:T787,sankeyData = { const data = { nodes: [ { name: "non hispanic black pop", category: "non hispanic black" }, { name: "non hispanic black covid-19 deaths", category: "non hispanic black" }, { name: "non hispanic black all cause deaths", category: "non hispanic black" }, { name: "non hispanic white pop", category: "non hispanic white" }, { name: "non hispanic white covid-19 deaths", category: "non hispanic white" }, { name: "non hispanic white all cause deaths", category: "non hispanic white" }, { name: "non hispanic asian pop", category: "non hispanic asian" }, { name: "non hispanic asian covid-19 deaths", category: "non hispanic asian" }, { name: "non hispanic asian all cause deaths", category: "non hispanic asian" }, { name: "non hispanic american indian pop", category: "non hispanic american indian" }, { name: "non hispanic american indian covid-19 deaths", category: "non hispanic american indian" }, { name: "non hispanic american indian all cause deaths", category: "non hispanic american indian" }, { name: "hispanic pop", category: "hispanic" }, { name: "hispanic covid-19 deaths", category: "hispanic" }, { name: "hispanic all cause deaths", category: "hispanic" }, { name: "other pop", category: "other" }, { name: "other covid-19 deaths", category: "other" }, { name: "other all cause deaths", category: "other" } ], links: [ { source: "non hispanic black pop", target: "non hispanic black covid-19 deaths", value: 0 } ], units: "%" }; return data; }34:Td6d,rowBarChart = { const w = width; const h = 225; const margin = { top: 48, right: 48, bottom: 36, left: 100 }; const data = rowBarData; const xScale = d3 .scaleLinear() .domain([0, d3.max(data, d => d.value)]) .range([margin.left, w - margin.right]); const yScale = d3 .scaleBand() .domain(data.map(d => d.name).reverse()) .range([h - margin.bottom, margin.top]) .padding(0.1); const xAxis = g => g .attr("transform", `translate(0, ${h - margin.bottom})`) .call(d3.axisBottom(xScale).tickFormat(d => barAxisFormat(d))) .call(g => g.select(".domain").remove()) .call(g => g.attr("font-size", 12)) .call(g => g.attr("text-anchor", "middle")); const xAxis2 = g => g .attr("transform", `translate(0, ${margin.top - 6})`) .attr("font-size", 14) .attr("font-family", "sans-serif, Arial") .call(g => { const text = g.append("text").attr("x", xScale(1) - 12); text .append("tspan") .attr("font-size", 22) .attr("text-anchor", "end") .text("← "); text.append("tspan").text("Less than proportional"); }) .call(g => { const text = g.append("text").attr("x", xScale(1) + 12); text.append("tspan").text("More than proportional"); text .append("tspan") .attr("font-size", 22) .text(" →"); }); const xGuide = g => g .append("line") .attr("x1", xScale(1.0) + 1) .attr("x2", xScale(1.0) + 1) .attr("y1", h - margin.bottom) .attr("y2", margin.top) .attr("stroke", "#fff") .attr("stroke-width", 2) .clone() .attr("stroke", "rgb(96,125,139)") .attr("stroke-dasharray", "1,2"); const yAxis = g => g .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(yScale)) .call(g => g.select(".domain").remove()) .call(g => g.attr("font-size", 12)) .call(g => g.style("text-transform", "capitalize")); const svg = d3.create("svg").attr("viewBox", `0 0 ${w} ${h}`); const barGroups = svg .append("g") .attr("id", "bars") .selectAll("g") .data(data) .join("g"); barGroups .append("rect") .attr("x", d => xScale(0)) .attr("y", d => yScale(d.name)) .attr("height", yScale.bandwidth()) .attr("width", d => xScale(d.value) - xScale(0)) .attr("fill", "steelblue"); barGroups .append("text") .attr("fill", "#333") .attr("font-size", 12) .attr("font-family", "sans-serif") .attr("font-style", d => (d.value !== null ? "normal" : "italic")) .attr("x", d => { if (d.value === null) { return xScale(0); } else { return xScale(d.value) + 6; } }) .attr("y", d => yScale(d.name)) .attr("dy", yScale.bandwidth() / 2 + 4) .text(d => (d.value !== null ? barFormat(d.value) : "no data")); svg .append("text") .text( `Racial / Ethnic COVID-19 Mortality Disparities for ${selectedCounty}` ) .attr("fill", "#333") .attr("font-size", 12) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", "16px") .attr("x", 12) .attr("y", 12); svg.append("g").call(xAxis); svg.append("g").call(yAxis); if (proportionGuide) { svg.append("g").call(xAxis2); svg.append("g").call(xGuide); } return svg.node(); }35:[] 2d:{"id":"1313b1eba78522a9","slug":"visualizing-racial-ethnic-disparities-in-covid-19-deaths","title":"Visualizing Racial/Ethnic Disparities in COVID-19 Deaths","thumbnail":"98383c828b1c538e0b4534f68991ad1998df323793535674460edd05b55d36be","access_level":"public","create_time":"$D2020-10-12T18:55:00.377Z","update_time":"$D2021-04-19T02:22:25.701Z","view_time":null,"first_public_time":"$D2020-10-17T00:31:53.927Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":"starter_2024"},"version":1350,"publish_version":1350,"role":null,"authored":false,"authors":[{"type":"individual","id":"152f84cb3c7f97b6","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":null}],"members":[{"type":"individual","id":"152f84cb3c7f97b6","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"d625d8448d2de965","slug":"msm-fellowship","title":"msm-fellowship","owner":{"id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick"}},"type":"notebook","body":{"title":"Visualizing Racial/Ethnic Disparities in COVID-19 Deaths","cells":[{"id":0,"value":"md`# Visualizing Racial/Ethnic Disparities in COVID-19 Deaths\n\nUsing data from the CDC's [Provisional COVID-19 Death Counts by County and Race](https://observablehq.com/@clhenrick/data-intake-provisional-covid-19-death-counts-by-county-and) dataset based on an analysis from [this notebook](https://observablehq.com/@clhenrick/covid-19-racial-ethnic-mortality-analysis).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1150,"value":"toc(\"h3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"md`## Viz Ideas\n\nWhat follows are some ideas for visualizing racial / ethnic disparities in COVID-19 deaths at the county level. Some focus on showing many counties at once while others focus on showing a single county. \n\nThe way in which disparity is calculated in these instances is limited to the data, which only provides values as percentages and does not include crude counts. As such, disparity is calculated by the percentage of COVID-19 deaths divided by the percentage of the total population for a given racial/ethnic group.\n\nOther ways of showing disparity include using per capita values (e.g. _n people per 100k_) or the difference from the predominant racial group (typically the difference in prevelance from White/non-Hispanic).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"all_counties_highest_disparity = md`### Show the Highest Disparity for All Counties\n\nColor counties by the race / ethnicity that has the highest disparity.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"md`First, a bar chart showing the predominant disparity rate for each county in the dataset. Scroll within the chart to view more counties.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"viewof maxDisparityLegend = {\n const legend = swatchesInput({ color: raceColorScale });\n\n const legendSel = d3\n .select(legend)\n .style(\"font-size\", \"14px\")\n .style(\"text-transform\", \"capitalize\");\n\n return legend;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"raceColorScale = d3\n .scaleOrdinal()\n .domain(RACE_KEYS.map(key => neatRaceKey(key)))\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"selectedRaces = new Set(maxDisparityLegend)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"mutable debug = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"maxDisparityByCounty = {\n let data = [];\n\n for (const row of disparityData.slice()) {\n const max = maxDisparity(row);\n const fips = row.fips;\n const label = `${row.county_name}, ${row.state}`;\n data.push({ max, fips, label });\n if (label === \"Webb County, TX\") mutable debug = { row, label };\n }\n\n function maxDisparity(row) {\n const dispKeys = RACE_KEYS.map(key => `${key}_disp`);\n const dispValues = dispKeys.map(key => row[key]);\n const max = d3.max(dispValues) || null;\n const idx = dispValues.indexOf(max);\n let name = RACE_KEYS[idx];\n if (name) name = neatRaceKey(name);\n return {\n name,\n value: max\n };\n }\n\n data.sort((a, b) => {\n return a.max.value - b.max.value;\n });\n\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1036,"value":"maxDisparityByCountyFiltered = maxDisparityByCounty.filter(d =>\n selectedRaces.size ? selectedRaces.has(d.max.name) : d\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1166,"value":"md`The map below shows geographically where the bars above are located.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"maxDisparityHoveredText = {\n const fips = maxDisparityChoropleth.hovered;\n\n if (!fips) return \"\";\n\n const {\n label,\n max: { name, value }\n } = maxDisparityByCounty.find(d => d.fips === fips);\n\n return md`**${label}** \n People who are ${name\n .replace(\"non_hispanic\", \"\")\n .replace(/_/gi, \" \")} are **${d3.format(\".2f\")(\n value\n )}** times likely to die from COVID-19 compared to their share of the total population.`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"mapStyles = html`\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"countiesGeoByFips = d3.group(countiesGeo.features, d => d.id)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"countiesGeo = topojson.feature(us, \"counties\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"us = d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@3/counties-10m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"all_counties_beeswarm = md`### Bee Swarm Plot of Highest Disparity for All Counties\n\nUsing a [**Bee Swarm Plot**](https://www.datascienceblog.net/post/data-visualization/boxplot_alternatives/) would allow for showing the distribution of the highest racial/ethnic disparity for all counties at once. However, this could be a more challenging graph for viewers to understand. The outliers in the dataset also skew how the data is plotted, so we may want to remove them or have the ability to toggle the x scale to either linear or logarithmic. This plot is created using [d3-force](https://github.com/d3/d3-force) and as a result will move circles out of their exact x position when crowding occurs. If this proves to be confusing for viewers we could try [this alternative approach](https://observablehq.com/@d3/beeswarm) which does a better job at maintaining the x position, but at the expense of requiring more height in the chart.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1328,"value":"md`**Racial/Ethnic COVID-19 Mortality Disparities in U.S. Counties** \nEach dot represents a U.S. county with 100 or more confirmed COVID-19 deaths (source: CDC). Counties are color coded by the race/ethnicity with the largest disparity for that county and positioned from least to greatest amount of disparity. Disparity is calculated as how many times more a racial/ethnic group is likely to die from COVID-19 compared to their share of the population.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1028,"value":"viewof maxDisparityLegend.cloneNode(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"sankey_scratched = md`### ~~Sankey Diagram~~ (Scratched)\n\nA [Sankey Diagram](https://observablehq.com/@d3/sankey-diagram) showing population distribution on the left, all deaths in the middle, covid deaths on the right?\n\nScratched this idea for now as I'm not sure this would work, as Sankey Diagrams represent flow from sources to targets / more to less, and this data doesn't match that pattern.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"single_county_small_tables = md`### Single County Small Tables\n\nMaybe show small tables for each race / ethnicity? Could order them by highest to lowest disparity.\n\n_Note: the text autosuggest input below will update any of the single county charts / visualizations._\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"viewof selectedCounty = autoSelect({\n title: \"Selected County\",\n options: Array.from(countyNamesFipsMap.keys()),\n value: \"\",\n description: \"Choose a county from the dataset.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"showingDataFor()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"dtLegend = {\n const legend = colorLegend({\n title: \"Ratio of % of deaths to % of total population\",\n color: dtColorScale\n });\n\n d3.select(legend)\n .selectAll(\"text\")\n .attr(\"font-size\", \"14px\");\n\n d3.select(legend)\n .select(\".tick:last-of-type text\")\n .text(text => `${text}+`);\n\n return legend;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"tables = {\n const container = html`

\n \n

`;\n\n for (let [key, value] of dtData) {\n container.append(\n html`

${neatRaceKey(key)}

\n ${renderTable(value)}\n

`\n );\n }\n\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"dtData = {\n const statsByRace = new Map();\n const keysMap = new Map([\n [\"pop\", \"population\"],\n [\"covid\", \"covid-19 deaths\"],\n [\"disp\", \"disparity\"]\n ]);\n const keys = Array.from(keysMap.keys());\n\n for (let key of RACE_KEYS) {\n const o = disparityTable\n .params({ selectedFips })\n .filter((d, $) => d.fips === selectedFips)\n .select(`${key}_disp`, `${key}_covid`, `${key}_pop`)\n .objects()[0];\n\n const datum = keys.map(key => {\n const key2 = Object.keys(o).find(k => k.includes(key));\n const value = o[key2];\n return {\n name: keysMap.get(key),\n value:\n key === \"disp\"\n ? d3.format(\".2f\")(isNaN(value) ? 0 : value)\n : d3.format(\".1%\")(value)\n };\n });\n\n statsByRace.set(key, datum);\n }\n return statsByRace;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"dtColorScale = d3\n .scaleSequential(t => d3.interpolateRdBu(1 - t))\n // .scaleSequential(d3.interpolateRdBu)\n .domain([0, 2])\n .clamp(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"md`#### Disparity Table test:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"disparityTableTest = renderTable(dtData.get(\"non_hispanic_black\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"renderTable = (data, columnNames = []) => {\n const table = d3.create(\"table\");\n const header = table.append(\"thead\");\n const body = table.append(\"tbody\");\n\n if (columnNames.length) {\n header\n .append(\"tr\")\n .selectAll(\"th\")\n .data(columnNames)\n .join(\"th\")\n .text(d => d);\n }\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.append(\"td\").text(value);\n\n if (name === \"disparity\") {\n valueCell.style(\"font-weight\", \"bold\");\n valueCell.style(\"background-color\", dtColorScale(value));\n valueCell.style(\"color\", value >= 1.5 || value <= 0.5 ? \"#fff\" : \"#222\");\n }\n }\n\n return table.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"single_county_disparity_bar = md`### Single County Disparity Bar Chart\n\nThis chart shows just the mortality disparity for each group for a particular county. A vertical line at the \\`1.00\\` axis tick helps emphasize where the a disparity occurs, when the ratio is greater than 1.\n\nThe way to read this chart is for each bar in the graph: \n_\"In [county name], [race/ethnicity] people are [n] times more likely to die from COVID-19 compared to their share of the population.\"_\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"disparityText = {\n const county = selectedCounty || defaultCounty;\n const raceLabelPretty = maxCountyDisp.max.name.replace(/\\_/g, \" \");\n const value = barFormat(maxCountyDisp.max.value);\n const times = toggleBarPct === \"pct\" ? \"\" : \"times\";\n const moreAsText =\n toggleBarPct === \"pct\" && maxCountyDisp.max.value < 1 ? \"as\" : \"more\";\n\n return md`In **${county}** \n people who are \n **${raceLabelPretty}** \n are **${value} ${times}** ${moreAsText} likely \n to die from COVID-19 compared to their share of the population.`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1232,"value":"viewof toggleBarPct = checkbox({\n description: \"\",\n options: [{ value: \"pct\", label: \"Show Values as a Percentage\" }],\n value: \"decimal\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1274,"value":"viewof proportionGuide = checkbox({\n options: [{ value: \"enabled\", label: \"Show Proportional Guide\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1244,"value":"barFormat = d3.format(toggleBarPct === \"pct\" ? \".1%\" : \".2f\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1247,"value":"barAxisFormat = d3.format(toggleBarPct === \"pct\" ? \".0%\" : \".1f\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"maxCountyDisp = maxDisparityByCounty.find(d =>\n selectedCounty ? d.label === selectedCounty : d.label === defaultCounty\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"rowBarData = {\n let data = disparityTable\n .params({ selectedFips })\n .filter((d, $) => d.fips === $.selectedFips)\n .select(dispKeys)\n .objects();\n\n return Object.keys(data[0])\n .map(key => ({\n name: neatRaceKey(key).replace(/ disp/gi, \"\"),\n value: data[0][key]\n }))\n .sort((a, b) => b.value - a.value);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"dispKeys = RACE_KEYS.map(key => `${key}_disp`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"single_county_disparity_grouped_bar = md`### Single County Grouped Bar Chart\n\n- **Rationale:** to show all 3 values at once.\n- **Result:** Probably not that good of a choice as the \\`disparity_ratio\\` skews the chart.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"showingDataFor()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"groupedBar = groupedBarChart","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"barGroupKey = \"race\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"barKeys = Object.keys(barGroupedData[0]).slice(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"barGroupedData = RACE_KEYS.map(key => ({\n race: key,\n pop_pct: selectedCountyData[`${key}_pop`],\n covid_deaths_pct: selectedCountyData[`${key}_covid`],\n disparity_ratio: selectedCountyData[`${key}_disp`]\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"md`## Boring Stuff\n\nYou can stop reading now if you're not interested in code :)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"md`### Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"defaultCounty = \"Alameda County, CA\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"neatRaceKey = key =>\n key.includes(\"nhopi\")\n ? \"NHoPI\"\n : key.replace(/non_hispanic/gi, \"\").replace(/_/gi, \" \")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"selectedFips = selectedCounty\n ? countyNamesFipsMap.get(selectedCounty)\n : countyNamesFipsMap.get(defaultCounty)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"getDisparityRow = fips => disparityData.find(d => d.fips === fips)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"selectedCountyData = getDisparityRow(selectedFips) || {}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"disparityData = disparityTable.objects()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"showingDataFor = () =>\n md`**Showing data for ${selectedCounty || defaultCounty}.**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"augmentAq = aqLeftPad","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"import { legend as colorLegend, swatches as colorLegendCategorical } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":889,"value":"import { swatchesInput } from \"@clhenrick/color-swatches-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1148,"value":"import { toc } from \"@mbostock/toc\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import { select, autoSelect, checkbox } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import { chart as groupedBarChart, x0, x1, y, color, xAxis, yAxis } with {\n barKeys as keys,\n barGroupKey as groupKey,\n barGroupedData as data\n} from \"@d3/grouped-bar-chart\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import {\n aqLeftPad,\n countyNamesFipsMap,\n disparityTable,\n tableWithFipsConcatenated,\n RACE_KEYS\n} from \"@clhenrick/covid-19-racial-ethnic-mortality-analysis\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"import { aq, op } from '@uwdata/arquero'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"d3 = require(\"d3@6\", \"d3-scale-chromatic@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2e:"$2d:body"