2a:null 2b:["$","title",null,{"children":"COVID-19 Numbers by State, Side by Side | Amit Sch | Observable"}] 30:T5cf,charts = { const el = this || html`

` const sel = d3.select(el) let card = sel.select('.cards').selectAll('.card') .data(selectedStates, v => v ) const cardExit = card.exit() .transition() .style('margin-right', `${-cardW}px`) .style('opacity', 0) .remove() const cardEnter = card.enter() .append('div') .attr('class', 'card') .style('display', 'inline-block') .style('padding', '10px 1px') .style('margin-right', `${-cardW}px`) .style('opacity', 0) card = cardEnter.merge(card) .each(function(state) { const card = d3.select(this) card.selectAll('h2') .data([null]) .join('h2') .style('text-align', 'center') .text(codeToName[state]) }) .each(renderStats) .each(renderChart) .each(renderAges) ;(cardEnter.size() !== card.size() ? card.transition() : card) .style('margin-right', `0px`) .style('opacity', 1) if (cardEnter.size() > 0) { card.sort((a,b) => d3.descending( relevantNumTests(testsAtDateByState.get(a)), relevantNumTests(testsAtDateByState.get(b)) )) } return el }31:T9de,mapSelector = { const size = [500, 300] // const colorScale = d3.scaleSequential(i => d3.interpolateOranges(Math.pow(i, .5))) const colorScale = d3.scaleSequentialSqrt(d3.interpolateOranges) .domain(d3.extent(testsAtDate, adjustedNumTests)) const legend = colorLegend({ color: colorScale, tickFormat: '.1s', title: `${ adjust ? 'Population-Adjusted' : 'Num' } ${ showTotal ? 'Total Tests' : showPosit ? 'Positive Tests' : showDeath ? 'Deaths' : 'Total Tests' }` }) const formEl = html``; const svg = d3.select(DOM.svg(size[0], size[1])); svg.style('margin', "5px 0 20px"); svg.append('g') .attr('class', 'fills') .attr('transform', 'scale(.5)') svg.append('g') .attr('class', 'strokes') .attr('transform', 'scale(.5)') .attr('stroke', '#fff') .attr('fill', 'none') svg.append('g') .attr('class', 'strokes') .attr('transform', 'scale(.5)') .attr('stroke', '#000') .attr('fill', 'none') const projection = d3 .geoAlbersUsa() .scale(1280) .translate([480, 300]); const drawPath = d3 .geoPath() formEl.append(legend); formEl.append(svg.node()); const widget = formEl function update() { let path = svg.select('g.fills').selectAll('path') .data(states.features) path.enter() .append('path') .attr('d', drawPath) .attr('stroke', '#fff') .attr('stroke-width', 2) .on('click', function() { const state = nameToCode[this.__data__.properties.name] const nextVal = mutable selectedStates.concat() if (nextVal.includes(state)) { nextVal.splice(nextVal.indexOf(state), 1) } else { nextVal.push(state) } mutable selectedStates = nextVal widget.dispatchEvent(new CustomEvent('input')) update() }) .merge(path) .attr('fill', d => colorScale(adjustedNumTests( testsAtDateByState.get(nameToCode[d.properties.name]) ))) let selection = svg.selectAll('g.strokes').selectAll('path') .data(states.features.filter(d => mutable selectedStates.includes(nameToCode[d.properties.name]))) selection.exit().remove() selection.enter() .append('path') .merge(selection) .attr('d', drawPath) .attr('stroke-width', function() { return d3.select(this.parentNode).attr('stroke') === '#fff' ? 10 : 2 }) } update() return formEl }32:T19a6,function renderChart(state) { const tickFmt0 = ratio ? d3.format('.0%') : adjust ? d3.format('.2') : d3.format('.2r') const tickFmt = adjust && !ratio ? v => tickFmt0(v) + ' / 1k' : tickFmt0 const height = 250 const series = tests .filter(d => d.state === state) .sort((a,b) => d3.ascending(a.date, b.date)) const xScale = d3.scaleTime() .domain(d3.extent(series, d => d.date)) .range([margin.l, cardW - margin.l - margin.r]) const maxNumTests = d3.max( tests.filter(d => selectedStates.includes(d.state)), d => relevantNumTests(d) || 0 ) const yScale = (logScale ? d3.scaleLog() : d3.scaleLinear()) .domain([ logScale ? Math.max(1e-10, d3.min(tests, d => relevantNumTests(d) || Infinity)) : 0, syncScale ? maxNumTests : d3.max(series, relevantNumTests) ]) .range([height, 15]) if (logScale) { yScale.nice(1) } const stacked = [ Object.assign( series.map(d => Object.assign([0, relevantNumTests(d, 'total')], {data:d})), { key: 'total' } ), ...d3.stack() .keys(['positive', 'pending', 'negative']) .value(relevantNumTests)(series), ...d3.stack() .keys(['death', 'hospitalized'] .filter(t => t == 'hospitalized' ? showHosp : t == 'death' ? showDeath : true )) // .filter(t => !showHosp && t == 'hospitalized' ? false : // !showHosp && t == 'deaths' ? false : true )) .value(relevantNumTests)(series), /*Object.assign( series.map(d => Object.assign([0, relevantNumTests(d, 'hospitalized') || 0], {data:d})), { key: 'hospitalized' } ), Object.assign( series.map(d => Object.assign([0, relevantNumTests(d, 'death') || 0], {data:d})), { key: 'death' } ),*/ ].filter(d => { if (showPosit && d.key === 'positive') { return true } if (showDeath && d.key === 'death') { return true } if (showHosp && d.key === 'hospitalized') { return true } if (showTotal && ['total', 'pending', 'negative'].includes(d.key)) { return true } return false }) if (stacked.length === 0) return const card = d3.select(this) let svg = card.selectAll('svg.testing') .data([null]) svg = svg.enter() .append('svg') .attr('class', 'testing') .attr('width', cardW) .style('height', `${height + 40}px`) .style('display', 'block') .call(function(svg) { svg.append('g').attr('class', 'xaxis') .attr('transform', `translate(0, ${yScale.range()[0] + 1})`) .attr('opacity', .5) .call(axisBottom(xScale)) svg.append('g').attr('class', 'areas') svg.append('g').attr('class', 'yaxis') svg.append('g').attr('class', 'lines') svg.append('g').attr('class', 'crosshair') .call(crosshair => { crosshair.append('line') .attr('class', 'vert') .attr('stroke', '#000') .attr('opacity', .3) .style('shape-rendering', 'crispEdges') crosshair.append('line') .attr('class', 'horz') .attr('stroke', '#000') .attr('opacity', .2) .style('shape-rendering', 'crispEdges') crosshair.append('circle') .attr('r', 3) .attr('class', 'dot') .attr('fill', '#000') }) }) .merge(svg) .on('mousemove', function(d) { const mouse = d3.mouse(this) const mouseDate = stacked[0].reduce((closest, d) => { if ( Math.abs(xScale(d.data.date) - mouse[0]) < Math.abs(xScale(closest.data.date) - mouse[0]) ) { return d } return closest }).data.date const mouseLayer = stacked .map(layer => [ layer.key, layer.find(d => d.data.date.valueOf() == mouseDate.valueOf()) ]) .reduce((closest, layerSample) => { if ( Math.abs(yScale(layerSample[1][1]) - mouse[1]) < Math.abs(yScale(closest[1][1]) - mouse[1]) ) { return layerSample } return closest }) if ( Number(mutable highlight.date) !== Number(mouseDate) || mutable highlight.layer !== mouseLayer ) { mutable highlight = { date: mouseDate, value: mouseLayer[1][1], layer: mouseLayer[0], } } }) .on('mouseleave', function() { mutable highlight = {} }) svg.select('.yaxis').call(leftAxis({scale: yScale, tickFmt})) const xCross = xScale(highlight.date) const yCross = yScale(highlight.value) || 0 const layer = stacked.find(d => d.key === highlight.layer) || stacked[0] const yDot = yScale(( layer.find(d => Number(d.data.date) === Number(highlight.date)) || layer[layer.length - 1] )[1]) || 0 svg.select('.crosshair').select('.vert') .style('display', highlight.date ? null : 'none') .attr('y1', yScale.range()[0]) .attr('y2', yScale.range()[1]) .attr('x1', xCross) .attr('x2', xCross) svg.select('.crosshair').select('.horz') .style('display', highlight.date ? null : 'none') .attr('x1', 0) .attr('x2', cardW) .attr('y1', yCross) .attr('y2', yCross) svg.select('.crosshair').select('.dot') .style('display', highlight.date ? null : 'none') .attr('fill', d3.hsl(colorScale(layer.key)).darker(.85)) .attr('cx', xCross) .attr('cy', yDot) const area = d3.area() .x (d => xScale(d.data.date)) .y0(logScale ? d => yScale(d[0] || yScale.domain()[0]) : d => yScale(d[0])) .y1(logScale ? d => yScale(d[1] || yScale.domain()[0]) : d => yScale(d[1])) .defined((d,i,a) => d.data[a.key] !== null || a.key === 'death' /* null deaths is treated as 0 */) const arealine = svg.select('.areas').selectAll('.arealine') .data(stacked, d => d.key) arealine.exit().remove() arealine.enter() .append('path').attr('class', 'arealine') .attr('fill', d => colorScale(d.key)) .merge(arealine) .transition() .attr('d', d => area(d)) const line = d3.line() .x(d => xScale(d.data.date)) .y(logScale ? d => yScale(d[1] || yScale.domain()[0]) : d => yScale(d[1])) .defined((d,i,a) => d.data[a.key] !== null) const trend = svg.select('.lines').selectAll('.trendline') .data(stacked.filter(d => ['total', 'positive'].includes(d.key)), d => d.key) trend.exit().remove() trend.enter() .append('path').attr('class', 'trendline') .attr('stroke-width', 1.5) .attr('stroke', d => d3.hsl(colorScale(d.key)).darker(.85)) .attr('fill', 'none') .merge(trend) .transition() .attr('d', d => line(d)) }33:T41d,function leftAxis({scale, tickFmt}) { return function(sel) { const tick = sel.selectAll('.tick') .data(scale.ticks(logScale ? 3 : 6), v => v) tick.exit().remove() tick.enter() .append('g') .attr('transform', v => `translate(0 ${scale(v)})`) .attr('opacity', 0) .call(tick => { tick.append('line') .attr('stroke', '#000') .attr('opacity', .1) .attr('x1', 0) .attr('x2', cardW) tick.append('text') .attr('dy', '-.15em') .attr('fill', '#000') .attr('opacity', .35) .style('font-size', '.8em') .style('font-family', 'Arial Narrow') .style('letter-spacing', '-.03em') }) .merge(tick) .attr('class', 'tick') .call(tick => { tick.select('text') .style('display', v => v === 0 ? 'none' : null) .text(v => tickFmt(v)) }) .transition() .attr('transform', v => `translate(0 ${scale(v)})`) .transition() .attr('opacity', 1) } }34:T954,function renderAges(state) { const demo = demographics.find(d => d.name === state) const counts = Object.entries(demo) .filter(([k,v]) => typeof v === 'number' && k !== 'total') .map(adjust ? ([k,v]) => [k, v/demo.total] : d => d) const colorScale = d3.scaleSequential(d3.interpolateOranges) .domain([-1, counts.length + 3]) const xScale = d3.scaleBand() .padding(.15) .domain(counts.map(([k]) => k)) .range([margin.l + 20, cardW - margin.l - margin.r]) const yScale = d3.scaleLinear() .domain([0, largestAgeGroupValue]) .range([200, 10]) const card = d3.select(this) card.selectAll('.demographics-title').data([null]).join('h3') .attr('class', 'demographics-title only-first-card') .text('Population By Age') let svg = card.selectAll('svg.ages') .data([null]) svg = svg.enter() .append('svg') .attr('class', 'ages') .attr('width', cardW) .style('height', '350px') .style('display', 'block') .call(function(svg) { svg.append('g').attr('class', 'xaxis') .attr('transform', `translate(0, ${yScale.range()[0] + 1})`) .attr('opacity', .5) .call(axisBottom(xScale)) svg.append('g').attr('class', 'bars') svg.append('g').attr('class', 'yaxis') .attr('transform', `translate(${margin.l}, ${0})`) }) .merge(svg) const bar = svg.select('.bars').selectAll('rect') .data(counts) bar.enter() .append('rect') .attr('width', xScale.bandwidth()) .attr('x', ([k,v]) => xScale(k)) .attr('fill', (d, i) => colorScale(i)) .merge(bar) .transition() .attr('y', ([k,v]) => yScale(v)) .attr('height', ([k,v]) => yScale(0) - yScale(v)) svg.select('.yaxis') .call( d3.axisLeft(yScale) .tickSize(-cardW + margin.l + margin.r) .ticks(6) .tickPadding(0) .tickFormat(adjust ? d3.format('.0%') : d3.format('.0s')) ) .call(axis => { axis.select('.domain') .attr('display', 'none') axis.selectAll('line') .attr('stroke', '#000') .attr('opacity', .1) axis.selectAll('text') .attr('dy', '-.25em') .attr('text-anchor', 'start') .attr('fill', '#000') .attr('opacity', .35) .style('font-size', '1.3em') .style('font-family', 'Arial Narrow') .style('letter-spacing', '-.03em') }) }35:T99f,function renderStats(state) { const countsFmt = d3.format(',') const per1000Fmt = d3.format('.1') const card = d3.select(this) const stateTests = tests.filter(d => d.state == state) const datum = ( highlight.date && stateTests.find(d => d.date.valueOf() === highlight.date.valueOf()) ) || stateTests.sort((a,b) => d3.descending(a.date, b.date))[0] const demo = demographics.find(d => d.name === state) card.selectAll('table.stats') .data([null]) .join('table') .attr('class', 'stats') .selectAll('tr') .data([ { label: 'Population', value: countsFmt(demo.total) }, !showDeath ? null : { label: 'Deaths', key: 'death', value: countsFmt(datum.death) + ( adjust && datum.death ? ` (${per1000Fmt(adjustedNumTests(datum, 'death'))} in 1k)` : '' ) }, !showHosp ? null : { label: 'Hospitalizations', key: 'hospitalized', value: countsFmt(datum.hospitalized) + ( adjust && datum.hospitalized ? ` (${per1000Fmt(adjustedNumTests(datum, 'hospitalized'))} in 1k)` : '' ) }, { label: 'Positive', key: 'positive', value: countsFmt(datum.positive) + ( adjust && datum.positive ? ` (${per1000Fmt(adjustedNumTests(datum, 'positive'))} in 1k)` : '' ) }, !showTotal ? null : !datum.negative ? {label:' ', value:''} : { label: 'Negative', key: 'negative', value: datum.negative ? countsFmt(datum.negative) : '-', }, !showTotal ? null : !datum.pending ? {label:' ', value:''} : { label: 'Pending', key: 'pending', value: datum.pending ? countsFmt(datum.pending) : '-', }, !showTotal ? null : { label: 'Total Tests', key: 'total', value: countsFmt(datum.total) + ( adjust && datum.total ? ` (${per1000Fmt(adjustedNumTests(datum, 'total'))} in 1k)` : '' ) }, ].filter(d => !!d).sort((a,b) => d3.ascending(a.value === '', b.value === ''))) .join('tr') .style('color', d => d3.hsl(colorScale(d.key)).darker(2)) .html(({label, value, key}) => ` ${label} ${value} `) }36:T505,nameToCode = ({ 'Alabama': 'AL', 'Alaska': 'AK', 'American Samoa': 'AS', 'Arizona': 'AZ', 'Arkansas': 'AR', 'California': 'CA', 'Colorado': 'CO', 'Connecticut': 'CT', 'Delaware': 'DE', 'District of Columbia': 'DC', 'Federated States Of Micronesia': 'FM', 'Florida': 'FL', 'Georgia': 'GA', 'Guam': 'GU', 'Hawaii': 'HI', 'Idaho': 'ID', 'Illinois': 'IL', 'Indiana': 'IN', 'Iowa': 'IA', 'Kansas': 'KS', 'Kentucky': 'KY', 'Louisiana': 'LA', 'Maine': 'ME', 'Marshall Islands': 'MH', 'Maryland': 'MD', 'Massachusetts': 'MA', 'Michigan': 'MI', 'Minnesota': 'MN', 'Mississippi': 'MS', 'Missouri': 'MO', 'Montana': 'MT', 'Nebraska': 'NE', 'Nevada': 'NV', 'New Hampshire': 'NH', 'New Jersey': 'NJ', 'New Mexico': 'NM', 'New York': 'NY', 'North Carolina': 'NC', 'North Dakota': 'ND', 'Northern Mariana Islands': 'MP', 'Ohio': 'OH', 'Oklahoma': 'OK', 'Oregon': 'OR', 'Palau': 'PW', 'Pennsylvania': 'PA', 'Puerto Rico': 'PR', 'Rhode Island': 'RI', 'South Carolina': 'SC', 'South Dakota': 'SD', 'Tennessee': 'TN', 'Texas': 'TX', 'Utah': 'UT', 'Vermont': 'VT', 'Virgin Islands': 'VI', 'Virginia': 'VA', 'Washington': 'WA', 'West Virginia': 'WV', 'Wisconsin': 'WI', 'Wyoming': 'WY' })37:T505,codeToName = ({ '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' })38:[{"id":"81d7bd5e9551f005d7a4764e2dcb46c44f04b5918551ce19dba191a8799b498beddb5ef2da994047586fc7231749e8911c825b1967f22814a57bee58c590c86e","href":"https://static.observableusercontent.com/files/81d7bd5e9551f005d7a4764e2dcb46c44f04b5918551ce19dba191a8799b498beddb5ef2da994047586fc7231749e8911c825b1967f22814a57bee58c590c86e","name":"us-population-state-age.csv","type":"text/csv","lastModified":1584130326976.839,"size":3516},{"id":"ab4cc55661816426c3cfe6a7d91f883a17436968c227c93688c388ba748b4b58c4b0a42c927b0a6492d081476a16b535a39fe18985b361625c9f4063e9fb70f6","href":"https://static.observableusercontent.com/files/ab4cc55661816426c3cfe6a7d91f883a17436968c227c93688c388ba748b4b58c4b0a42c927b0a6492d081476a16b535a39fe18985b361625c9f4063e9fb70f6","name":"daily.csv","type":"text/csv","lastModified":1674422901103.582,"size":5677002}] 2e:{"id":"93d7deb500b5cc5d","slug":"covid-19-numbers-by-state-side-by-side","title":"COVID-19 Numbers by State, Side by Side","thumbnail":"72e556e706b64af63a5f312be2811071d6e16b43b64e53c69ffdf9308a329504","access_level":"public","create_time":"$D2020-03-12T00:42:33.245Z","update_time":"$D2023-01-23T14:02:45.371Z","view_time":null,"first_public_time":"$D2020-03-17T17:31:47.579Z","has_unpublished_edits":null,"fork":false,"stars":21,"starred":false,"owner":{"type":"team","id":"39266e42aee80d30","login":"meetamit","name":"Amit Sch","avatar_url":"https://avatars-next.observableusercontent.com/9670de3870bda4c2dfd4121b77200f8c0756c9f5bdebbf1a9e80887ba5c5c5a4","tier":"starter_2024"},"version":1558,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dfa15ada0d605a00","login":"meetamit","name":"Amit Sch","avatar_url":"https://avatars-next.observableusercontent.com/9670de3870bda4c2dfd4121b77200f8c0756c9f5bdebbf1a9e80887ba5c5c5a4","tier":null}],"members":[{"type":"individual","id":"dfa15ada0d605a00","login":"meetamit","name":"Amit Sch","avatar_url":"https://avatars-next.observableusercontent.com/9670de3870bda4c2dfd4121b77200f8c0756c9f5bdebbf1a9e80887ba5c5c5a4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":16,"collection":{"id":"e7cc41ec60819d92","slug":"coronavirus","title":"Coronavirus","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"titling":"auto","title":"COVID-19 Numbers by State, Side by Side","cells":[{"id":0,"value":"md`# COVID-19 Numbers by State, Side by Side\n\n*This notebook is from back in the early days of covid, when daily data was just starting to be available. The source dataset stopped getting updated in March 2021, and rather than downloading it from the source, it is now a file attachment to this notebook*\n\nCombines coronavirus testing data with state demgraphics to enable side-by-side comparison among states. Use the map to select which states to compare. Checkboxes let you adjust to population size, hide certain quantities, and more. Data source: [covidtracking.com](http://covidtracking.com/). \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":905,"value":"control = html`

${viewof chartOptions}

${mapSelector}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":929,"value":"md`### Sources\n- Testing per state: [Coronavirus numbers by state](https://docs.google.com/spreadsheets/u/1/d/18oVRrHj3c183mHmq3m89_163yuYltLNlOmPerQ18E8w/htmlview?sle=true#) (see also: [twitter](https://twitter.com/COVID19Tracking)).\n- Demographic data: [American Community Survey](https://www.census.gov/data/developers/data-sets.html)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"viewof chartOptions = d3.select(\n checkbox({\n title: 'Chart Options',\n options: [\n { value: 'log', label: 'Log Scale - TRY ME!' },\n { value: 'showPosit', label: 'Show positive tests (a.k.a confirmed cases)'},\n { value: 'showDeath', label: 'Show deaths'},\n // { value: 'showTotal', label: 'Show total tests (incl. negative & pending)'},\n { value: 'showHosp', label: 'Show hospitalizations*'},\n { value: 'adjust', label: 'Adjust to population size (per 1000 people)' },\n // { value: 'ratio', label: 'Ratio of positives to total tests*' },\n { value: 'fit', label: 'Scale each state independently' },\n { value: 'delta', label: '24-hour change*' },\n ],\n value: ['showPosit', 'showDeath'],\n description: '* noisy data, not always available / reliable'\n })\n).call(sel => {\n sel.selectAll('label').style('display', 'block')\n}).node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1260,"value":"mutable highlight = ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1271,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1014,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"mutable selectedStates = []//topStates// || (this && this.value) || topStates || ['NY', 'CA']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"cardW = 605 && 315 || 200 && 160","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"colorScale = d3.scaleOrdinal()\n .domain(['total', 'death', 'positive', 'pending', 'negative', 'hospitalized'])\n .range(['#eee', '#f55', '#fdb', '#dde', '#bfb', '#5ff'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"absoluteNumTests = (d, prop) => {\n if (typeof prop === 'string') { return d[prop] }\n return showTotal ? d.total \n : showPosit ? d.positive \n : showHosp ? (d.hospitalized || 0) + (showDeath ? d.death || 0 : 0)\n : showDeath ? d.death \n : d.total\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"adjustedNumTests = adjust\n ? (d, prop) => absoluteNumTests(d, prop) * 1e3 / (\n statesDemographics[d.state] && statesDemographics[d.state].total\n )\n : absoluteNumTests","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"relevantNumTests = ratio\n ? (d, prop) => absoluteNumTests(d, 'total')\n ? absoluteNumTests(d, prop) / absoluteNumTests(d, 'total')\n : null\n : adjustedNumTests\n\n// relevantNumTests = per1000 && !ratio\n// ? (d, prop) => adjustedNumTest(d, prop) * 1e3 / statesTotalPopulation[d.state] \n// : adjustedNumTest","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":954,"value":"showDeath = chartOptions.includes('showDeath')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":961,"value":"showTotal = chartOptions.includes('showTotal')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"showPosit = chartOptions.includes('showPosit') || chartOptions.includes('showTotal')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1379,"value":"showHosp = chartOptions.includes('showHosp')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"adjust = chartOptions.includes('adjust')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"ratio = chartOptions.includes('ratio')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"syncScale = !chartOptions.includes('fit')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"logScale = !ratio && chartOptions.includes('log')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1450,"value":"delta = chartOptions.includes('delta') && !ratio","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1050,"value":"margin = ({ l: 5, r: 9 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1071,"value":"function axisBottom(scale) {\n const axis = d3.axisBottom(scale).tickSize(4)\n return function(sel) {\n sel.call(axis)\n sel.selectAll('text')\n .attr('text-anchor', 'start')\n .attr('transform', 'translate(3 0) rotate(45)')\n .style('font-family', 'Arial Narrow')\n .style('letter-spacing', '-.03em')\n sel.select('.domain').remove()\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"topStates = {\n if (mutable selectedStates.length) return\n mutable selectedStates = d3.nest()\n .key(d => d.state)\n .sortValues((a,b) => d3.descending(a.date, b.date))\n .rollup(values => values[0]['positive'])\n .entries(tests)\n .sort((a,b) => d3.descending(a.value, b.value))\n .slice(0,4)\n .map(d => d.key)\n return mutable selectedStates\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"statesDemographics = demographics.reduce(function (o, d) {\n o[d.name] = d\n return o\n}, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1142,"value":"largestAgeGroupValue = d3.max(selectedStates, state => {\n const demo = statesDemographics[state]\n if (!demo) { return }\n return d3.max(\n Object.entries(demo)\n .filter(([k,v]) => typeof v === 'number' && k !== 'total')\n .map(([k,v]) => v/(adjust ? demo.total : 1))\n )\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"demographics = d3.csvParse(await FileAttachment(\"us-population-state-age.csv\").text(), (d, i, columns) => (d3.autoType(d), d.total = d3.sum(columns, c => d[c]), d)).sort((a, b) => b.total - a.total)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"tests = {\n const data = await d3.csvParse(await FileAttachment(\"daily.csv\").text(), d => Object.assign(d3.autoType(d), { date: parseDate(d.date) }))\n const deltas = d3.nest()\n .key(d => d.state)\n .sortValues((a,b) => d3.ascending(a.date, b.date))\n .rollup(\n values => d3.pairs(values)\n .map(\n ([d1, d2]) => Object.entries(d2)\n .map(([k2, v2]) => {\n let v = Math.max(0, d2[k2] - (d1[k2] || 0))\n return [\n k2, k2 !== 'fips' && typeof v2 === 'number' ? isNaN(v) ? null : v : v2\n ] \n })\n .reduce((o, [k,v]) => {\n o[k] = v\n return o\n }, {})\n )\n )\n .entries(data)\n .flatMap(d => d.value)\n // const deltasSam = \n return delta ? deltas : data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1495,"value":"tests.filter(t=>t.state==='NY').map(t => t.hospitalized).slice(-12).join(', ')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"testsAtDate = d3.nest()\n .key(d => d.state)\n .rollup(values => values.sort((a, b) => d3.descending(a.date, b.date))[0])\n .entries(tests)\n .map(d => d.value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"testsAtDateByState = new Map(testsAtDate.map(d => [d.state, d]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"vegalite = require('@observablehq/vega-lite')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"parseDate = d3.timeParse('%Y%m%d')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"// DEPR: sheetUrl = 'https://api.covidtracking.com/v1/states/daily.csv'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"usa = (await fetch(\"https://cdn.jsdelivr.net/npm/us-atlas@^2.1/us/states-10m.json\")).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"states = topojson.feature(usa, usa.objects.states)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"import { legend as colorLegend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"import { radio, checkbox } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1"}} 2f:"$2e:body"