2d:null 2e:["$","title",null,{"children":"COVID-19 in the USA | Cody Rushing | Observable"}] 33:Tee6,map = { const svg = d3.create('svg') .attr('viewBox', [0, 0, 975, 610]) // .style('font', '12px sans-serif'); const graph = svg.node(); graph.params = { perCapita: false }; const path = d3.geoPath(); const color = d3.scaleSequential([0, 5000], d3.interpolateBlues); const dom = {}; graph.dom = dom; dom.title = svg.append('g') .attr('class', 'legend') .attr('transform', 'translate(450, 10)') .append('text') .attr('dy', '1em') .attr('text-anchor', 'middle') .style('font-weight', 'bold') .style('font-size', '24px'); dom.legendGroup = svg.append('g') .attr('class', 'legend') .attr('transform', 'translate(610,20)'); dom.statePaths = svg.append('g') .selectAll('path') .data(topojson.feature(us, us.objects.states).features) .join('path') .attr('d', path) .attr('stroke', '#999') .style('cursor', 'pointer') .call( state => state.append('title').text(d => d.properties.name) ) .datum(d => { const state = allStates.find(s => s.name.toLowerCase() === d.properties.name.toLowerCase()); return { state, data: statesHistoricalData.filter(d => d.state === state.abbreviation) }; }); dom.statePaths .on('mouseenter touchstart', function(d){ graph.highlightedState = d.state; highlightState({...d, el: this, graph}); }) .on('mouseleave touchend', function(d){ graph.highlightedState = null; dom.tooltip.style('visibility', 'hidden'); }); dom.tooltip = svg.append('g') .attr('class', 'tooltip') .style('pointer-events', 'none') .style('font', '12px sans-serif'); graph.updateMetric = function({metric, usePerCapita, useRollingAverage}){ graph.metric = metric; graph.valueLabel = usePerCapita ? '(per 100K population)' : ''; graph.accessor = function({d, state}){ if(!d){ return 0; } return getAccessor(metric, {usePerCapita, useRollingAverage, state})(d); }; graph.colorScale = d3.scaleSequential( d3.extent( statesHistoricalData.map( d => { const state = allStates.find(s => s.abbreviation === d.state); if(!state){ // TODO, this means that we have data that we don't have a states profile for (eg. territories) // add data for territories and use a different projection that includes all of the territories return 0; } return graph.accessor({ d, state }); } ) ), metric.colorInterpolator ); dom.legendGroup.selectAll('svg') .remove() .data([metric]) .join( enter => enter.append( () => legend({ color: graph.colorScale, title: `${metric.label} ${graph.valueLabel}`, width: 260 }) ) ); graph.update(); } graph.updateSelectedDate = function(selectedDate){ graph.selectedDate = selectedDate; dom.title.text(formatDate(selectedDate)); graph.update(); } graph.update = function(){ const { selectedDate, colorScale, accessor } = graph; if(!accessor || !selectedDate){ return; } dom.statePaths .datum( d => { d.currentData = d.data.find( ({date}) => date.getTime() === selectedDate.getTime() ); return d; } ) .attr('fill', ({state, currentData}) => colorScale(accessor({d: currentData, state}))) .each( function(d){ if(graph.highlightedState === d.state){ highlightState({...d, el: this, graph}); } } ) } // graph.updateMetric({metric: METRICS[0]}); return graph; }34:T4b9,{ const container = d3.create('div') .attr('class', 'state-buttons'); container .append('div') .style('display', 'flex') .style('flex-wrap', 'wrap') .selectAll('button') .data(allStates) .join( enter => enter.append('button') .attr('title', d => d.name) .text(d => d.abbreviation) .style('width', '2rem') .style('height', '2rem') .style('display', 'block') .style('margin', '5px') .style('border-radius', '50%') .style('border', '1px solid #ccc') .style('cursor', 'pointer') .style('background', '#eee') .style('opacity', 0.5) .on( 'click', function(){ const state = d3.select(this).datum(); mutable comparisonStates = !comparisonStates.find(s => s === state) ? comparisonStates.concat([state]) : comparisonStates.filter(s => s !== state); } ) ) .filter(d => comparisonStates.find(s => s === d)) .attr('disabled', null) .style('opacity', 1) .style('background', '#666') .style('color', '#fff') .style('border-color', '#fff') return container.node(); }35:T82b,velocityGraph = { const topLevelMetrics = METRICS.filter(m => !m.parent); const lineGraphCount = topLevelMetrics.length * (comparisonStates.length + 1); const height = lineGraphWrapperHeight * lineGraphCount + margin.top + margin.bottom; // init DOM const svg = d3.create('svg') .attr('width', width) .attr('height', height) .style('overflow', 'visible'); const graph = svg.node(); graph.dom = {}; const group = graph.dom.group = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const xAxis = graph.dom.xAxis = graph.dom.group.append('g') .attr('class', 'axis x'); // update global x scale x .domain(d3.extent( nationalHistoricalData.map( d => d.date ) )) .range([0, graphWidth]); // update x axis xAxis .attr('transform', `translate(0,${height - margin.bottom - margin.top - graphMargin.bottom - graphMargin.top})`) .call(d3.axisBottom(x).tickSizeOuter(0)); const lineGroups = group .selectAll('g.line-group') .data( // create an object for each metric for the entire USA and for each comparison state topLevelMetrics .map( metric => { const USName = 'United States'; return [{ data: nationalHistoricalData, metric, state: { name: USName, abbreviation: 'USA', population: populationData.find(d => d.name === USName).population } }] .concat( comparisonStates.map(state => { return { data: getDataForState(statesHistoricalData, state), metric, state } }) ); } ) .reduce( (acc, v) => { acc = acc.concat(v); return acc; }, [] ) ) .join('g') .attr('class', 'line-group'); lineGroups.each(drawLineGraph({ lineGroups })) return graph; }36:T49a,function highlightState({state, el, currentData, graph}){ const stateBBox = el.getBBox(); const rect = graph.dom.tooltip .selectAll('rect') .data([null]) .join('rect') .attr('fill', 'white') .attr('fill-opacity', 0.9) .attr('stroke', '#ccc'); const text = graph.dom.tooltip .selectAll('text') .data([null]) .join('text') .call( text => text.selectAll('tspan') .data([ state.name, `${graph.metric.label}:`, `${formatValue(graph.accessor({ d: currentData, state }))} ${graph.valueLabel}` ]) .join('tspan') .text(d => d) .attr('x', 0) .attr('y', (_,i) => `${i * 1.1}em`) .attr('font-weight', (_,i) => i ? null : 'bold') ); const { x, y, width: w, height: h } = text.node().getBBox(); rect .attr('x', -5) .attr('y', -15) .attr('rx', 2) .attr('width', w + 10) .attr('height', h + 10); const left = stateBBox.x + stateBBox.width/2 - w/2; const top = stateBBox.y + stateBBox.height/2; graph.dom.tooltip .attr('transform', `translate(${left},${top})`) .style('visibility', 'visible'); }37:Tf5b,function buildLineGraphDOM({group, metric, state, y, extraY}){ const dom = {}; const isUSA = state.abbreviation === 'USA'; const lineStrokeWidth = 2; dom.xAxis = group.selectAll('g.axis.y') .data([null]) .join('group') .attr('class', 'axis y'); dom.yAxis = group.selectAll('g.axis.y') .data([null]) .join('g') .attr('class', 'axis y') .call( d3.axisLeft(y) .tickSize(-graphWidth) .ticks(3) ) .call( // remove y axis domain line g => { g.select('.domain').remove(); g.selectAll('.tick line').attr('stroke', '#eee') } ); dom.title = group.selectAll('text.title') .data([null]) .join('text') .attr('class', 'title') .attr('x', 3) // .attr('dy', '-1em') .attr('text-anchor', 'start') .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .attr('font-color', '#333') .attr('font-size', isUSA ? 18 : 12) .text( isUSA ? `${metric.label} (USA)` : `(${state.name})` ); dom.legend = group.selectAll('g.legend') .data([null]) .join('g') .attr('class', 'legend') .attr('transform', `translate(${graphWidth-20}, -10)`) const renderLineLegend = ({ color, label }) => { dom.legend.append('rect') .attr('width', 20) .attr('height', lineStrokeWidth) .attr('dx', 5) .attr('fill', color); dom.legend.append('text') .attr('dy', '0.5em') .attr('dx', -5) .attr('text-anchor', 'end') .style('font', '10px sans-serif') .style('font-weight', 'normal') .attr('fill', 'currentColor') .text(label); } if(metric.percentLine){ let m = metric.percentLine; dom.extraYAxis = group.selectAll('g.axis.y.extra') .data([null]) .join('g') .attr('class', 'axis y extra') .call( d3.axisRight(extraY) .tickSize(graphWidth) .ticks(2) .tickFormat(d3.format('.0%')) ) .call( // remove y axis domain line g => { g.select('.domain').remove(); g.selectAll('.tick line').remove(); } ); renderLineLegend(m); dom.extraLinePath = group.selectAll('path.line-extra') .data([null]) .join('path') .attr('class', 'line-extra') .attr('fill', 'none') .attr('stroke-width', lineStrokeWidth); } dom.linePath = group.selectAll('path.line') .data([null]) .join('path') .attr('class', 'line') .attr('fill', 'none'); if(metric.average){ dom.avgLinePath = group.selectAll('path.line-avg') .data([null]) .join('path') .attr('class', 'line-avg') .attr('fill', 'none') .attr('stroke-width', lineStrokeWidth); renderLineLegend({ color: metric.average, label: `(7-day avg)` }); // render simple legend } dom.areaPath = group.selectAll('path.area') .data([null]) .join('path') .attr('class', 'area'); dom.dateLine = group.selectAll('line.date-line') .data([null]) .join('line') .attr('class', 'date-line') .attr('stroke', '#eee') .style("pointer-events", "none") .style('visibility', 'hidden'); if(metric.cumulative){ dom.totalLabel = group.selectAll('g.total-label') .data([null]) .join('g') .attr('class', 'total-label') .attr('font-size', 10) .style('visibility', 'hidden') .call( selection => selection .append('text') .attr('class', 'value') .attr('font-weight', 'bold') .attr('x', 3) ) .call( selection => selection .append('text') .attr('class', 'label') .attr('x', 3) ); } dom.infoGroup = group.selectAll('g.info') .data([null]) .join('g') .attr('class', 'info') .style('pointer-events', 'none') .style('font', '10px sans-serif') .style('visibility', 'hidden'); return dom; }38:T1021,function drawLineGraph({ lineGroups }){ return function _drawLineGraph({ data, state, metric }, i){ const group = d3.select(this); group .attr('transform', `translate(0, ${lineGraphWrapperHeight * i})`); const accessor = getAccessor(metric, { state }); const y = d3.scaleLinear() .domain([0, d3.max( data.map(accessor))]) .range([lineGraphHeight, 0]); const extraY = metric.percentLine ? d3.scaleLinear() .domain([0, d3.max( data.map(getAccessor(metric.percentLine)))]) .range([lineGraphHeight, 0]) : null; const dom = buildLineGraphDOM({metric, y, state, group, extraY}); this._data = { ...({}, this._data), dom, y }; const line = d3.line() .x(d => x(d.date)) .y(d => y(accessor(d))) const area = d3.area() .x(d => x(d.date)) .y0(lineGraphHeight) .y1(d => y(accessor(d))); if(metric.curve){ line.curve(d3[metric.curve]); area.curve(d3[metric.curve]); } dom.linePath .attr('d', line(data)) .attr('stroke-width', 1) .attr('stroke', metric.color) .attr('pointer-events', 'all'); dom.areaPath .attr('d', area(data)) .attr('fill-opacity', 0.6) .attr('fill', metric.color); if(metric.average){ let avgAccessor = getAccessor(metric, { useRollingAverage: true, state }); let avgLine = d3.line() .x(d => x(d.date)) .y(d => y(avgAccessor(d))); dom.avgLinePath .attr('d', avgLine(data)) .attr('stroke', metric.average); } // draw extra line if(dom.extraLinePath){ let m = metric.percentLine; let extraAccessor = getAccessor(m); let extraLine = d3.line() .x(d => x(d.date)) .y(d => extraY(extraAccessor(d))); if(m.curve){ extraLine.curve(d3[m.curve]) } dom.extraLinePath .attr('d', extraLine(data)) .attr('stroke', m.color) // .style("stroke-dasharray", ("4, 1")) ; } if(metric.cumulative){ let d = data[data.length-1]; let value = getAccessor(metric.cumulative)(d); dom.totalLabel = group.select('.total-label') .attr('transform', `translate(${graphWidth + 5}, ${y(accessor(d))})`) .style('visibility', 'visible'); dom.totalLabel.select('.value') .text(d3.format('.3s')(value)) .style('font', '10px sans-serif') .style('font-weight', 'bold'); dom.totalLabel.select('.label') .style('font', '10px sans-serif') .text('(total)') .attr('dy', '1.1em'); if(metric.percentLine){ dom.totalLabel .attr('transform', `translate(${graphWidth - 35}, ${lineGraphHeight - 3})`) dom.totalLabel.select('.label') .attr('dy', null) .attr('dx', 3) .attr('text-anchor', 'start'); dom.totalLabel.select('.value') .attr('text-anchor', 'end') } } group.selectAll('.event-capture') .data([metric]) .join( enter => { enter.append('rect') .attr('class', 'event-capture') .attr('pointer-events', 'all') .attr('fill', 'none') .attr('width', graphWidth) .attr('height', lineGraphHeight + graphMargin.bottom) .attr('y', -graphMargin.top) .on('mousemove touchmove', function(){ const { date } = bisect(d3.mouse(this)[0], data); lineGroups.dispatch('highlightDate', { detail: date }); }) .on('mouseleave touchend', function(){ lineGroups.dispatch('hideDateLine'); }) ; } ); group .on('highlightDate', function(){ highlightDate.call(this, {y, accessor}); }) .on('hideDateLine', () => { dom.dateLine.style('visibility', 'hidden'); dom.infoGroup.style('visibility', 'hidden'); }); } }39:T8b5,function highlightDate({y, accessor}){ const date = d3.event.detail; const { metric, state, data } = d3.select(this).datum(); const d = data.find(_d => _d.date.getTime() === date.getTime()); const xPos = x(date); const { dom } = this._data; const { dateLine, infoGroup } = this._data.dom; dateLine .attr('x1', xPos) .attr('x2', xPos) .attr('y1', 0) .attr('y2', lineGraphHeight) .style('visibility', 'visible'); let tooltipData = [ `${formatDate(d.date)} (${state.abbreviation})`, `${formatInteger(accessor(d))} ${metric.label}` // `${formatValue(getAccessor(metric, { state, usePerCapita: true })(d))} per 100k pop` ]; if(metric.average){ let avgAccessor = getAccessor(metric, { useRollingAverage: true, state }); tooltipData.push( `${formatInteger(avgAccessor(d))} (7 day avg)` ); } if(metric.percentLine){ let accessor = getAccessor(metric.percentLine); tooltipData.push( `${d3.format('.2%')(accessor(d))} (${metric.percentLine.label})` ); } if(metric.cumulative){ tooltipData.push(`${formatInteger(getAccessor(metric.cumulative)(d))} ${metric.cumulative.label}`) } const path = infoGroup.selectAll('path') .data([null]) .join('path') .attr('fill', 'white') .attr('fill-opacity', 0.9) .attr('stroke', '#ccc'); const text = infoGroup.selectAll('text') .data([null]) .join('text') .call( text => text.selectAll('tspan') .data(tooltipData) .join('tspan') .text(d => d) .attr('x', 0) .attr('y', (_,i) => `${i * 1.1}em`) .attr('font-weight', (_,i) => i ? null : 'bold') ) const { y: _y, width: w, height: h } = text.node().getBBox(); const tooltipPadding = 8; text .attr('transform', `translate(${-w / 2},${-h-tooltipPadding*1.2})`); path.attr('d', ` M ${-w / 2 - tooltipPadding} -${h + tooltipPadding*3} h ${w + tooltipPadding*2} v ${h + tooltipPadding*2} h ${-w/2} l ${-tooltipPadding} ${tooltipPadding} l ${-tooltipPadding} ${-tooltipPadding} h ${-w/2} v ${-h - tooltipPadding*2} z`); infoGroup .attr('transform', `translate(${xPos},${y(accessor(d))})`) .style('visibility', 'visible'); }3a:T831,METRICS = { return [ { key: 'positiveIncrease', id: 'cases', label: 'Daily new cases', modifier: v => Math.abs(v), color: d3.schemeBlues[3][2], average: d3.schemeBlues[6][5], colorInterpolator: d3.interpolateBlues, cumulative: { id: 'casesCumulative', key: 'positive', label: 'Total cases' } }, { key: 'totalTestResultsIncrease', id: 'tests', label: 'Daily tests', modifier: v => Math.abs(v), color: d3.schemeGreens[5][2], // average: d3.schemeGreens[7][6], colorInterpolator: d3.interpolateGreens, // curve: 'curveStepAfter', percentLine: { label: '% positive', curve: 'curveBasis', // color: d3.schemeBlues[3][2], color: d3.schemeSpectral[10][7], accessor: ({positiveIncrease, totalTestResultsIncrease}) => { if(!totalTestResultsIncrease || !positiveIncrease || totalTestResultsIncrease < 1000){ return 0; } return Math.min(positiveIncrease / totalTestResultsIncrease, 1); } }, cumulative: { id: 'testsCumulative', key: 'totalTestResults', label: 'Total tests' } }, { key: 'deathIncrease', id: 'deaths', label: 'Daily deaths', modifier: v => Math.abs(v), color: d3.schemeReds[3][2], average: d3.schemeReds[5][4], colorInterpolator: d3.interpolateReds, cumulative: { id: 'deathsCumulative', key: 'death', label: 'Total deaths' } }, { key: 'hospitalizedCurrently', id: 'hospitalizations', label: 'Current hospitalizations', modifier: v => Math.abs(v), color: d3.schemeOranges[4][2], colorInterpolator: d3.interpolateOranges } ] .reduce( (acc, v) => { acc.push(v); if(v.cumulative){ acc.push({ ...v, ...v.cumulative, isCumulative: true, parent: v.id }); } return acc; }, [] ); }3b:[] 31:{"id":"22ba961d15935fc3","slug":"covid-19-in-the-usa","title":"COVID-19 in the USA","thumbnail":"45895ad3086333276b2261f4f9af0c6e94d8d9bd74a8566f27647542f49324f8","access_level":"public","create_time":"$D2020-04-07T02:36:30.507Z","update_time":"$D2023-08-11T16:18:24.876Z","view_time":null,"first_public_time":"$D2020-08-10T02:12:12.762Z","fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"da453ccea7f021b9","login":"codyrushing","name":"Cody Rushing","avatar_url":"https://avatars-next.observableusercontent.com/a91368ea312a72f98af3029732b0f7fc67b47b763116f25a9a9c046245cc0857","tier":"starter_2024"},"version":2050,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"514f3026c16db8ac","login":"codyrushing","name":"Cody Rushing","avatar_url":"https://avatars-next.observableusercontent.com/a91368ea312a72f98af3029732b0f7fc67b47b763116f25a9a9c046245cc0857","tier":null}],"members":[{"type":"individual","id":"514f3026c16db8ac","login":"codyrushing","name":"Cody Rushing","avatar_url":"https://avatars-next.observableusercontent.com/a91368ea312a72f98af3029732b0f7fc67b47b763116f25a9a9c046245cc0857","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":{"id":"e7cc41ec60819d92","slug":"coronavirus","title":"Coronavirus","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"COVID-19 in the USA","cells":[{"id":0,"value":"md`# COVID-19 in the USA`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1104,"value":"viewof mapParams = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1682,"value":"viewof selectedDate = {\n const timestamps = new Set(statesHistoricalData.map(d => d.date.getTime()));\n // although there is earlier data, start at Mar 1 2020\n const startDate = new Date(2020, 2);\n return Scrubber(\n new Array(...timestamps).filter((d, i, arr) => i % 3 === 0 || i === arr.length-1).sort().map(d => new Date(d))\n .filter(d => d >= startDate), \n {\n autoplay: true,\n loop: false,\n delay: 100,\n format: formatDate\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1084,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1326,"value":"html`\n

\n\n${\n selectedMetric && selectedMetric.isCumulative \n ? ``\n : ''\n}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1629,"value":"md`\n## Compare states\nToggle states below to compare historical data against other states and the nation\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1576,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2019,"value":"md`\nThe idea behind this data-viz project was to easily compare historical data for multiple COVID-19 metrics across different states. The goals were to be able to easily compare the shapes of the different state curves, and to examine per-capita data for each state. I was unable to find a single visualization that combined both of these features into a single dashboard, so I decided to make this.\n\nThe data is sourced from [The COVID Tracking Project](https://covidtracking.com/data/api) and should be updated daily. Population data is based on 2016 numbers from the [US Census Bureau (via data.world)](https://data.world/uscensusbureau/annual-estimates-of-the-resident-population).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"md`#### Map helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1205,"value":"selectedMetric = {\n const { metricId, usePerCapita, useRollingAverage } = mapParams;\n let metric = METRICS.find(m => m.id === metricId);\n map.updateMetric({metric, usePerCapita, useRollingAverage}); \n return metric;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1703,"value":"selectedDateWatcher = {\n map.updateSelectedDate(selectedDate);\n return selectedDate;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1186,"value":"function getDataForState(allData, { abbreviation }){\n if(abbreviation){\n return allData.filter(d => d.state === abbreviation);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1461,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1969,"value":"md`#### Graph helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":966,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"margin = ({top: 20, right: 40, bottom: 10, left: 50})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"x = d3.scaleTime().nice();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"graphMargin = ({top: 20, bottom: 20});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"graphWidth = width - margin.left - margin.right;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"lineGraphWrapperHeight = 120","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"lineGraphHeight = lineGraphWrapperHeight - graphMargin.top - graphMargin.bottom;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"bisect = {\n const _bisect = d3.bisector(d => d.date).left;\n return (eventX, data) => {\n const date = x.invert(eventX);\n const index = _bisect(data, date);\n const b = data[index - 1];\n const a = data[index];\n return a && (date - b.date > a.date - date) ? a : b;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1975,"value":"md`#### Lib and utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1570,"value":"mutable comparisonStates = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1442,"value":"VELOCITY_METRICS = METRICS.filter(m => !m.parent)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1382,"value":"function getAccessor(m, {cumulative, useRollingAverage, usePerCapita, state={}}={}){\n let { key, modifier, accessor } = m;\n \n if(typeof accessor === 'function'){\n return accessor;\n }\n \n // if no modifier specified, use an identity function\n if(typeof modifier !== 'function'){\n modifier = v => v;\n }\n \n const modifyValue = function(v){\n v = modifier(v);\n if(usePerCapita && state.population){\n v /= state.population / 100000;\n }\n return v;\n }\n return d => modifyValue(d[\n useRollingAverage && d.hasOwnProperty(`${key}_7da`)\n ? `${key}_7da`\n : key\n ]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"formatDate = d3.timeFormat('%a %b %e %Y')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":901,"value":"formatInteger = function(n, template='.3s'){\n if(!n){\n return 0;\n }\n n = Math.round(n);\n return n < 100\n ? n\n : d3.format(template)(n);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1501,"value":"function formatValue(v){\n if(v === 0){\n return 0;\n }\n if(v < .001){\n return d3.format('.6f')(v); \n }\n if(Math.abs(v) < 1){\n return d3.format('.3f')(v);\n }\n return d3.format('.3s')(v);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":957,"value":"md`#### Source data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1033,"value":"allStates = {\n const states = await require('https://bundle.run/states-us@1.0.0');\n return states.default.map(\n s => {\n const { population } = populationData.find(({ name }) => name.toLowerCase() === s.name.toLowerCase()) || {};\n if(population){\n s.population = population;\n }\n return s;\n }\n )\n .filter(s => s.population);\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"statesHistoricalData = {\n // const response = await fetch('https://query.data.world/s/ltqscx7evetvgw63b4zsix66uygg7q');\n const response = await fetch('https://api.covidtracking.com/v1/states/daily.csv');\n const responseText = await response.text();\n const data = d3.csvParse(responseText, function(d){\n // parse date\n d.date = new Date(\n parseInt(d.date.substring(0, 4), 10),\n parseInt(d.date.substring(4, 6), 10) - 1,\n parseInt(d.date.substring(6, 8), 10)\n );\n // try to parse all values as ints\n Object.keys(d).forEach(function(k){\n if(d[k] === ''){\n d[k] = 0;\n return;\n }\n let v = parseInt(d[k], 10);\n \n if(!isNaN(v)){\n d[k] = v; \n }\n });\n return d;\n })\n return normalizeHistoricalData(data);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"nationalHistoricalData = {\n // const response = await fetch('https://query.data.world/s/n5oeofa23nxmvk5agejyaj5ejgq3kf');\n const response = await fetch('https://api.covidtracking.com/v1/us/daily.csv');\n const responseText = await response.text();\n\n const data = d3.csvParse(responseText, function(d){ \n // parse date\n d.date = new Date(\n parseInt(d.date.substring(0, 4), 10),\n parseInt(d.date.substring(4, 6), 10) - 1,\n parseInt(d.date.substring(6, 8), 10)\n );\n // try to parse all values as ints\n Object.keys(d).forEach(function(k){\n if(d[k] === ''){\n d[k] = 0;\n return;\n }\n let v = parseInt(d[k], 10);\n \n if(!isNaN(v)){\n d[k] = v; \n }\n });\n return d;\n });\n return normalizeHistoricalData(data);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":961,"value":"populationData = {\n const response = await fetch('https://query.data.world/s/2e3utukjvdhk7grb22qbshqenkyaef');\n const responseText = await response.text();\n return d3.csvParse(responseText, function(d){ \n return {\n name: d['Geographic Area'],\n population: parseInt(d[2016].replace(/,/ig, ''), 10)\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1293,"value":"function normalizeHistoricalData(data){\n data\n // sort by date\n .sort((a, b) => a.date - b.date)\n // sort by state\n .sort((a, b) => {\n if(a.state === b.state){\n return 0;\n }\n return a.state < b.state ? -1 : 1;\n });\n \n const velocityKeys = VELOCITY_METRICS.map(m => m.key);\n \n // add `_7DayAvg` modifier to all numerical values\n data.forEach(\n (d, i, arr) => {\n const rolling7Days = arr.slice(Math.max(0, i-6), i+1).filter(_d => _d.state === d.state);\n velocityKeys.forEach(\n k => {\n if(!isNaN(d[k])){\n d[`${k}_7da`] = d3.mean(rolling7Days.map(_d => _d[k] || 0))\n }\n }\n )\n }\n )\n \n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1666,"value":"us = d3.json('https://cdn.jsdelivr.net/npm/us-atlas@3/states-albers-10m.json')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"md`#### External dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"d3 = require('d3@5');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"import { View } from \"@mbostock/synchronized-views\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1101,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1673,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 32:"$31:body"