45:["$","title",null,{"children":"How many SARS-CoV-2 tests are we running in the U.S.? | Harris Lapiroff | Observable"}] 4d:T4c6,md`Red for positive results, gray for negative tests. In the past ${MOVING_AVERAGE_N} days **${REGION_NAME}** has processed an approximate average of **${d3.format(',.3r')(getTotalSMA(activeData[activeData.length - 1]))}** test results per day. ## Positives as a Percentage Another metric for how well our testing is going is how few positives turn up relative to the number of tests being run. A declining rate of positive tests means that some combination of infections declining or test capacity increasing is occurring, either of which is good news for controlling the epidemic. A sufficiently low percentage of positives might mean that we are finding most cases. > The researchers said that expanded testing could reduce the rate to **10 percent**, which is the maximum rate recommended by the World Health Organization. In Germany, that number is **7 percent**, and in South Korea, it is closer to **3 percent**. > > — [_The New York Times_](https://www.nytimes.com/interactive/2020/04/17/us/coronavirus-testing-states.html) This next chart shows positive test results **in ${REGION_NAME}** as a percentage of total tests.`4e:T576,addInteractivity = ( xScale, // d3 scale yScale, // d3 scale g // d3 svg ) => { const line = g.append('g') .append('line') .attr('stroke', 'rgba(0, 0, 0, 0.5)') .attr('stroke-width', 1) .attr('x1', 100) .attr('y1', yScale.range()[0]) .attr('x2', 100) .attr('y2', yScale.range()[1]) .attr('opacity', 0) // We're "cheat" a little at interactivity by leveraging Obervable's views functionality // We start by setting the value of the DOM node to null and then update it according to mouse events const node = g.node() node.value = null const inputEvent = new CustomEvent("input") g.on('mouseover', function() { line.attr('opacity', 1) }) g.on('mouseout', function() { line.attr('opacity', 0) node.value = null node.dispatchEvent(inputEvent) }) g.on('mousemove', function() { const mouse = d3.mouse(this) const xDomainVal = xScale.invert(mouse[0]) // Add 12 hours and clip off the time to round to the nearest midnight const xDomainValRounded = (new Date(+xDomainVal + 43200000)).setHours(0, 0, 0, 0) const xRangeVal = xScale.clamp(true)(xDomainValRounded) // Offset position by 0.5 to get a pixel aligned line line.attr('x1', xRangeVal + 0.5) .attr('x2', xRangeVal + 0.5) node.value = new Date(xDomainValRounded) node.dispatchEvent(inputEvent) }) }4f:Tf14,stateChart = (stateAbbr, width, highlight = 'total') => { const height = Math.floor(width / 1.618) const margin = {left: 40, right: 40, top: 10, bottom: 20} const stateData = annotateData( statesData.filter(d => d.state === stateAbbr), MOVING_AVERAGE_N ) if (stateData.length === 0) return null const xScale = d3.scaleTime() .domain([DATA_START_DATE, d3.max(usData, getDate)]) .range([margin.left, width - margin.right]) // Let's make a line for number of tests const yScaleTotals = d3.scaleLinear() .domain([0, d3.max(stateData, getTotalSMA)]) .range([height - margin.bottom, margin.top]) .nice() const testLine = d3.line() .defined(d => !isNaN(getTotalSMA(d))) .x(d => xScale(getDate(d))) .y(d => yScaleTotals(getTotalSMA(d))) // Let's make a line for positives as a percentage of tsts const yScalePercentage = d3.scaleLinear() .domain([0, 1]) .range([height - margin.bottom, margin.top]) .nice() const posPerTestLine = d3.line() .defined(d => !isNaN(getPosPerTestSMA(d))) .x(d => xScale(getDate(d))) .y(d => yScalePercentage(getPosPerTestSMA(d))) // Now generate the chart HTML and SVG const wrapper = d3.select(html`

`) const svg = wrapper.append('svg') .attr('width', width) .attr('height', height) // Add the name underneath the chart wrapper.append('div') .attr('class', 'chart-label') .html(US_STATES[stateAbbr]) // Add the x-axis svg.append('g') .attr('transform', `translate(0, ${height - margin.bottom})`) .call( d3.axisBottom(xScale) .ticks(width > 400 ? 5 : 3) // Fewer ticks for smaller screen .tickFormat(d3.timeFormat(width > 400 ? '%b %d' : '%m/%d')) // Concise dates for smaller screen .tickSize(5) ) // Add y-axes svg.append('g') .attr('class', 'grid') .attr('transform', `translate(${margin.left}, 0)`) .call( d3.axisLeft(highlight == 'total' ? yScaleTotals : yScalePercentage) .ticks(5) .tickFormat(highlight == 'total' ? d3.format('.2s') : d3.format('.0%')) .tickSize(-width + margin.left + margin.right) ) .call(g => g.select('.domain').remove()) // Add the test total data svg.append('path') .datum(stateData) .attr('d', testLine) .attr('fill', 'none') .attr('stroke', TOTAL_COLOR) .attr('stroke-width', highlight === 'total' ? 2 : 1) .attr('stroke-dasharray', highlight === 'total' ? FOREGROUND_DASH : BACKGROUND_DASH) // Add the pos per test data svg.append('path') .datum(stateData) .attr('d', posPerTestLine) .attr('fill', 'none') .attr('stroke', POS_COLOR) .attr('stroke-width', highlight === 'percentage' ? 2 : 1) .attr('stroke-dasharray', highlight === 'percentage' ? FOREGROUND_DASH : BACKGROUND_DASH) const finalPoint = stateData[stateData.length - 1] const finalPointTotal = getTotalSMA(finalPoint) svg.append('text') .attr('x', width - margin.right + 5) .attr('y', yScaleTotals(finalPointTotal)) .attr('font-family', 'sans-serif') .attr('font-size', 12) .attr('font-weight', 'bold') .attr('fill', TOTAL_COLOR) .attr('dominant-baseline', 'middle') .attr('opacity', highlight === 'total' ? 1 : 0.25) .text(d3.format('.2s')(finalPointTotal)) const finalPointPosPercentage = getPosPerTestSMA(finalPoint) svg.append('text') .attr('x', width - margin.right + 5) .attr('y', yScalePercentage(finalPointPosPercentage)) .attr('font-family', 'sans-serif') .attr('font-size', 12) .attr('font-weight', 'bold') .attr('fill', POS_COLOR) .attr('dominant-baseline', 'middle') .attr('opacity', highlight === 'percentage' ? 1 : 0.25) .text(d3.format('.0%')(finalPointPosPercentage)) return wrapper.node() }50:T5a7,US_STATES = ({ "AL": "Alabama", "AK": "Alaska", // American Samoa's data is not great // "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" })51:[] 49:{"id":"159e7ae69e8966e8","slug":"u-s-sars-cov-2-tests","title":"How many SARS-CoV-2 tests are we running in the U.S.?","thumbnail":"140981e962d0aa2d6ba1f2eece90d1ba856503cf78523db141ade61768768eb6","access_level":"public","create_time":"$D2020-04-26T03:14:03.789Z","update_time":"$D2020-08-27T17:23:18.249Z","view_time":null,"first_public_time":"$D2020-04-26T04:09:12.831Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"3587ecfe3e28cf64","login":"harrislapiroff","name":"Harris Lapiroff","avatar_url":"https://avatars-next.observableusercontent.com/9777c782bd50f7d54c128b6ac9313f8731fb712666730d9e662539eb3f5a5f07","tier":"starter_2024","bio":"Principal Web Developer at Freedom of the Press Foundation","followed_by_you":false,"follows_you":false},"version":1317,"publish_version":1317,"role":null,"authored":false,"authors":[{"type":"individual","id":"666e3ebbff9b41a2","login":"harrislapiroff","name":"Harris Lapiroff","avatar_url":"https://avatars-next.observableusercontent.com/9777c782bd50f7d54c128b6ac9313f8731fb712666730d9e662539eb3f5a5f07","tier":null,"bio":"Principal Web Developer at Freedom of the Press Foundation","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"666e3ebbff9b41a2","login":"harrislapiroff","name":"Harris Lapiroff","avatar_url":"https://avatars-next.observableusercontent.com/9777c782bd50f7d54c128b6ac9313f8731fb712666730d9e662539eb3f5a5f07","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"2f3f46dbe149ed9b","slug":"coronavirus","title":"Coronavirus","owner":{"id":"3587ecfe3e28cf64","login":"harrislapiroff","name":"Harris Lapiroff"}},"type":"notebook","body":{"titling":"auto","title":"How many SARS-CoV-2 tests are we running in the U.S.?","cells":[{"id":30,"value":"md`# How many SARS-CoV-2 tests are we running in the U.S.?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"md`I've been reading a lot about how testing (alongside contact tracing and isolation) is a crucial element to safely reopening society and I wanted to know whether our testing capacity is improving toward those goals.\n\n_Caveat:_ I'm not an infectious disease expert and I don't have much more than a passing proficiency with statistics (B.A. Mathematics). I've tried to approach the question as straightforwardly as possible with minimal editorializing of my own.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"viewof dataFilter = {\n return html`\n \n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"md`## How many tests are we running?\n\n> To reopen the United States by mid-May, the number of tests performed every day should be **500,000 to 700,000**, according to [the Harvard estimates](https://globalepidemics.org/2020/04/18/why-we-need-500000-tests-per-day-to-open-the-economy-and-stay-open/).\n>\n> — [_The New York Times_](https://www.nytimes.com/interactive/2020/04/17/us/coronavirus-testing-states.html)\n\nThis chart shows the number of test results reported **in ${REGION_NAME}** each day, shown as a 7-day average to smooth out reporting inconsistencies.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"viewof selectedDate = testChart.node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"value":"{\n const DEFAULT_MESSAGE = md`_Mouse over chart for details_

`\n \n // If no date is selected, return a default message\n if (!selectedDate) return DEFAULT_MESSAGE\n\n const d = getPointByDate(activeData, selectedDate)\n \n // If there is no data at that point, return a default message\n if (!d) return DEFAULT_MESSAGE\n \n return html`\n ${d3.timeFormat('%a %b %d')(getDate(d))}
\n\n Test results:\n ${d3.format(',d')(getTotalSMA(d))} ${MOVING_AVERAGE_N}d avg\n (${d3.format(',d')(getTestCount(d))} actual)
\n\n Negatives:\n ${d3.format(',d')(getNegSMA(d))} ${MOVING_AVERAGE_N}d avg\n (${d3.format(',d')(getNegTestCount(d))} actual)
\n\n Positives:\n ${d3.format(',d')(getPosSMA(d))} ${MOVING_AVERAGE_N}d avg\n (${d3.format(',d')(getPosTestCount(d))} actual)\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"viewof selectedDatePct = posPerTestChart.node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":996,"value":"{\n const DEFAULT_MESSAGE = md`_Mouse over chart for details_

`\n \n // If no date is selected, return a default message\n if (!selectedDatePct) return DEFAULT_MESSAGE\n\n const d = getPointByDate(activeData, selectedDatePct)\n \n // If there is no data at that point, return a default message\n if (!d) return DEFAULT_MESSAGE\n \n return html`\n ${d3.timeFormat('%a %b %d')(getDate(d))}
\n\n ${d3.format('.2%')(getPosPerTest(d))}\n (${MOVING_AVERAGE_N}-day avg: ${d3.format('.2%')(getPosPerTestSMA(d))})\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"md`The above chart excludes days on which the number of test results that day was fewer than ${MIN_TESTS_FOR_PERCENTAGE}, since those may not provide a useful percentage.\n\nIn the past ${MOVING_AVERAGE_N} days, **${REGION_NAME}** has turned up an average of **${d3.format('.1%')(getPosPerTestSMA(activeData[activeData.length - 1]))}** positive test results.\n\n_See [The Covid Tracking Project](https://covidtracking.com/about-data) for caveats about the source data._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1203,"value":"md`# State-by-State Charts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1210,"value":"viewof STATE_CHART_HIGHLIGHT = radio({\n title: 'Highlight',\n value: 'percentage',\n options: [\n { value: 'percentage', label: 'Percentage of Positives' },\n { value: 'total', label: 'Total Tests' },\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1040,"value":"{\n const wrapper = html`

7-day averages. Y-axis shown for foregrounded line.

`\n \n const grid = html`

`\n \n Object.keys(US_STATES).forEach(state => {\n const chart = stateChart(state, width > 600 ? width / 3 : width, STATE_CHART_HIGHLIGHT)\n if (chart === null) return\n grid.appendChild(chart)\n })\n \n wrapper.appendChild(grid)\n \n return wrapper\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"md`
\n# Generating the Chart\n\nRead on for technical details about how the data above is sourced and processed.\n\nFirst we fetch the data from [The COVID Tracking Project](https://covidtracking.com/):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"usData = (await fetch('https://corsproxy.harrislapiroff.com/https://covidtracking.com/api/v1/us/daily.json')).json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"statesData = (await fetch('https://corsproxy.harrislapiroff.com/https://covidtracking.com/api/v1/states/daily.json')).json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"md`
\nAnd then choose the active dataset based on the option selected in the dropdown at the top. In the process we also annotate the data with a simple ${MOVING_AVERAGE_N}-day moving average, and limit to data after March (pre-March data is much spottier):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"annotateData = (data, movingAverageN) => {\n data.sort((a, b) => a.date - b.date)\n return data.map((d, i, a) => {\n const startIdx = i < movingAverageN ? 0 : i + 1 - movingAverageN\n const dataToAverage = a.slice(startIdx, i + 1)\n return {\n ...d,\n positiveIncreaseSMA: average(dataToAverage.map(getPosTestCount)),\n negativeIncreaseSMA: average(dataToAverage.map(getNegTestCount)),\n totalIncreaseSMA: average(dataToAverage.map(getTestCount)),\n }\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"md`For the sake of calculating this moving average, if there aren't ${MOVING_AVERAGE_N} days of data prior to a particular point, we average however many days there are up till that point. A different way of approaching this could be to simply not return data unless there are ${MOVING_AVERAGE_N} prior days.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"activeData = annotateData(\n dataFilter === 'ALL' ? usData : statesData.filter(d => d.state === dataFilter),\n MOVING_AVERAGE_N\n).filter(d => getDate(d) >= DATA_START_DATE)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"md`## Testing chart\n\nNow we set up the chart. Layout:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"height = width * .618","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"margin = ({ top: 20, right: 20, bottom: 40, left: 60 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"md`
Axes:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"xScale = d3.scaleTime()\n .domain([DATA_START_DATE, d3.max(usData, getDate)])\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"yScale = d3.scaleLinear()\n .domain([0, d3.max(activeData, getTestCount)])\n .range([height - margin.bottom, margin.top])\n .nice()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"xAxis = g => g.attr('transform', `translate(0, ${height - margin.bottom})`)\n .call(\n d3.axisBottom(xScale)\n .ticks(width > 400 ? 15 : 5) // Fewer ticks for smaller screen\n .tickFormat(d3.timeFormat(width > 400 ? '%b %d' : '%m/%d')) // Concise dates for smaller screen\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"yAxis = g => g.attr('transform', `translate(${margin.left}, 0)`)\n .attr('class', 'grid')\n .call(\n d3.axisLeft(yScale)\n .ticks(5)\n .tickSize(-width + margin.left + margin.right)\n )\n .call(g => g.select('.domain').remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"md`
Grid lines:\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"md`
Data lines:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"totalTestsSMALine = d3.area()\n .defined(d => !isNaN(getPosSMA(d)))\n .x(d => xScale(getDate(d)))\n .y1(d => yScale(getTotalSMA(d)))\n .y0(d => yScale(getPosSMA(d)) - 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"posTestsSMALine = d3.area()\n .defined(d => !isNaN(getPosSMA(d)))\n .x(d => xScale(getDate(d)))\n .y1(d => yScale(getPosSMA(d)))\n .y0(d => yScale(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"md`
Now we add interactivity. This is sort of a cheat: this function turns a D3 graph into an [Observable view](https://observablehq.com/@observablehq/introduction-to-views) that provides the date currently moused over as its value, which will let us take advantage of Observable's reactivity to update a detail cell below the chart, live, as a user mouses over it.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"md`
\nThe chart:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"testChart = {\n const svg = d3.select(DOM.svg(width, height))\n \n svg.append('g').call(yAxis)\n\n const lineConfig = [\n {\n d: totalTestsSMALine,\n fill: TOTAL_COLOR,\n stroke: 'none',\n },\n {\n d: posTestsSMALine,\n fill: POS_COLOR,\n stroke: 'none',\n }, \n ]\n \n lineConfig.forEach(conf => {\n const line = svg.append('path').datum(activeData)\n Object.entries(conf).forEach(([k, v]) => line.attr(k, v))\n })\n \n // x-axis has to go after lines so it stacks on top of them\n svg.append('g').call(xAxis)\n .style('text-anchor', 'end')\n .selectAll('text')\n .attr('y', 8)\n .attr('x', -6)\n .attr('transform', 'rotate(-45)')\n \n svg.call(\n addInteractivity.bind(\n this,\n xScale,\n yScale,\n )\n )\n \n return svg\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"md`## Positives as a percentage of total chart\n\nWe can reuse the same x-axis from the original chart, but we'll need a new y-axis that spans percentages 0 - 100%:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"posPerYScale = d3.scaleLinear()\n .domain([0, 1]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"posPerYAxis = g => g.attr('transform', `translate(${margin.left}, 0)`)\n .attr('class', 'grid')\n .call(\n d3.axisLeft(posPerYScale)\n .ticks(10)\n .tickFormat(d3.format(\".0%\"))\n .tickSize(-width + margin.left + margin.right)\n )\n .call(g => g.select('.domain').remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"md`
Data lines:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"posPerLine = d3.line()\n .defined(d => !isNaN(getPosPerTest(d)))\n .x(d => xScale(getDate(d)))\n .y(d => posPerYScale(getPosPerTest(d)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"posPerSMALine = d3.line()\n .defined(d => !isNaN(getPosPerTestSMA(d)))\n .x(d => xScale(getDate(d)))\n .y(d => posPerYScale(getPosPerTestSMA(d)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"md`
The chart:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"posPerTestChart = {\n const svg = d3.select(DOM.svg(width, height))\n\n svg.append('g').call(xAxis)\n .style('text-anchor', 'end')\n .selectAll('text')\n .attr('y', 8)\n .attr('x', -6)\n .attr('transform', 'rotate(-45)')\n \n svg.append('g').call(posPerYAxis)\n \n svg.append('path')\n .datum(activeData)\n .attr('d', posPerSMALine)\n .attr('fill', 'none')\n .attr('stroke', POS_COLOR)\n .attr('stroke-width', FOREGROUND_WIDTH)\n .attr('stroke-dasharray', FOREGROUND_DASH)\n \n svg.call(\n addInteractivity.bind(\n this,\n xScale,\n yScale,\n )\n )\n \n return svg\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1032,"value":"md`## State Charts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1267,"value":"STATE_CHART_WIDTH = width > 600 ? '33%' : '100%'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1133,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1035,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`
\n# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"md`## Styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"md`## Utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"average = (arr) => arr.reduce((acc, v) => acc + v) / arr.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":665,"value":"REGION_NAME = dataFilter === 'ALL' ? 'the U.S.' : US_STATES[dataFilter]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"intToStr = i => i.toString()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"strToDate = s => new Date(s.slice(0,4), Number.parseInt(s.slice(4,6)) - 1, s.slice(6,8))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"getDate = d => strToDate(intToStr(d.date))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"getTestCount = d => d.totalTestResultsIncrease","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"getPosTestCount = d => d.positiveIncrease","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"getNegTestCount = d => d.negativeIncrease","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"getTotalSMA = d => d.totalIncreaseSMA","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"getPosSMA = d => d.positiveIncreaseSMA","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"getNegSMA = d => d.negativeIncreaseSMA","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"getPosPerTest = d => {\n const testCount = getTestCount(d)\n if (testCount < MIN_TESTS_FOR_PERCENTAGE) return NaN // If test count is too low to return a useful %age\n return getPosTestCount(d) / testCount\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"getPosPerTestSMA = d => {\n const testCountSMA = getTotalSMA(d)\n if (testCountSMA < MIN_TESTS_FOR_PERCENTAGE) return NaN // If test count is too low to return a useful %age\n return getPosSMA(d) / testCountSMA\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"getPointByDate = (data, date) => data.filter(d => date.getTime() == getDate(d).getTime())[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"md`## Config`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"TOTAL_COLOR = '#666'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"POS_COLOR = '#820'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"NEG_COLOR = '#9B7'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"BACKGROUND_DASH = '1 2'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"FOREGROUND_DASH = '0'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"FOREGROUND_WIDTH = width > 600 ? 4 : 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"BACKGROUND_WIDTH = width > 600 ? 1.5 : 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"MOVING_AVERAGE_N = 7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"MIN_TESTS_FOR_PERCENTAGE = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"DATA_START_DATE = new Date(2020, 2, 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"1"}} 44:null