31:T50a,md`# Covid Infection Rates for US States Recreating [CNN's](https://www.cnn.com/interactive/2020/health/coronavirus-us-maps-and-cases/) Covid charts, with some improvements. Blue bars represent the number of daily new ${ viewof chartType.bind(html``)} over a ${ viewof days.bind(html``)} day span, sorted by ${ viewof sortType.bind(html``)} and scaled by ${ viewof scaleType.bind(html``)} The dashed red lines show the ${viewof daysAvg.bind(html``)} day moving average. *Last Updated: ${ toDate(byState.lastUpdated) }* Data Sources: [NY Times](https://github.com/nytimes/covid-19-data) `32:T853,chart = (state) => { const svg = d3.select(DOM.svg(width, height)); const viewType = chartType + 'New'; const avgType = chartType + 'Avg'; const data = state.values.slice(-days); const dates = data.map(d => d.date); const extent = [0, Math.max(d3.max(data, d => d[viewType]), 30)]; const x = d3.scaleBand(dates, [margin.left, width-margin.right]).padding(0.1); const y = d3.scaleLinear(extent, [height-margin.bottom, margin.top]); const xP = x.bandwidth() / 2; const averages = data.map(d => ([x(d.date)+xP, y(d[avgType])])); const xAxis = d3.axisBottom(x) .tickSizeInner(0) .tickValues([dates[0], dates.slice(-1)[0]]) .tickFormat(toDate); const yAxis = d3.axisLeft(y) .ticks(3) .tickSize(-width) .tickFormat(d3.format('.2s')) const line = d3.line() .curve(d3.curveMonotoneX); svg.append("g") .attr('class', 'y-axis') .attr("transform", `translate(${ margin.left }, 0)`) .call(yAxis) .call(g => g.selectAll('line').attr('stroke-dasharray', '2 2').attr('stroke', '#ccc')) .call(g => g.select('.tick').remove()) svg.append("g") .attr('class', 'x-axis') .attr("transform", `translate(0, ${ height - margin.bottom })`) .call(xAxis) .call(g => g.selectAll("text").attr("text-anchor", (d,i)=>(i===0)?'start':'end')); svg.append("g") .attr('class', 'bars') .selectAll('.bar') .data(data) .join('g') .attr('class', 'bar') .call((g) => { g.append('rect') .attr('fill', '#abc') .attr('x', d => x(d.date)) .attr('y', d => y(d[viewType])) .attr('width', d => x.bandwidth()) .attr('height', d => y(0) - y(d[viewType])); }) .call((g) => { g.append('title') .text(d => `${ toDate(d.date) } - ${ d[viewType] } new ${ chartType }`); }); svg.append('g') .attr('class', 'avg') .append('path') .attr('fill', 'none') .attr('stroke', '#d33') .attr('stroke-opacity', .8) .attr('stroke-width', 4) .attr('stroke-dasharray', '4 2') .attr('d', line(averages)) return svg.node(); }33:T658,byState = { const cases = await d3.csv(url, (d) => ({ date: d.date, state: d.state, casesTotal: +d.cases, deathsTotal: +d.deaths })); const ignore = ['Guam', 'Virgin Islands', 'Northern Mariana Islands']; let states = d3.nest() .key(d => d.state) .entries(cases) .filter((state) => !ignore.includes(state.key)); states.forEach((s) => { s.population = population.states[s.key]; s.values.forEach((d, i) => { if (!i) { return; } d.casesNew = d.casesTotal - s.values[i-1].casesTotal; d.deathsNew = d.deathsTotal - s.values[i-1].deathsTotal; if (scaleType==='per100000') { d.casesNew = (d.casesNew / s.population) * 100000; d.deathsNew = (d.casesNew / s.population) * 100000; } // get 7 day running average if (i>daysAvg-1) { d.casesAvg = d3.mean(s.values.slice(i-daysAvg, i), d => d.casesNew); d.deathsAvg = d3.mean(s.values.slice(i-daysAvg, i), d => d.deathsNew); } }); s.casesNew = s.values.slice(-1)[0].casesAvg; s.deathsNew = s.values.slice(-1)[0].deathsAvg; s.casesTotal = d3.max(s.values, d => d.casesTotal); s.deathsTotal = d3.max(s.values, d => d.deathsTotal); }); states.casesTotal = d3.max(states, d => d.casesTotal); states.deathsTotal = d3.max(states, d => d.deathsTotal); states.lastUpdated = cases.slice(-1)[0].date; states.sort((a, b) => { if (sortType==='key') { return a.key.localeCompare(b.key); } return b[sortType] - a[sortType]; }); return states; } 34:[] 2f:{"title":"Covid Infection Rates for US States","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"html`

\n ${ byState.map((state, i) => html`

#${i+1} - ${ state.key }

${ chart(state) }

`) }\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":712,"value":"md`---\n### Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"toDate = (d) => d3.timeFormat(\"%b %d\")(d3.timeParse(\"%Y-%m-%d\")(d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"md`### Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"height = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"width = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"margin = ({ left: 30, right: 5, top: 10, bottom: 20 });","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"md`### Inputs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":754,"value":"viewof scaleType = new View('per100000')","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"viewof chartType = new View('cases')","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"viewof sortType = new View('casesNew')","pinned":false,"hidden":false,"mode":"ojs"},{"id":671,"value":"viewof days = new View(14)","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"viewof daysAvg = new View(7)","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"url = 'https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv';","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"import {View} from \"@mbostock/synchronized-views\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"import { population } from \"@nor/us-state-populations\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}