31:T4b6,md`As SARS-CoV-2 continues to spread through the U.S., the national picture hides the nature of the pandemic. People are widely talking about a second wave, when it appears more like multiple overlapping waves are washing across the nation. For much of April and May, New York’s cases declined but remained high enough to mask outbreaks flaring up elsewhere in the U.S. In the “patchwork pandemic,” as coined by [Ed Yong for the Atlantic](https://www.theatlantic.com/health/archive/2020/05/patchwork-pandemic-states-reopening-inequalities/611866/), regions experience the pandemic at different times and in different ways: > “The patchwork is not static. Next month’s hot spots will not be the same as last month’s. The SARS-CoV-2 coronavirus is already moving from the big coastal cities where it first made its mark into rural heartland areas that had previously gone unscathed. People who only heard about the disease secondhand through the news will start hearing about it firsthand from their family.” This map shows where in the U.S. COVID-19 cases are climbing (daily new cases are accelerating) and where they are declining (daily new cases are decelerating) broken out by county.`32:Tb31,viewof selectedCounty = { const map = d3.select(html``) const path = d3.geoPath() // We're gonna use this custom pattern as a fill map.append(() => svg` `) // Legend map.append('g').attr('transform', 'translate(650, 0)').append( () => legend({ color: colorScale, title: 'Δ daily new cases per million (2 wk linear regression)', tickFormat: d => d3.format('.1r')(d * 1000000) }) ) // County shapes and fills const countyShapes = map.append('g') .selectAll() .data(topojson.feature(us, us.objects.counties).features) .join('path') .attr('d', path) .attr('fill', d => { try { return colorScale(annotatedCounties.find(c => +c.fips === +d.id).regression.m) } catch { return 'url(#diagonalHatch)' } }) // States outline map.append('g') .selectAll() .data(topojson.feature(us, us.objects.states).features) .join('path') .attr('d', path) .attr('fill', 'none') .attr('stroke', '#FFF') .attr('stroke-width', '2') .attr('pointer-events', 'none') // U.S. outine map.append('path') .datum(topojson.feature(us, us.objects.nation)) .attr('d', path) .attr('fill', 'none') .attr('stroke', '#DDD') // Prepare output const output = Object.assign( map.node(), // We add a value to output to make this a usable view { value: null, } ) // Interactivity let pinned = false // State variable, basically const selectionPath = map.append('path') .attr('fill', 'none') .attr('stroke', '#000') .attr('stroke-width', 2) .attr('pointer-events', 'none') const inputEvent = new CustomEvent('input') function updateSelectedCounty(datum) { if (!datum) { selectionPath.attr('d', '') return } // Highlight the county selectionPath.datum(datum) .attr('d', path) // Output the county ID output.value = +datum.id output.dispatchEvent(inputEvent) } function togglePin(datum) { pinned = !pinned updateSelectedCounty(datum) } function handleMouseover(datum) { if (pinned === true) return updateSelectedCounty(datum) // Output a null county ID output.value = null output.dispatchEvent(inputEvent) } function handleMouseout() { if (pinned === true) return updateSelectedCounty() } countyShapes.on('mouseover', handleMouseover) .on('mouseout', handleMouseout) .on('click', togglePin) // Return the output node return output }33:T667,md`Some caveats: * This map is only as good as the underlying data. Counties whose data is incomplete or who have small populations with noisy data may not be reliable. NYT’s county data does not include total testing counts, so variation in testing can also cause variation in results, i.e., counties that are increasing testing may see a corresponding rise in positives. Small spots of red or blue should be interpreted cautiously. Large swaths, however, are likely meaningful. * A geographic map elides the magnitude of particular outbreaks. A region may appear mostly blue if it has several large unpopulated counties where cases are falling even if one or two populous counties with rising cases actually eclipse those numbers; this is the case in Arizona at the time of this writing on 7/16. The reverse may also be true—at the time of this writing Massachusetts has two large-in-area reddish counties, but overall number are declining. No one visual can fully capture the story of the pandemic. * Similarly, this map only captures rising/falling, not absolute outbreak size. A county that is gray may be doing quite well if they never had many cases to begin with and have remained close to zero for two weeks. A different gray county may be doing poorly if they had 100 cases two weeks ago and have continued to have 100 cases every day since. * A two week linear regression may not be the best way to capture patterns from data as noisy as county testing reports. I’m looking into other methods as well. I am only an amateur statistician armed with a B.A. in Math and not at all an epidemiologist. Suggestions are invited.`34:T684,annotatedCounties = countyData.map(({ key, values }) => { const latestDate = d3.max(values, v => v.date) // We get 15 days worth of data so we can calculate deltas for 14 days const startDate = dfns.sub(latestDate, { weeks: 2, days: 1 }) const countyPopulationObj = countyPopulations.find(c => +c.fips === +key) const totalPopulation = countyPopulationObj ? +countyPopulationObj.population : null // Annotate the data with deltas const valuesWithDeltas = values.filter(v => v.date > startDate).sort((a, b) => a.date - b.date).map( // Add new cases and new deaths as difference between previous day. Return null for day -15 ({ cases, deaths, ...rest }, i, arr) => (i > 0 ? { ...rest, cases, newCases: cases - arr[i-1].cases, deaths, newDeaths: deaths - arr[i-1].deaths, } : null) // Remove the null value representing day -15 ).filter(v => !!v) // Use these points to calculate a regression of new cases per capita const regressionPoints = valuesWithDeltas.filter(v => v.date > startDate).map(v => [ dfns.differenceInDays(v.date, startDate), v.newCases / totalPopulation ]) // Total all cases for the past two weeks const totalCases = d3.sum(valuesWithDeltas, d => d.newCases) // Return data annotated with deltas and the regression return { county: valuesWithDeltas.length > 0 ? valuesWithDeltas[0].county : null, state: valuesWithDeltas.length > 0 ? valuesWithDeltas[0].state : null, fips: key, days: valuesWithDeltas, totalPopulation, regressionPoints, regression: totalCases < caseThreshold ? null : ss.linearRegression(regressionPoints), } })35:T411,colorScale = { // The following code generates a linear scale with endpoints based on the data's // 80% and 20% percentiles. I've retired it in favor of a static 10-log scale, but // have left the code intact in case I decide to bring it back. // // const stepCount = 11 // const scaleMax = Math.max( // d3.quantile(annotatedCounties, 0.8, d => d.regression.m), // Math.abs(d3.quantile(annotatedCounties, 0.2, d => d.regression.m)) // ) // // How many steps are in half the scale? // const stepSize = scaleMax * 2 / (stepCount) // // Define the domain as an array of thresholds // // We increase the max value a little bit to ensure that the max value doesn't get // // left out. Float arithmetic can be a little tricky sometimes. // const domain = d3.range(-scaleMax + stepSize, scaleMax - (stepSize / 2), stepSize) return d3.scaleThreshold( [ -1/100000, -1/1000000, -1/10000000, 1/10000000, 1/1000000, 1/100000, ], [...d3.schemeRdBu[7]].reverse() ) }36:Tff9,countyChart = datum => { const chartWidth = 400 const chartHeight = chartWidth * 0.5 const margin = { left: 40, right: 40, top: 10, bottom: 20 } const formatNumber = d3.format('.2r') const xScale = d3.scaleTime() .domain(d3.extent(datum.days, d => d.date)) .range([margin.left, chartWidth - margin.right]) const yScale = d3.scaleLinear() .domain([0, d3.max(datum.days, d => d.newCases)]) .range([chartHeight - margin.bottom, margin.top]) // Undo the conversion to per-capita while generating the linear regression line const linearRegressionLine = ss.linearRegressionLine({ m: datum.regression.m * datum.totalPopulation, b: datum.regression.b * datum.totalPopulation, }) // Get linear regression in the form of x more cases per day per day for display const perDay = datum.regression.m * datum.totalPopulation // Get slope as rendered in degrees for rendering text along the regression line const slope = Math.atan( (yScale(linearRegressionLine(0)) - yScale(linearRegressionLine(14))) / (margin.left - chartWidth + margin.right) ) * 180 / Math.PI // Prepare grid measurements const xLabelTicks = xScale.ticks(d3.timeDay.every(2)) const xGridTicks = xScale.ticks(d3.timeDay.every(1)) return html` ` }37:[{"id":"50848f0dd4d2d9c84821adba90ca625cb2815694117bbb7b6ae393e788aae9d85f19a6c73d60d642bb04e2f95b87993e8c7312d4d4da6a1431c58460f5ad6c63","href":"https://static.observableusercontent.com/files/50848f0dd4d2d9c84821adba90ca625cb2815694117bbb7b6ae393e788aae9d85f19a6c73d60d642bb04e2f95b87993e8c7312d4d4da6a1431c58460f5ad6c63","name":"counties-albers-10m.json","type":"application/json","lastModified":1592182385918.858,"size":795407},{"id":"3843ea7b728f960e56dc87ce4606b3bda0be508b9d09da4eda318f26fff4e8bbc5b7832107ce74f31113551544c8548707230334bb9288b609444ad45e555ee2","href":"https://static.observableusercontent.com/files/3843ea7b728f960e56dc87ce4606b3bda0be508b9d09da4eda318f26fff4e8bbc5b7832107ce74f31113551544c8548707230334bb9288b609444ad45e555ee2","name":"ACSDT5Y2018.B01003_data_with_overlays_2020-06-12T132213.csv","type":"text/csv","lastModified":1592199404655.148,"size":193834}] 2f:{"title":"Where is COVID-19 rising and falling in the U.S.?","cells":[{"id":0,"value":"md`# Where is COVID-19 rising and falling in the U.S.?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":841,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1211,"value":"viewof caseThreshold = slider({\n title: \"Case Threshold\",\n value: 50,\n min: 0,\n max: 300,\n step: 5,\n description: \"Hide counties with this few cases in the past two weeks.\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1001,"value":"// The final piece here preserves the previously rendered data to prevent abrupt component disappearance when\n// mousing between counties\nselectedCounty ? countySummary(annotatedCounties.find(c => +c.fips === selectedCounty)) : this || html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1063,"value":"md`_Hover over a county to see details. Click to pin those details. Click again to unpin._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":950,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":964,"value":"md`Recommended reading:\n\n- [The Atlantic: _America’s Patchwork Pandemic Is Fraying Even Further_](https://www.theatlantic.com/health/archive/2020/05/patchwork-pandemic-states-reopening-inequalities/611866/)\n- [The New York Times: _We’re Sharing Coronavirus Case Data for Every U.S. County_](https://www.nytimes.com/article/coronavirus-county-data-us.html)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"md`Data from [The New York Times](https://www.nytimes.com/article/coronavirus-county-data-us.html)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"md`***\n\n## Processing the Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"md`Fetch the NYT's latest county-level COVID data:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"rawCountyData = d3.csv(\n 'https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-counties.csv',\n d => {\n // NYT's data doesn't assign NYC a FIPS, so we manually assign if the FIPS the census\n // uses for \"New York County\"\n if (d.county === \"New York City\") d.fips = \"36061\"\n // Parse the time _not_ using UTC midnight\n d.date = d3.timeParse('%Y-%m-%d')(d.date)\n // Convert cases and deaths to numbers\n d.cases = +d.cases\n d.deaths = +d.deaths\n return d\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":404,"value":"md`Nest it by county (storing [FIPS id](https://en.wikipedia.org/wiki/FIPS_county_code) as the key):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"countyData = d3.nest().key(d => d.fips).entries(rawCountyData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":408,"value":"md`Fetch the population data per county (we've uploaded this CSV sourced from the American Community Survey):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"countyPopulations = d3.csv(\n await FileAttachment(\"ACSDT5Y2018.B01003_data_with_overlays_2020-06-12T132213.csv\").url(),\n d => {\n if (d.GEO_ID === 'id') return null\n return {\n fips: d.GEO_ID.replace('0500000US', ''),\n name: d.NAME,\n population: +d.B01003_001E,\n }\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1071,"value":"countyPopulations.filter(c => c.name.includes('New York'))","pinned":true,"hidden":false,"mode":"ojs"},{"id":411,"value":"md`Take our county COVID data and annotate it. In particular add:\n\n* A list of \\`[day, increase]\\` pairs, where \\`day\\` is an integer 1-indexed from the start of a two week period\n* Total county population, sourced from the ACS file above\n* A linear regression (in the form of \\`{m, b}\\` of the day/increase pairs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":395,"value":"md`## Preparing Chart Rendering Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"md`Generate a color scale for coloring counties by rate of increase/decrease:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":419,"value":"md`## County Summary\n\nPrepare functions to show underlying county data with the regression line.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":759,"value":"countyTable = (days) => html`\n \n ${days.slice(0, 7).map(d => html`\n \n \n \n \n \n `)}\n

\n ${d3.timeFormat('%-m/%-d')(d.date)}\n	\n ${d.newCases}\n	\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":756,"value":"countyTables = (datum) => html`\n

\n \n

\n ${[\n countyTable(datum.days.slice(0, 7)),\n countyTable(datum.days.slice(7, 14)),\n ]}\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":781,"value":"countySummary = (datum) => html`\n

\n ${[countyTables(datum), html`

${countyChart(datum)}

`]}\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`***\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":917,"value":"md`\n### To Do\n\n- Figure out what's up with those null counties (these may be counties that only started reporting cases recently)\n- Still show names for null counties\n- Handle N/A counties more gracefully (these may be counties that have never reported any cases and thus are not in the NYT data set)\n- Add county search as an alternative to map clicking\n- Mobile optimize\n- Maybe: Make it possible to scrub through timeline (will require significant performance optimizations)\n- Maybe: Switch to percentage increase instead of increase per day per capita\n- Maybe: Incorporate testing level somehow. Percent positivity?\n- Maybe: It would be cool to see this data weighted by population instead of geographic area. Maybe a county dot map with dots sized to county population?\n- Maybe: Improve performance enough to animate over time (and change threshold rapidly)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"md`### Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":913,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"ss = require('simple-statistics')","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"dfns = require('https://bundle.run/date-fns@2.14.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"us = FileAttachment(\"counties-albers-10m.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1163,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}