2b:null 2c:["$","title",null,{"children":"COVID-19 Numbers by State, Side by Side | Amit Sch | Observable"}] 31: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 }32: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 }33: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)) }34: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) } }35: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') }) }36: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} `) }37: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' })38: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' })39:[{"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}] 2f:{"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","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,"subscribed":null,"forks":16,"collection":{"id":"e7cc41ec60819d92","slug":"coronavirus","title":"Coronavirus","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"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"},{"id":905,"value":"control = html`

${viewof chartOptions}

${mapSelector}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":203,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":121,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":1260,"value":"mutable highlight = ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":715,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1271,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1014,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":702,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":828,"value":"mutable selectedStates = []//topStates// || (this && this.value) || topStates || ['NY', 'CA']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":720,"value":"cardW = 605 && 315 || 200 && 160","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"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"},{"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"},{"id":954,"value":"showDeath = chartOptions.includes('showDeath')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":961,"value":"showTotal = chartOptions.includes('showTotal')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":962,"value":"showPosit = chartOptions.includes('showPosit') || chartOptions.includes('showTotal')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1379,"value":"showHosp = chartOptions.includes('showHosp')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":734,"value":"adjust = chartOptions.includes('adjust')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":736,"value":"ratio = chartOptions.includes('ratio')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":754,"value":"syncScale = !chartOptions.includes('fit')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":730,"value":"logScale = !ratio && chartOptions.includes('log')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1450,"value":"delta = chartOptions.includes('delta') && !ratio","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1050,"value":"margin = ({ l: 5, r: 9 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":794,"value":"testsAtDateByState = new Map(testsAtDate.map(d => [d.state, d]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"vegalite = require('@observablehq/vega-lite')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"parseDate = d3.timeParse('%Y%m%d')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"// DEPR: sheetUrl = 'https://api.covidtracking.com/v1/states/daily.csv'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":117,"value":"states = topojson.feature(usa, usa.objects.states)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":141,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":144,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":119,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":819,"value":"import { legend as colorLegend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"import { radio, checkbox } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 30:"$2f:body"