31:T5de,statePopData = { let text = await (await fetch(CENSUS_DATA_URL)).text() text = text.substring(text.indexOf("\n") + 1) // The first row is useless as headers, so we delete it return d3.csvParse(text, d => ({ id: d.id, state: stateNameToAbbr(d['Geographic Area Name']), total: { value: +d['Estimate!!Total'], marginErr: +d['Margin of Error!!Total'], }, white: { value: +d['Estimate!!Total!!White alone'], marginErr: +d['Margin of Error!!Total!!White alone'], }, black: { value: +d['Estimate!!Total!!Black or African American alone'], marginErr: +d['Margin of Error!!Total!!Black or African American alone'], }, aian: { value: +d['Estimate!!Total!!American Indian and Alaska Native alone'], marginErr: +d['Margin of Error!!Total!!American Indian and Alaska Native alone'], }, asian: { value: +d['Estimate!!Total!!Asian alone'], marginErr: +d['Margin of Error!!Total!!Asian alone'], }, nhpi: { value: +d['Estimate!!Total!!Native Hawaiian and Other Pacific Islander alone'], marginErr: +d['Margin of Error!!Total!!Native Hawaiian and Other Pacific Islander alone'], }, multiracial: { value: +d['Estimate!!Total!!Two or more races'], marginErr: +d['Margin of Error!!Total!!Two or more races'], }, other: { value: +d['Estimate!!Total!!Some other race alone'], marginErr: +d['Margin of Error!!Total!!Some other race alone'], }, })) }32:T6ea,combinedData = statePopData.map(({ id, state, total, ...categories }) => { const covidData = latestCovidData.find(d => d.state === state) if (!covidData) return; // Zip the data into a single array const returnData = Object.entries(categories).reduce((acc, [cat, pop]) => { const popValue = pop.value const popTopErr = pop.value + pop.marginErr const popBottomErr = pop.value - pop.marginErr acc.positives[cat] = { percent: covidData.positives[cat] / pop.value, percentTopErr: covidData.positives[cat] / popBottomErr, percentBottomErr: covidData.positives[cat] / popTopErr, count: covidData.positives[cat], totalPopulation: pop.value, marginErr: pop.marginErr, } acc.deaths[cat] = { percent: covidData.deaths[cat] / pop.value, percentTopErr: covidData.deaths[cat] / popBottomErr, percentBottomErr: covidData.deaths[cat] / popTopErr, count: covidData.deaths[cat], totalPopulation: pop.value, marginErr: pop.marginErr, } acc.negatives[cat] = { percent: covidData.negatives[cat] / pop.value, percentTopErr: covidData.negatives[cat] / popBottomErr, percentBottomErr: covidData.negatives[cat] / popTopErr, count: covidData.negatives[cat], } return acc }, { state: state, positives: {}, deaths: {}, negatives: {} } ) // Add total and unknown race info ;['positives', 'deaths', 'negatives'].forEach(s => { returnData[s]._meta = { total: covidData[s].total, unknownRace: covidData[s].unknownRace, } }) // Add state pop info returnData.totalPopulation = total.value return returnData }).filter(x => !!x)33:T136d,stateChart = ( data, chartType = 'deaths', chartWidth = width / 3, chartHeight = width * 0.618 / 3, ) => { const dotWidth = chartWidth * 0.03 const lineWidth = chartWidth * 0.03 // Layout Configuration const margin = { left: 0, top: dotWidth * 2, bottom: dotWidth * 1.5, right: 0 } const bottomAxisOffset = 10 const innerWidth = chartWidth - margin.left - margin.right const innerHeight = chartHeight - margin.top - margin.bottom const dataAsPairs = Object.entries(data[chartType]).filter((([key, value]) => key !== '_meta')) // Calculate a good perN value const minRatio = d3.quantile( dataAsPairs, 0.5, ([key, details]) => details.percent > 0 ? details.percent : null ) const perN = reasonableDenominator(minRatio) const perNFormat = n => { let returnValue = d3.format(',d')(n * perN) if (returnValue === '0' && n > 0) returnValue = d3.format('.1r')(n * perN) return returnValue } // Scales const yMax = Math.max( d3.max(dataAsPairs, ([eth, d]) => d.percentTopErr), // Don't show with the max smaller than 0.00001% 1 / 100000 ) const yScale = d3.scaleLinear() .domain([yMax, 0]) .range([0, innerHeight]) .nice() const xScale = d3.scalePoint() .domain(dataAsPairs.map(([eth, d]) => eth)) .range([0, innerWidth]) .padding(1) // Chart const chart = d3.select(DOM.svg(chartWidth, chartHeight)) // Axes and Borders const yAxis = d3.axisLeft(yScale) .ticks(5) .tickFormat(perNFormat) .tickSize(-innerWidth) chart.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`) .call(yAxis) .call(g => g.select('.domain').remove()) .call(g => g.selectAll(".tick line").attr('color', '#E5E5E5')) .call( // move ticks above the grid lines g => g.selectAll(".tick text") .attr('x', 3) .attr('text-anchor', 'start') .attr('dy', -5) .attr('fill', '#666') ) // Borders chart.append('rect') .attr('x', 0.5) .attr('y', 0.5) .attr('width', chartWidth - 1) .attr('height', chartHeight - 1) .attr('stroke', '#E5E5E5') .attr('fill', 'none') // Inner Chart const innerChart = chart.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`) const dataSelection = innerChart.selectAll() .data(dataAsPairs) .enter() // Margin of Error dataSelection.append('line') .attr('x1', ([eth, d]) => xScale(eth)) .attr('x2', ([eth, d]) => xScale(eth)) .attr('y1', ([eth, d]) => yScale(d.percentTopErr)) .attr('y2', ([eth, d]) => yScale(d.percentBottomErr)) .attr('stroke', ([eth, d]) => RACES[eth].color) .attr('stroke-width', lineWidth) .attr('stroke-linecap', 'round') .attr('opacity', 0.15) // Data Point dataSelection.append('circle') .attr('cx', ([eth, d]) => xScale(eth)) .attr('cy', ([eth, d]) => yScale(d.percent)) .attr('r', dotWidth) .attr('fill', ([eth, d]) => RACES[eth].color) .attr('stroke', '#FFF') .attr('stroke-width', 1.5) .append('title').text(([eth, d]) => RACES[eth].label) // Data Point Number Label dataSelection.append('text') .attr('x', ([eth, d]) => xScale(eth) + dotWidth * 1.5) .attr('y', ([eth, d]) => yScale(d.percent) + dotWidth * 0.5) .attr('font-size', 12) .attr('font-family', 'sans-serif') .attr('fill', '#777') .attr('cursor', 'default') .text(([eth, d]) => perNFormat(d.percent)) // Data Point Label dataSelection.append('text') .attr('x', ([eth, d]) => xScale(eth)) .attr('y', ([eth, d]) => yScale(d.percent) + dotWidth * 0.4) .attr('text-anchor', 'middle') .attr('text-align', 'center') .attr('font-size', dotWidth) .attr('font-family', 'sans-serif') .attr('fill', '#FFF') .attr('cursor', 'default') .text(([eth, d]) => RACES[eth].abbr) .append('title').text(([eth, d]) => RACES[eth].label) const unknownPct = data[chartType]._meta.unknownRace / data[chartType]._meta.total const unknownColor = R.cond([ [R.gt(0.2), R.always('#777')], [R.gt(0.5), R.always('#980')], [R.T, R.always('#800')], ])(unknownPct) return html`

${US_STATES[data.state]}

${capitalize(chartType)} per ${d3.format(',d')(perN)} • Unknown Race: ${d3.format('.0%')(unknownPct)}
Pop: ${d3.format(',d')(data.totalPopulation)} • ${capitalize(chartType)}: ${d3.format(',d')(data[chartType]._meta.total)}

${chart.node()} ${stateTable(data, chartType)}

` }34:T45b,stateTable = (data, chartType) => { const dataAsPairs = Object.entries(data[chartType]).filter((([key, value]) => key !== '_meta')) return html` ${dataAsPairs.map(([r, d]) => html` `)}

	Population		${capitalize(chartType)}
${RACES[r].abbr}	${d3.format(',d')(d.totalPopulation)}	±${d3.format(',d')(d.marginErr)}	${d.count \|\| ''}

` }35:T57a,US_STATES = ({ "AL": "Alabama", "AK": "Alaska", "AS": "American Samoa", "AZ": "Arizona", "AR": "Arkansas", "CA": "California", "CO": "Colorado", "CT": "Connecticut", "DE": "Delaware", "DC": "District Of Columbia", "FM": "Federated States Of Micronesia", "FL": "Florida", "GA": "Georgia", "GU": "Guam", "HI": "Hawaii", "ID": "Idaho", "IL": "Illinois", "IN": "Indiana", "IA": "Iowa", "KS": "Kansas", "KY": "Kentucky", "LA": "Louisiana", "ME": "Maine", "MH": "Marshall Islands", "MD": "Maryland", "MA": "Massachusetts", "MI": "Michigan", "MN": "Minnesota", "MS": "Mississippi", "MO": "Missouri", "MT": "Montana", "NE": "Nebraska", "NV": "Nevada", "NH": "New Hampshire", "NJ": "New Jersey", "NM": "New Mexico", "NY": "New York", "NC": "North Carolina", "ND": "North Dakota", "MP": "Northern Mariana Islands", "OH": "Ohio", "OK": "Oklahoma", "OR": "Oregon", "PW": "Palau", "PA": "Pennsylvania", "PR": "Puerto Rico", "RI": "Rhode Island", "SC": "South Carolina", "SD": "South Dakota", "TN": "Tennessee", "TX": "Texas", "UT": "Utah", "VT": "Vermont", "VI": "Virgin Islands", "VA": "Virginia", "WA": "Washington", "WV": "West Virginia", "WI": "Wisconsin", "WY": "Wyoming" })36:[{"id":"13e1c561386d280d31a1ce8aced8ff572032d065aee55111475d6c81c4ac41413368f8a723184f8b7e1d9088f57b64828b3764fb91a9a43048786871fe0125cd","href":"https://static.observableusercontent.com/files/13e1c561386d280d31a1ce8aced8ff572032d065aee55111475d6c81c4ac41413368f8a723184f8b7e1d9088f57b64828b3764fb91a9a43048786871fe0125cd","name":"ACSDT1Y2018.B02001_data_with_overlays_2020-05-19T011212.csv","type":"text/csv","lastModified":1589865705143.438,"size":10962}] 2f:{"title":"COVID-19 Infection and Fatality by Race","cells":[{"id":0,"value":"md`# COVID-19 Infection and Fatality by Race`","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"md`The tireless and diligent volunteers at [The COVID Tracking Project](https://covidtracking.com/race) recently released an initial dataset of COVID tests and deaths by race and ethnicity. Let’s look at it.\n\nData on graphs are normalized by per-group population as [estimated by the 2018 American Community Survey](https://data.census.gov/cedsci/table?q=United%20States&g=0100000US.04000.001&t=Race%20and%20Ethnicity&tid=ACSDT1Y2018.B02001&vintage=2018). Confidence intervals, where shown, are based on the 90% margins of error from this data. Additional errors are likely due to incomplete data. Caution should be used when drawing conclusions, particularly from states reporting a high percentage of cases with unknown race.\n\nAbsolute numbers are shown in the table below each chart.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"viewof dataType = radio({\n title: 'Show',\n value: 'deaths',\n options: [\n { value: 'deaths', label: 'Deaths' },\n { value: 'positives', label: 'Positive Tests' },\n // Not very many states offer this information presently\n // { value: 'negatives', label: 'Negatives' },\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"viewof textFilter = text({ title: 'Find state' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":968,"value":"html`\n

Legend

\n${Object.values(RACES).map(r => html`\n \n \n ${r.label}\n \n`)}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"html`

\n ${\n combinedData.sort((a, b) => US_STATES[a.state].localeCompare(US_STATES[b.state]))\n .filter(x => textFilter ? US_STATES[x.state].toUpperCase().includes(textFilter.toUpperCase()) : true)\n .map(d => stateChart(\n d,\n dataType,\n chartWidth,\n chartWidth * 0.618\n ))\n }\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"md`Please feel free to send suggestions to [harris@chromamine.com](mailto:harris@chromamine.com). Here's what's currently on my to do list:\n\n- Exclude states with no/insufficient data\n- Figure out how to integrate latinx/hispanic data, given state reporting inconsistency and Census categorization\n- Find a way to incorporate unknown race data into confidence intervals(?), i.e., we should have a wider interval in states with a high percentage of unknowns, I think.\n- Find a scale that works for showing deaths and positives simultaneously\n- Show U.S. overall chart?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"md`

\n# Implementation\n## Fetch the Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"COVID_DATA_URL = 'https://corsproxy.harrislapiroff.com/https://docs.google.com/spreadsheets/d/e/2PACX-1vTfUQPxkhP_CRcGmnnpUBihnTNZ9Z8pcizII4_sc2o2n3opOoAJdAM4CRTJBI339tou8LWnQrqbTMgH/pub?gid=902690690&single=true&output=csv'","pinned":true,"hidden":false,"mode":"ojs"},{"id":310,"value":"CENSUS_DATA_URL = FileAttachment(\"ACSDT1Y2018.B02001_data_with_overlays_2020-05-19T011212.csv\").url()","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"md`The COVID Tracking Project race data CSV is a little messy, so we need to do a bit of processing to get it into a reasonable form.\n\nFirst, a couple small utility functions that parse the data formats the CSV uses:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"parseDateCol = d3.timeParse('%Y%m%d')","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"parseUpdateTimeCol = d => {\n let returnVal = d3.timeParse('%-m/%-d %-H:%M')(d)\n if (!returnVal) return // If date is null, short-circuit\n returnVal.setFullYear(2020)\n return returnVal\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"md`Next, a utility function that parses a string into a number, but returns null (instead of zero) if the string is empty:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"n = x => {\n // Return null if the empty string, null, or undefined convert to number otherwise\n if (x === '' || typeof x === 'undefined' || x === null) return null\n return +x\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"md`A multi-column race/ethnicity breakdown structure occurs multiple times in this data (positives, deaths, negatives) so this function accepts a column to start on and parses out the following 13 columns for race data:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"parseRaceData = (datum, startIdx) => ({\n total: n(datum[startIdx]),\n // Race\n white: n(datum[startIdx + 1]),\n black: n(datum[startIdx + 2]),\n latinxHispanic: n(datum[startIdx + 3]),\n asian: n(datum[startIdx + 4]),\n aian: n(datum[startIdx + 5]), // American Indian/Alaska Native\n nhpi: n(datum[startIdx + 6]), // Native Hawaiian/Pacific Islander\n multiracial: n(datum[startIdx + 7]),\n other: n(datum[startIdx + 8]),\n unknownRace: n(datum[startIdx + 9]),\n // Ethnicity\n hispanic: n(datum[startIdx + 11]),\n nonHispanic: n(datum[startIdx + 12]),\n unknownEth: n(datum[startIdx + 13]),\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"md`Put it all together to create a function that will parse our source data into a usable format:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"parseDataCSV = dataStr => {\n return d3.csvParseRows(dataStr, (d, i) => {\n if (i < 3) return // The first three rows are headers -- skip\n \n return {\n date: parseDateCol(d[0]),\n state: d[1],\n updateTimeET: parseUpdateTimeCol(d[4]),\n lastCheck: parseUpdateTimeCol(d[5]),\n positives: parseRaceData(d, 8),\n deaths: parseRaceData(d, 23),\n negatives: parseRaceData(d, 38),\n }\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"md`Fetch the data and parse it into a CSV in one step:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"covidData = parseDataCSV(await (await fetch(COVID_DATA_URL)).text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"md`Grab the latest commit for each U.S. state:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"latestCovidData = Object.keys(US_STATES).map(state => {\n // For each state we select all rows that match that state,\n // sort in descending update time order, and grab the\n // topmost record\n return covidData.filter(d => d.state === state).sort((a, b) => b.updateTimeET - a.updateTimeET)[0]\n}).filter(x => !!x) // Filter out states which had no entries (mostly actually territories)","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"md`Okay, with the COVID data sorted, it's time to aggregate the ACS race data into a format we can use alongside it:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":736,"value":"md`Zip the two datasets together:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":739,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"md`A function that turns state data into a grid chart:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1155,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":619,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":841,"value":"chartWidth = {\n if (width > 1200) {\n return (width / 5) - 10\n }\n if (width > 800) {\n return (width / 3) - 10\n } else if (width > 600) {\n return (width / 2) - 10\n } else {\n return width\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"import { radio, text } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"R = require('ramda')","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":931,"value":"RACES = ({\n white: { abbr: 'W', label: 'White', color: \"#158\" },\n black: { abbr: 'B', label: 'Black', color: \"#752\" },\n aian: { abbr: 'AI', label: 'American Indian/Alaska Native', color: \"#364\" },\n asian: { abbr: 'A', label: 'Asian', color: \"#822\" },\n nhpi: { abbr: 'NH', label: 'Native Hawaiian/Pacific Islander', color: \"#638\" },\n multiracial: { abbr: 'M', label: 'Multiracial', color: \"#378\" },\n other: { abbr: 'O', label: 'Other', color: \"#444\" },\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":413,"value":"stateNameToAbbr = n => R.invertObj(US_STATES)[n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":615,"value":"capitalize = s => s.charAt(0).toUpperCase() + s.slice(1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":710,"value":"reasonableDenominator = n => {\n // Count the number of zeroes before the first digit\n const zeroes = Math.ceil(-Math.log10(n))\n if (zeroes === Infinity || zeroes === 0) return 10000\n // Return 10^{zeroes}\n return Math.pow(10, zeroes)\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}