31:T1021,{ const svg = DOM.svg(w, h) const selection = d3.select(svg).append('g') .attr("transform", `translate (${w/2} ${h/2})`) selection.selectAll('.day') .data(zipped.filter((d,i) => i < 7)) .join('text') .attr('class', 'day') .append("textPath") .attr("xlink:href", (d,i) => `#wedge-${i}`) .attr("startOffset", 2) .style('font', 'arial') .style('fill', 'black') .style('font-style', 'italic') .attr('pointer-events', 'none') .style('font-size', (d,i) => d[1][0][3]/10) .style("alignment-baseline", "after-edge") .text((d,i) => dates[i].toLocaleDateString(undefined, { weekday: 'long'})) selection.append('text') .attr('x', -w/2 + 20) .attr('y', -h/2 + 10 + w / 15) .style('font', 'arial') .style('font-size', w / 15) .style('text-anchor', 'start') .style('pointer-events', 'none') .text(() => states[index][0].state) selection.selectAll('.wedge') .data(zipped) .join('path') .attr('id', (d,i) => `wedge-${i}`) .attr('class', 'wedge') .attr('fill', color) .style('opacity', (d,i) => i < zipped.length - 1 ? (+d[0][type] - (+zipped[i+1][0][type]))/max : .01) .style('stroke', 'white') .style('stroke-width', 1) .attr('d', d => path(d[1]).concat(' Z')) .attr('cursor', 'pointer') .on('mousemove', (d,i) => { const x = d3.event.layerX - w / 2 const y = d3.event.layerY - h / 2 d3.select('#tooltip') .attr('x', () => x < 0 ? x + 8 : x - 8 - 140) .attr('y', y - 34) .style('opacity', .8) d3.select('#date') .style('text-anchor', () => x < 0 ? 'start' : 'end') .attr('x', () => x < 0 ? x + 12 : x - 12) .attr('y', y - 20) .text(() => { if(i < zipped.length - 1) { return dates[i].toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' }) } return }) d3.select('#cases') .style('text-anchor', () => x < 0 ? 'start' : 'end') .attr('x', () => x < 0 ? x + 12 : x - 12) .attr('y', y) .text(() => { if(i < zipped.length - 1) { return `cases: ${(+d[0]['cases'] - (+zipped[i+1][0]['cases'])).toLocaleString()}` } return }) d3.select('#deaths') .style('text-anchor', () => x < 0 ? 'start' : 'end') .attr('x', () => x < 0 ? x + 12 : x - 12) .attr('y', y + 20) .text(() => { if(i < zipped.length - 1) { return `deaths: ${(+d[0]['deaths'] - (+zipped[i+1][0]['deaths'])).toLocaleString()}` } return }) }) .on('mouseout', (d,i) => { d3.select('#tooltip') .style('opacity', 0) d3.select('#date') .text('') d3.select('#cases') .text('') d3.select('#deaths') .text('') }) selection.selectAll('.date-label') .data(zipped) .join('text') .attr('class', 'date-label') .append("textPath") .attr("xlink:href", (d,i) => `#wedge-${i}`) .attr("startOffset", 2) .style('font', 'arial') .style('fill', 'black') .style('font-style', 'italic') .attr('pointer-events', 'none') .style('font-size', (d,i) => d[1][0][3]/12) .style("alignment-baseline", "hanging") .text((d,i) => dates[i].toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })) selection.append('rect') .attr('id', 'tooltip') .attr('pointer-events', 'none') .attr('width', 140) .attr('height', 60) .style('opacity', 0) .style('fill', 'white') selection.append('text') .attr('id', 'date') .attr('pointer-events', 'none') .style('font', 'arial') .style('font-size', 16) selection.append('text') .attr('id', 'cases') .attr('pointer-events', 'none') .style('font', 'arial') .style('font-size', 16) selection.append('text') .attr('id', 'deaths') .attr('pointer-events', 'none') .style('font', 'arial') .style('font-size', 16) return svg; }32:[] 2f:{"title":"COVID-19 Daily Cases & Deaths by State","cells":[{"id":0,"value":"md`# COVID-19 Daily Cases & Deaths by State\n\nThis calendar allows you to scan through every state—sorted, from highest to lowest, by total number of reported cases—to see changes in reported cases and fatalities over time. Hue correlates with the peak magnitude of the daily case or death count for a given state, with opacity tapering off for lower values within that state. I used a spiral rather than a bar chart or line chart so as to visually disambiguate trends within reporting (e.g. weekend lags, bottlenecks, etc.). Data collected by the [nytimes](https://github.com/nytimes/covid-19-data).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"`worst day so far: ${max.toLocaleString()} newly reported ${type} on ${dates[maxIndex].toLocaleDateString(undefined, {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"{\n const svg = DOM.svg(500, 32);\n const svgSelection = d3.select(svg).append('g')\n \n svgSelection.append('circle')\n .style('fill', color)\n .attr('cx', t * 320)\n .attr('cy', 22)\n .attr('r', 5);\n \n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"{\n if(type === 'cases') {\n return legend({\n color: d3.scaleSequentialLog([10, 10**4], d3.interpolateTurbo),\n title: \"Max Daily High\",\n ticks: 3,\n tickFormat: \".0s\"\n })\n } else if (type === 'deaths') {\n return legend({\n color: d3.scaleSequentialLog([1, 10**3], d3.interpolateTurbo),\n title: \"Max Daily High\",\n ticks: 3,\n tickFormat: \".0s\"\n })\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"viewof type = radio({\n options: [\n { label: 'cases', value: 'cases' },\n { label: 'deaths', value: 'deaths' },\n ],\n value: 'cases'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"viewof index = Scrubber(Array.from({length: 51}, (_, i) => i), {\n autoplay: false,\n delay: 500,\n format: index => `rank in total cases: ${index + 1}`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"viewof p = Scrubber(Array.from({length: 100}, (_, i) => -i/200 - .02), {\n autoplay: false,\n delay: 1000/60,\n alternate: true,\n initial: 0,\n format: p => `spiral pitch: ${-p}`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"max = d3.max(zipped, (d,i) => i < zipped.length - 1 ? Math.abs(+d[0][type] - (+zipped[i+1][0][type])) : 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"maxIndex = aux.maxIndex(zipped, (d,i) => i < zipped.length - 1 ? Math.abs(+d[0][type] - (+zipped[i+1][0][type])) : 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"megaMax = d3.max(states[0], (d,i) => i < states[0].length - 1 ? Math.abs(+d[type] - (+states[0][i+1][type])) : 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"t = type === 'cases' ? Math.log(max/10)/(3*Math.log(10)) : Math.log(max)/(3*Math.log(10))","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"color = d3.interpolateTurbo(t)","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"daysPerWeek = 7;","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"weeks = Math.ceil(states[0].length / 7);","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"segmentsPerArc = 12","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"maxRadius = .4 * w","pinned":false,"hidden":false,"mode":"ojs"},{"id":899,"value":"w = width < 480 ? width : 480","pinned":false,"hidden":false,"mode":"ojs"},{"id":901,"value":"h = w","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"rawData = d3.csvParse(\n await (await fetch(\n \"https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv\"\n )).text()\n).reverse()","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"excludeTerritories = new Set([\"Guam\", \"Puerto Rico\", \"Virgin Islands\", \"Northern Mariana Islands\", \"American Samoa\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"states = d3.nest()\n .key(d => d.state)\n .entries(rawData.filter(d => !excludeTerritories.has(d.state)))\n .map(d => d.values)\n .sort((a,b) => +b[0].cases - +a[0].cases)","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"wedges = getSpiral(p,daysPerWeek*weeks*segmentsPerArc,weeks,maxRadius)\n .map((c, i, arr) => {\n if(i%12===0 && i + segmentsPerArc + daysPerWeek*segmentsPerArc < arr.length) {\n const wedges = [];\n for(let j = 0; j <= segmentsPerArc; j++) {\n wedges.push(arr[i + j])\n }\n for(let k = 0; k <= segmentsPerArc; k++) {\n wedges.push(arr[i + segmentsPerArc - k + segmentsPerArc * daysPerWeek])\n }\n return wedges\n }\n return[];\n}).filter(el => el.length > 1)\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"zipped = d3.zip(states[index], wedges)","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"dates = zipped.map(d => d[0].date).map(d => new Date(`${d}T20:00Z`))","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"function getSpiral(pitch,steps,loops,max) {\n const spiral = []\n const tau = 2 * Math.PI\n for(let i = 0; i <= steps; i++) {\n const theta = loops * i * tau / steps;\n const r = max * Math.exp(pitch*theta);\n const x = r * Math.cos(theta);\n const y = r * Math.sin(theta);\n spiral.push([x,y,theta,r, pitch])\n }\n return spiral;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"path = d3.line()","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"aux = require(\"d3-array@^2.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"d3@^5.8\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}