31:T627,chart = (state) => { const key = `${chartType}Change`; const keyNew = `${chartType}New`; const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]) .attr("font-family", "sans-serif") .attr("font-size", 10);; const g = svg.selectAll('g') .data([state]) .join('g') .attr('transform', `translate(${ margin.left },${ margin.top })`); g.append("g") .attr("text-anchor", "end") .selectAll("text") .data(d3.range(7).map(i => new Date(1995, 0, i))) .join("text") .attr("x", -5) .attr("y", d => (countDay(d) + 0.5) * cellSize) .attr("dy", "0.31em") .text(formatDay); g.append("g") .selectAll("rect") .data(({values}) => values.filter(v => v.casesTotal > 50)) .join("rect") .attr("width", cellSize - 1) .attr("height", cellSize - 1) .attr("x", d => timeWeek.count(d3.utcYear(d.date), d.date) * cellSize + 0.5) .attr("y", d => countDay(d.date) * cellSize + 0.5) .attr("fill", d => color(d[key])) .append("title") .text(getTitle); const month = g.append("g") .selectAll("g") .data( ({values}) => d3.utcMonths(d3.utcMonth(values[0].date), values[values.length - 1].date)) .join("g"); month.filter((d, i) => i).append("path") .attr("fill", "none") .attr("stroke", "#fff") .attr("stroke-width", 3) .attr("d", pathMonth); month.append("text") .attr("x", d => timeWeek.count(d3.utcYear(d), timeWeek.ceil(d)) * cellSize + 2) .attr("y", -5) .text(formatMonth); return svg.node(); }32:T437,byState = { const cases = await d3.csv(url, (d) => ({ date: new 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) .sortKeys(d3.ascending) .entries(cases) .filter((state) => !ignore.includes(state.key)); states.forEach((s) => { s.values.forEach((d, i) => { if (!i) { return; } d.casesNew = d.casesTotal - s.values[i-1].casesTotal; d.casesChange = 1 - (s.values[i-1].casesNew/d.casesNew); d.deathsNew = d.deathsTotal - s.values[i-1].deathsTotal; d.deathsChange = 1 - (d.deathsNew / s.values[i-1].deathsNew); }); 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; return states; } 33:[] 2f:{"title":"Covid Infection Rates for US States Part 3","cells":[{"id":0,"value":"md`# Covid Infection Rates for US States
Part 3\n\nCalendar view showing the rate of new Corona Virus \n${ viewof chartType.bind(html``)} for the ${getAdj()} state of ${ viewof state.bind(html``)}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":908,"value":"key = legend({color, title: \"Daily change\", tickFormat: \"+%\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"chart(byState[state]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":712,"value":"md`---\n### Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"color = {\n const color = d3.scaleDiverging([-.5, 0, .5], t => d3.interpolateRdBu(1 - t));\n color.unknown(\"transparent\")(NaN);\n return color;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":834,"value":"function pathMonth(t) {\n const n = 7;\n const d = Math.max(0, Math.min(n, countDay(t)));\n const w = timeWeek.count(d3.utcYear(t), t);\n return `${d === 0 ? `M${w * cellSize},0`\n : d === n ? `M${(w + 1) * cellSize},0`\n : `M${(w + 1) * cellSize},0V${d * cellSize}H${w * cellSize}`}V${n * cellSize}`;\n}","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":804,"value":"countDay = d => d.getUTCDay();","pinned":false,"hidden":false,"mode":"ojs"},{"id":807,"value":"formatDay = d => \"SMTWTFS\"[d.getUTCDay()]","pinned":false,"hidden":false,"mode":"ojs"},{"id":810,"value":"formatMonth = d3.utcFormat(\"%b\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":890,"value":"formatDate = (d) => d3.timeFormat(\"%b %d\")(d)","pinned":false,"hidden":false,"mode":"ojs"},{"id":830,"value":"timeWeek = d3.utcSunday\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":899,"value":"getTitle = (d) => {\n let change = d[`${chartType}Change`] * 100;\n let date = formatDate(d.date);\n let daily = `${d[`${chartType}New`]} new ${chartType}`;\n let total = `${d[`${chartType}Total`]} total ${chartType}`;\n return `${ date }\\n${daily}\\n${(change>0)?'+':''}${change.toFixed(1)}% change\\n${total}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":882,"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":800,"value":"cellSize = 15\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"height = cellSize * 1.2 * 7;","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"margin = ({ left: 30, right: 5, top: 15, 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":656,"value":"viewof chartType = new View('cases')","pinned":false,"hidden":false,"mode":"ojs"},{"id":761,"value":"viewof scaleType = new View('amount')","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"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":"$32","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":782,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":878,"value":"import { getAdjective } from \"@nor/positive-adjectives\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":745,"value":"md`### Sources`","pinned":false,"hidden":false,"mode":"ojs"},{"id":747,"value":"md`\n\nChart From: https://observablehq.com/@d3/calendar-view\n\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":"$W33","stdlib":"1","titling":"auto"}