31:Tb55,chart = (state) => { const svg = d3.select(DOM.svg(width, height)); const data = state.values.filter((d) => d.casesTotal >= 50); const dates = data.map((d) => d.date); const extent = [0, d3.max(data,(d) => d.casesNew)]; 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 line = d3.line().curve(d3.curveMonotoneX); const casesAvg = data.map(d => ([x(d.date)+xP, y(d.casesAvg)])); const deathsAvg = data.map(d => ([x(d.date)+xP, y(d.deathsAvg)])); const datesTicks = dates.filter((d,i) => (i%20===0)); datesTicks.push(dates.slice(-1)[0]) const xAxis = d3.axisBottom(x) .tickSizeInner(5) .tickValues(datesTicks) .tickFormat(toDate) const yAxis = d3.axisLeft(y) .ticks(3) .tickSize(-width) .tickFormat(d3.format('.2s')) svg.append("g") .attr('class', 'y-axis') .attr("transform", `translate(${ margin.left }, 0)`) .call(yAxis) .call(g => g.select('.tick').remove()) .call(g => g.selectAll('line').attr('stroke-dasharray', '2 2').attr('stroke', '#ccc')) .call(g => g.selectAll('text').attr('dx', '1.2rem').attr('dy', -4)) svg.append("g") .attr('class', 'x-axis') .attr("transform", `translate(0, ${ height - margin.bottom })`) .call(xAxis) .call(g => g.selectAll('.tick:last-child').remove()) svg.append("g") .attr('class', 'cases') .selectAll('.cases') .data(data) .join('rect') .attr('class', 'bar') .attr('fill', '#abc') .attr('x', d => x(d.date)) .attr('y', d => y(d.casesNew)) .attr('width', d => x.bandwidth()) .attr('height', d => y(0) - y(d.casesNew)) .append('title') .text(d=>`${toDate(d.date)}\n${d.casesNew} cases\n${d.deathsNew} deaths`); svg.append("g") .attr('class', 'deaths') .selectAll('.deaths') .data(data) .join('rect') .attr('class', 'bar') .attr('fill', '#c54') .attr('x', d => x(d.date)) .attr('y', d => y(d.deathsNew)) .attr('width', d => x.bandwidth()) .attr('height', d => y(0) - y(d.deathsNew)); const text = svg.append("g") .attr('transform', `translate(${ margin.left + 30}, 5)`); text .append('text') .attr('dy', '16') .attr('font-size', 14) .text('Total Cases: '); text .append('text') .attr('dy', '40') .attr('font-size', 24) .attr('style', `text-shadow: 0px 0px 3px #FFFFFF;`) .text(toNumber(state.casesTotal)); text .append('text') .attr('dy', '16') .attr('font-size', 14) .attr('dx', '120') .text('Total Deaths:'); text .append('text') .attr('dy', '40') .attr('font-size', 24) .attr('style', `text-shadow: 0px 0px 3px #FFFFFF;`) .attr('dx', '120') .text(toNumber(state.deathsTotal)); return svg.node(); }32:[] 2f:{"title":"Covid Infection Rates for US States Part 2","cells":[{"id":0,"value":"md`# Covid Infection Rates for US States
Part 2\n\nCharting the number of new Covid Cases and Deaths each day for the ${getAdj()} state of ${ viewof state.bind(html``)}, starting from >50 reported cases.\n\n**Blue bars** represent the number of daily new cases.\n\n**Red bars** represent the number of new deaths.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"chart(byState[state]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":712,"value":"md`---\n### Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":797,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"toDate = (d) => d3.timeFormat(\"%m/%d\")(d3.timeParse(\"%Y-%m-%d\")(d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":898,"value":"toNumber = d3.format(\",\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"getAdj = () => {\n state;\n return getAdjective();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"md`### Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"margin = ({ left: 40, right: 15, top: 25, 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":753,"value":"viewof state = new View(0);","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":"byState = {\n \n const cases = await d3.csv(url, (d) => ({\n date: d.date,\n state: d.state,\n casesTotal: +d.cases,\n deathsTotal: +d.deaths\n }));\n \n const ignore = ['Guam', 'Virgin Islands', 'Northern Mariana Islands'];\n \n let states = d3.nest()\n .key(d => d.state)\n .sortKeys(d3.ascending)\n .entries(cases)\n .filter((state) => !ignore.includes(state.key));\n \n states.forEach((s) => {\n s.values.forEach((d, i) => {\n if (!i) {\n return;\n }\n d.casesNew = d.casesTotal - s.values[i-1].casesTotal;\n d.deathsNew = d.deathsTotal - s.values[i-1].deathsTotal; \n });\n s.casesTotal = d3.max(s.values, d => d.casesTotal);\n s.deathsTotal = d3.max(s.values, d => d.deathsTotal);\n });\n \n states.casesTotal = d3.max(states, d => d.casesTotal);\n states.deathsTotal = d3.max(states, d => d.deathsTotal);\n states.lastUpdated = cases.slice(-1)[0].date;\n \n return states;\n}\n","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":870,"value":"import { getAdjective } from \"@nor/positive-adjectives\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"import {View} from \"@mbostock/synchronized-views\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"md`### Info`","pinned":false,"hidden":false,"mode":"ojs"},{"id":784,"value":"md`\nData Sources: [NY Times](https://github.com/nytimes/covid-19-data)\n\n*Last Updated: ${ toDate(byState.lastUpdated) }*\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}