32:T4ad,states = { let states = geo.features.states; if (selectedState !== "US") { states = states.filter(s => s.id === selectedState); } return states.map( s => htm` d3.select(el).call(selectedState === "US" ? activable : unactivable)} > ${geo.features.counties.get(s.id).map( c => htm` d3 .select(el) .datum(c) .call(selectedState !== "US" ? activable : unactivable) .on("mouseenter", function(d) { mutable selectedCounty = d.id; })} > ` )} ${s.id === selectedState && htm` `} ${s.properties.name} ` ); }33:T758,state2plane = { const table = new Map([ ["Alabama", "Alabama West"], ["Alaska", "Alaska Zone 2"], ["Arizona", "Arizona Central"], ["Arkansas", "Arkansas North"], ["California", "California Zone 4"], ["Colorado", "Colorado Central"], ["Connecticut", "Connecticut"], ["Delaware", "Delaware"], ["Florida", "Florida East"], ["Georgia", "Georgia West"], ["Hawaii", "Hawaii Zone 3"], ["Idaho", "Idaho Central"], ["Illinois", "Illinois East"], ["Indiana", "Indiana West"], ["Iowa", "Iowa North"], ["Kansas", "Kansas South"], ["Kentucky", "Kentucky South"], ["Louisiana", "Louisiana South"], ["Maine", "Maine East"], ["Maryland", "Maryland"], ["Massachusetts", "Massachusetts Mainland"], ["Michigan", "Michigan Central"], ["Minnesota", "Minnesota Central"], ["Mississippi", "Mississippi West"], ["Missouri", "Missouri Central"], ["Montana", "Montana"], ["Nebraska", "Nebraska"], ["Nevada", "Nevada Central"], ["New Hampshire", "New Hampshire"], ["New Jersey", "New Jersey"], ["New Mexico", "New Mexico Central"], ["New York", "New York Central"], ["North Carolina", "North Carolina"], ["North Dakota", "North Dakota South"], ["Ohio", "Ohio South"], ["Oklahoma", "Oklahoma North"], ["Oregon", "Oregon North"], ["Pennsylvania", "Pennsylvania South"], ["Rhode", "Rhode Island"], ["South Carolina", "South Carolina"], ["South Dakota", "South Dakota South"], ["Tennessee", "Tennessee"], ["Texas", "Texas Central"], ["Utah", "Utah Central"], ["Vermont", "Vermont"], ["Virginia", "Virginia South"], ["Washington", "Washington South"], ["West Virginia", "West Virginia South"], ["Wisconsin", "Wisconsin Central"], ["Wyoming", "Wyoming East Central"] ]); return state => table.get(state); }34:T680,projection = { if (selectedState === "US") { return d3 .geoAlbersUsa() .fitSize([1000, 750], topojson.feature(us, us.objects.nation)); } else if (selectedState === "11") { // Washington D.C. return d3 .geoMercator() .fitSize( [1000, 750], topojson.feature( us, us.objects.states.geometries.find(c => c.id === "11") ) ); } const stateplane = state2plane(fips2state(selectedState)); const { Projection: code, parallels, origin } = stateplanes.find( plane => plane.Zone === stateplane ); // const { Projection: code, parallels, origin } = stateplanes.find( // plane => plane.Zone === selectedZone // ); let projection; switch (code) { case "L": projection = d3.geoConicConformal(); break; case "TM": projection = d3.geoTransverseMercator(); break; default: throw Error(`"${code}" is not a valid projection identifier.`); } if (parallels) { projection.parallels(parallels.map(([p1, p2]) => p1 + p2 / 60)); } if (origin) { let rotation; switch (code) { case "L": const [r1, r2] = origin[0]; rotation = [r1 + r2 / 60, 0]; break; case "TM": rotation = origin.map(([r1, r2], idx) => idx === 0 ? r1 + r2 / 60 : -r1 - r2 / 60 ); break; default: throw Error(`"${code}" is not a valid projection identifier.`); } projection.rotate(rotation); } return projection.fitSize( [1000, 750], topojson .feature(us, us.objects.states) .features.find(d => d.id === selectedState) ); }35:Td42,casesAndDeaths = { const totalCases = total.map(reshape("cases")); const totalDeaths = total.map(reshape("deaths")); const selectedCases = selected.map(reshape("cases")); const selectedDeaths = selected.map(reshape("deaths")); const priorCases = prior.map(reshape("cases")); const priorDeaths = prior.map(reshape("deaths")); const x = d3 .scaleUtc() .domain([d3.min(allDates), new Date()]) .range([margin.left, viewbox.width - margin.right]); const y = d3 .scaleLinear() .domain([0, d3.max(total, d => d.cases)]) .range([viewbox.height - margin.bottom, margin.top]) .nice(); const xAxis = g => g .call( d3 .axisBottom(x) .ticks(new Set([...allDates].map(d => d.getTime())).size) .tickFormat(d3.utcFormat("%b %d")) .tickSizeOuter(0) ) .call(g => g .selectAll("text") .style("text-anchor", "end") .style("font-size", "small") .style("font-weight", "normal") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-65)") .filter( d => selectedDate && d.toDateString() === selectedDate.toDateString() ) .style("font-weight", "bold") ); const yAxis = g => g.call(d3.axisRight(y)).call(g => g .style("font-size", "small") .select(".domain") .remove() ); const area = d3 .area() .curve(d3.curveLinear) .defined(d => !isNaN(d.value)) .x(d => x(d.date)) .y0(y(0)) .y1(d => y(d.value)); const lc = priorCases.slice(-1)[0]; const ld = priorDeaths.slice(-1)[0]; const fmt = d3.format(".3~s"); function label(l, d) { const offset = l === "cases" ? 25 : 10; const str = fmt(d.value); return htm` ${fmt(d.value)} ${d.value === 1 ? l.substring(0, l.length - 1) : l} `; } const DOM = htm` `; return { x, y, xAxis, yAxis, DOM }; }36:T801,growthRate = { const viewbox = { x: 0, y: 0, width: 1000, height: 250 }; const height = width / (viewbox.width / viewbox.height); const x = casesAndDeaths.x; const xAxis = casesAndDeaths.xAxis; const totalDeltas = deltas(total); const priorDeltas = deltas(prior); const y = d3 .scaleLinear() .domain([0, d3.max(totalDeltas, d => d.cases)]) .range([viewbox.height - margin.bottom, margin.top]) .nice(); const yAxis = g => g .attr("transform", `translate(${viewbox.width - margin.right},0)`) .call(d3.axisRight(y)) .call(g => g .style("font-size", "small") .select(".domain") .remove() ); const barWidth = Math.floor((x.range()[1] - x.range()[0]) / allDates.length) - 1; const bar = field => d => htm` `; const fmt = d3.format(".3~s"); const label = (f, d) => { const offset = f === "cases" ? 25 : 10; return htm` ${fmt(d[f])} `; }; const ld = priorDeltas.slice(-1)[0]; const DOM = htm` `; return { viewbox, x, y, xAxis, yAxis, DOM }; }37:T1bca,trajectories = { const margin = { top: 20, bottom: 20, left: 20, right: 10 }; const threshold = 100; const data = new Map( [...recordsByGeography.entries()].map(([fips, entries]) => [ fips, entries .filter(d => d.cases >= threshold) .map((d, i) => ({ day: i, value: d.cases })) ]) ); const days = data.get("US").slice(-1)[0].day; const x = d3 .scaleLinear() .domain([0, days + 2]) .range([2 * margin.left, width - margin.right]) .nice(); const xAxis = g => g.call(d3.axisBottom(x).ticks(days)).call(g => g .selectAll("text") .style("text-anchor", "middle") .style("font-size", "small") .style("font-weight", "normal") .text(d => d) ); const y = d3 .scaleLog() .domain([ threshold, d3.max(recordsByGeography.get(selectedState), d => d.cases) ]) .range([width * 0.5 - margin.bottom, margin.top]) .nice(); const yAxis = g => g .attr("transform", `translate(${2 * margin.left},0)`) .call(d3.axisLeft(y).ticks(6, "~s")) .call(g => g .style("font-size", "small") .select(".domain") .remove() ); const line = d3 .line() .defined(d => !isNaN(d.value)) .x(d => x(d.day)) .y(d => y(d.value)); // color scheme is "bold" from https://carto.com/carto-colors/ const color = [ "#7F3C8D", "#11A579", "#3969AC", "#F2B701", "#E73F74", "#80BA5A", "#E68310", "#008695", "#CF1C90", "#f97b72", "#4b4b8f" ]; function pos(d) { return `translate(${x(d.day)},${y(d.value)})`; } function last(array) { return array.slice(-1)[0]; } let lines = Array.from(data.keys()).filter(v => v && v.length === 2); let primaries = new Set(["US", "53", "06", "34", "36", "26", "25", "08"]); if (selectedState !== "US") { lines = [ selectedState, ...Array.from(data.keys()).filter( v => v && v.length === 5 && v.startsWith(selectedState) ) ]; primaries = new Set( lines .sort((a, b) => d3.descending(data.get(a).length, data.get(b).length)) .slice(0, 4) ); } lines = lines.sort((a, b) => primaries.has(a) ? 1 : primaries.has(b) ? -1 : 0 ); lines = lines.sort((a, b) => (a === "08" ? 1 : b === "08" ? -1 : 0)); // HACK put CO on top const fmt = d3.format(".3~s"); function hover(el) { if ("ontouchstart" in document) { el.style("-webkit-tap-highlight-color", "transparent") .on("touchmove", moved) .on("touchstart", entered) .on("touchend", left); } else { el.on("mousemove", moved) .on("mouseenter", entered) .on("mouseleave", left); } const trajectories = el.selectAll("g.trajectory"); const dot = el.select("g.dot"); function moved() { d3.event.preventDefault(); const i = Math.round(x.invert(d3.event.layerX)); if (i < 0) return; const distance = (s, i) => s && s.length > i ? Math.abs(y(s[i].value) - d3.event.layerY) : Infinity; const [fips, s] = d3.least(lines.map(l => [l, data.get(l)]), ([_, s]) => distance(s, i) ); if (distance(s, i) > 50) { left(); return; } else { entered(); } trajectories.classed("faded", true).classed("active", false); trajectories .filter(function() { return d3.select(this).attr("id") === fips; }) .classed("faded", false) .classed("active", true) .raise(); if (s) { dot.attr("transform", `translate(${x(s[i].day)},${y(s[i].value)})`); const prev = i > 1 ? s[i - 1] : s[i]; const next = i < s.length - 1 ? s[i + 1] : s[i]; const period = (next.day - prev.day) / (Math.log2(next.value) - Math.log2(prev.value)); const slope = (y(next.value) - y(prev.value)) / (x(next.day) - x(prev.day)); const rot = (Math.atan(slope) * 180) / Math.PI; dot .select("path") .attr("stroke", "#888") .attr("d", "M-75,0 L75,0") .attr("transform", `rotate(${rot})`); dot.select("text.count").text(fmt(s[i].value)); dot .select("text.slope") .text( `doubling every ${ period < 100 ? period.toPrecision(2) : period.round } days` ); dot.raise(); } } function entered() { dot.attr("display", null); } function left() { trajectories.classed("faded", false).classed("active", false); trajectories .filter(function() { return primaries.has(d3.select(this).attr("id")); }) .raise(); dot.attr("display", "none"); } left(); } const guides = [ { label: "slope = cases double every day", period: 1 }, { label: "...every second day", period: 2 }, { label: "...every third day", period: 3 }, { label: "...every week", period: 7 } ]; function drawguide(g) { const [y0, y1] = y.domain(); const daysToYMax = (Math.log2(y1) - Math.log2(y0)) * g.period; const l = [{ day: 0, value: y0 }]; const days = x.domain()[1]; if (daysToYMax < days) { l.push({ day: daysToYMax, value: y1 }); } else { l.push({ day: days, value: y0 * 2 ** (days / g.period) }); } const mid = { day: l[1].day / 2, value: y0 * 2 ** (l[1].day / 2 / g.period) }; const slope = (y(l[1].value) - y(l[0].value)) / (x(l[1].day) - x(l[0].day)); const rot = (Math.atan(slope) * 180) / Math.PI; return htm` ${g.label} `; } function drawline(fips, i) { const ds = data.get(fips); if (ds.length === 0) return; return htm` ${fips === "US" ? fips : fips2name(fips)} `; } const DOM = htm` `; return { x, y, xAxis, yAxis, DOM }; }38:T499,us = { const raw = await FileAttachment("counties-sq@2.json").json(); const remove = new Set([ "60", // American Samoa "66", // Guam "69", // Commonwealth of the Northern Mariana Islands "72", // Puerto Rico "78" // United States Virgin Islands // "11" // DC FIXME ]); raw.objects.states.geometries = raw.objects.states.geometries.filter( d => !remove.has(d.id) ); const nyc = topojson.mergeArcs( raw, raw.objects.counties.geometries.filter(geom => boroughs.has(geom.id)) ); nyc.id = "36NYC"; nyc.properties = { name: "New York City" }; // { // type: "MultiPolygon", // id: "36NYC", // properties: { // name: "New York City" // }, // arcs: raw.objects.counties.geometries // .filter(geom => boroughs.has(geom.id)) // .map(geom => geom.arcs) // }; for (const i in raw.objects.counties.geometries) { const geom = raw.objects.counties.geometries[i]; if (boroughs.has(geom.id)) { raw.objects.counties.geometries.splice(i, 1); } } raw.objects.counties.geometries.push(nyc); // return raw.objects.counties.geometries[0]; // return nyc; return raw; }39:[{"id":"187c251c2841706aab6ca3832c05f45388a2b34b0e84909cf9201577abf49c1776f92f58446753e070d55b0fee707200b926c2d7a6bbb90862652af51ec4fd54","href":"https://static.observableusercontent.com/files/187c251c2841706aab6ca3832c05f45388a2b34b0e84909cf9201577abf49c1776f92f58446753e070d55b0fee707200b926c2d7a6bbb90862652af51ec4fd54","name":"populations.csv","type":"text/csv","lastModified":1585559324945.619,"size":38325},{"id":"fa971760de5eb10cd4028f7c10db06256064b35b16cf0fac20726aa55307abdadc54189118e714d28e38edef9630f672cf28801411623c964228c9734f25aa9d","href":"https://static.observableusercontent.com/files/fa971760de5eb10cd4028f7c10db06256064b35b16cf0fac20726aa55307abdadc54189118e714d28e38edef9630f672cf28801411623c964228c9734f25aa9d","name":"counties-sq@2.json","type":"application/json","lastModified":1585720162650.5,"size":680984}] 2f:{"title":"COVID-19 in the U.S.","cells":[{"id":0,"value":"md`# COVID-19 in the U.S.\n\nUse the dropdown to view data for a particular state. Drag the slider to see the map at different points in time. All three plots react to changing the selected region (entire country or a particular state). The first two plots also react to changing the selected date.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"viewof selectedState = select({\n title: \"View data for\",\n options: [\n { label: \"entire country\", value: \"US\" },\n ...us.objects.states.geometries\n .sort((a, b) => d3.ascending(a.properties.name, b.properties.name))\n .map(d => ({ label: d.properties.name, value: d.id }))\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":804,"value":"viewof selectedDate = {\n const [start, end] = d3.extent(csv.map(d => d.date));\n const dates = d3.utcDay.range(start, d3.utcDay.offset(end, 1));\n const fmt = d3.utcFormat(\"%a %b %d, %Y\");\n\n return slider({\n min: 0,\n max: dates.length - 1,\n step: 1,\n title: \"Select date\",\n value: this ? this.input.value : dates.length - 1,\n getValue: n => dates[n.value],\n format: fmt\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4091,"value":"md`### Cases per capita map, and total cases & deaths vs. time\n\nThe map shows cases _per capita_, meaning divided by the population size. The chart shows total number of cases. Hovering on the map will show the portion of the chart that the given ${\n selectedState === \"US\" ? \"state\" : \"county\"\n} is responsible for. Note that these numbers will only ever increase — number of patients who have recovered isn't being tracked consistently, so it's difficult to estimate or graph.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1124,"value":"chart1 = html`\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4088,"value":"md`\n### New cases (peach) and deaths (violet) each day\n\nThis plot (specifically the new cases portion, shown in peach) is “the curve” everyone is talking about flattening. If the number of new cases per day rises too high, it will overwhelm hospital resources and cause deaths that might otherwise have been prevented.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1944,"value":"Preact.render(growthRate.DOM)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4097,"value":"md`\n### Trajectories (total cases on a log scale)\n\nThe _X_ axis shows the number of days elapsed in each ${\n selectedState === \"US\" ? \"state\" : \"county\"\n} since it first passed 100 cases${\n selectedState === \"US\"\n ? \".\"\n : \" (those with fewer than 100 reported cases are not shown).\"\n} The _Y_ axis shows the total number of cases on a log scale. A straight, rising line on this plot represents exponential growth in number of cases. The different guide lines in the background show what slopes correspond to different doubling periods. The goal is to get these lines to flat — meaning no new cases are being reported.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2022,"value":"chart5 = Preact.render(trajectories.DOM)","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"md`\n## Credits\n\n- The dataset is from the New York Times and is available [here](https://github.com/nytimes/covid-19-data).\n- Individual state projections are computed based on State Plane Coordinate System information. This approach is based on [@rdmurphy's implementation](https://observablehq.com/@rdmurphy/responsive-maps-based-on-the-bounds-of-geographic-data).\n- The color scheme for the map was made using the [vis4 frontend](https://vis4.net/palettes/) for [chroma.js](https://github.com/gka/chroma.js/)\n- Color legend for the map uses [@mbostock's notebook](https://observablehq.com/@d3/color-legend).\n- Uses inputs from [@jashkenas' indispensable collection](https://observablehq.com/@jashkenas/inputs).\n- D3, TopoJSON, Preact, [htm](https://github.com/developit/htm)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4359,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4083,"value":"md`\n# Implementation\n\nBelow is the code which powers the visualizations above. You don't need to read any further unless you're interested in how this code works.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"md`## Mutable state`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"mutable selectedCounty = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":2575,"value":"mutable selectedGeography = \"US\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3770,"value":"md`## Mutators`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3667,"value":"drawMap = {\n Preact.render(map, null, chart1.getElementById(\"map\"));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3663,"value":"drawPlot = {\n Preact.render(casesAndDeaths.DOM, null, chart1.getElementById(\"plot\"));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3815,"value":"_selectedGeography = {\n if (selectedCounty === null) {\n return selectedState;\n } else if (selectedState === \"US\") {\n return selectedCounty.substring(0, 2);\n } else {\n return selectedCounty;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2589,"value":"updatedSelectedGeography = {\n const previous = this;\n if (previous !== _selectedGeography) {\n mutable selectedGeography = _selectedGeography;\n }\n return _selectedGeography;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1114,"value":"colorCounties = {\n drawMap;\n d3.select(chart1)\n .selectAll(\"path.county\")\n .attr(\"fill\", countyFillColor);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3797,"value":"updateCountyTitles = {\n drawMap;\n\n d3.select(chart1)\n .selectAll(\"path.county\")\n .select(\"title\")\n .text(selectedState === \"US\" ? null : countyTitleText);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"md`## Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":830,"value":"color = {\n const palette = [\n '#fff7ea',\n '#fcd0b1',\n '#faa580',\n '#f77552',\n '#f03528',\n '#c51625',\n '#96071e',\n '#680114',\n '#3d0000'\n ];\n\n const min = 1e-4;\n const max = 1e-2;\n\n const interpolator = d3\n .scaleLinear()\n .domain(d3.range(0, 1.0 + epsilon, 1.0 / (palette.length - 1)))\n .range(palette)\n .interpolate(d3.interpolateHcl);\n\n return d3.scaleSequentialLog([min, max], interpolator).clamp(true);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":938,"value":"selectedDateAsISOString = (selectedDate || mostRecentDate).toISOString()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3471,"value":"function casesPerCapita(fips) {\n const cases = casesByDateByCounty.get(selectedDateAsISOString).get(fips) || 0;\n const population = populations.get(fips);\n return cases / population;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":828,"value":"function countyFillColor(d) {\n return color(casesPerCapita(d.id));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3465,"value":"function countyTitleText(d) {\n return `${d.properties.name} – ${formatValueAsPerCapita(casesPerCapita(d.id))}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3469,"value":"formatValueAsPerCapita = {\n const formatter = d3.format(\".2~s\");\n return v => (v === 0 ? \"0\" : `1 in ${formatter(1 / v)}`);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":922,"value":"casesByDateByCounty = d3.rollup(\n csv,\n v => v[v.length - 1].cases,\n d => d.date.toISOString(),\n d => d.fips\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1200,"value":"map = htm`\n \n ${nation}\n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1066,"value":"nation = htm`\n \n d3.select(el).on(\"mouseleave\", function(d) {\n mutable selectedCounty = null;\n })}\n >\n ${states}\n \n \n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1067,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"activable = selection =>\n selection\n .on(\"mouseover\", function(d) {\n d3.select(this)\n .classed(\"active\", true)\n .raise();\n })\n .on(\"mouseout\", function(d) {\n d3.select(this)\n .classed(\"active\", false)\n .lower();\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":3945,"value":"unactivable = selection => selection.on(\"mouseover\", null).on(\"mouseout\", null)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3946,"value":"md`## Projections`","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"stateplanes = d3.json(\n 'https://cdn.jsdelivr.net/gh/veltman/d3-stateplane/stateplane.json'\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"fips2state = {\n const table = new Map(\n us.objects.states.geometries.map(d => [d.id, d.properties.name])\n );\n return fips => table.get(fips);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2630,"value":"fips2county = {\n const table = new Map(\n us.objects.counties.geometries.map(d => [d.id, d.properties.name])\n );\n return fips => table.get(fips);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2632,"value":"fips2name = fips => {\n if (fips.length === 2) return fips2state(fips);\n else return fips2county(fips);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1245,"value":"state2fips = {\n const table = new Map(\n us.objects.states.geometries.map(d => [d.properties.name, d.id])\n );\n return fips => table.get(fips);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1419,"value":"md`## Total cases and deaths vs. time`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1421,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":1442,"value":"viewbox = ({ x: 0, y: 0, width: 1000, height: 500 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1444,"value":"margin = ({ top: 20, right: 85, bottom: 60, left: 30 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1483,"value":"colors = ({\n cases: \"#ffaaa5\",\n deaths: \"#ff4d4d\",\n casesFaded: \"#ffd5d2\",\n deathsFaded: \"#ffa6a6\",\n highlight: \"#4f32ff\",\n grey1: \"#f5f5f5\",\n grey2: \"#e8e8e8\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1956,"value":"md`## Growth rate (new cases and deaths each day)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2308,"value":"deltas = records =>\n d3.pairs(records).map(([a, b]) => ({\n from: a.date,\n to: b.date,\n cases: b.cases - a.cases,\n deaths: b.deaths - a.deaths\n }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1961,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":3921,"value":"md`## Trajectories (total cases vs. time, on a log scale)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2037,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":424,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1134,"value":"geo = {\n const nation = topojson.feature(us, us.objects.nation).features[0];\n const states = topojson.feature(us, us.objects.states).features;\n const counties = new Map(\n states.map(s => [\n s.id,\n topojson\n .feature(us, us.objects.counties)\n .features.filter(c => c.id.startsWith(s.id))\n ])\n );\n\n const meshes = {\n states: topojson.mesh(us, us.objects.states, (a, b) => a !== b),\n counties: new Map(\n states.map(s => [\n s.id,\n topojson.mesh(\n us,\n us.objects.counties,\n (a, b) => a !== b && (a.id.startsWith(s.id) || b.id.startsWith(s.id))\n )\n ])\n )\n };\n\n return { features: { nation, states, counties }, meshes };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"csv = {\n const csv = await d3.csv(\n \"https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-counties.csv\",\n row => ({\n date: new Date(row.date),\n county: row.county,\n state: row.state,\n fips: row.fips,\n cases: +row.cases,\n deaths: +row.deaths\n })\n );\n\n return csv\n .map(row => {\n if (row.county === \"New York City\") {\n row.fips = \"36NYC\";\n }\n return row;\n })\n .sort((a, b) => d3.ascending(a.date, b.date));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1796,"value":"aggregate = function(csv) {\n const states = new Set(csv.map(row => row.state));\n const recents = new Map([...states].map(state => [state, new Map()]));\n const results = [];\n\n for (const date of allDates) {\n const records = csv.filter(row => +row.date === +date);\n\n for (const record of records) {\n const entity = [record.state, record.county, record.fips].join(\"::\");\n recents.get(record.state).set(entity, record);\n }\n\n let totalCases = 0,\n totalDeaths = 0;\n\n for (const state of states) {\n const fips = state2fips(state);\n const cases = d3.sum(recents.get(state).values(), d => d.cases);\n const deaths = d3.sum(recents.get(state).values(), d => d.deaths);\n\n results.push({ date, state, fips, cases, deaths });\n\n totalCases += cases;\n totalDeaths += deaths;\n }\n\n results.push({ date, fips: \"US\", cases: totalCases, deaths: totalDeaths });\n }\n\n return results;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1868,"value":"records = [...csv, ...aggregate(csv)].sort((a, b) =>\n d3.ascending(a.date, b.date)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2061,"value":"recordsByGeography = d3.group(records, d => d.fips)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1651,"value":"allDates = [...new Set(csv.map(d => d.date.toISOString()))].map(\n d => new Date(d)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1591,"value":"mostRecentDate = d3.max(allDates)","pinned":false,"hidden":false,"mode":"ojs"},{"id":978,"value":"// populations = d3.csvParse(\n// await FileAttachment(\"populations.csv\").text(),\n// row => ({ fips: row.fips, population: +row.population })\n// )\n\npopulations = {\n const raw = new Map(\n d3.csvParse(await FileAttachment(\"populations.csv\").text(), row => [\n row.fips,\n +row.population\n ])\n );\n\n raw.set(\"36NYC\", d3.sum(boroughs, b => raw.get(b)));\n\n for (const b of boroughs) {\n raw.delete(b);\n }\n\n return raw;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2256,"value":"total = recordsByGeography.get(selectedState)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2257,"value":"selected = recordsByGeography.get(selectedGeography) || []","pinned":false,"hidden":false,"mode":"ojs"},{"id":2261,"value":"prior = selected.slice(\n 0,\n d3.bisector(d => d.date).right(selected, selectedDate || mostRecentDate, 1)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2264,"value":"reshape = field => d => ({ date: d.date, value: d[field] })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3491,"value":"boroughs = new Set([\n \"36061\", // New York County\n \"36047\", // Kings County\n \"36081\", // Queens County\n \"36005\", // Bronx County\n \"36085\" // Richmond County\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"md`## Utils`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1662,"value":"function formatDateISO(date) {\n return date.toISOString().split(\"T\")[0];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"function intersect(...arrays) {\n if (arrays.length === 0) return [];\n\n const sets = arrays.map(arr => new Set(arr));\n\n const i = sets.reduce((m, s, i) => (s.size < sets[m].size ? i : m), 0);\n const [smallest] = sets.splice(i, 1);\n const result = [];\n\n for (let val of smallest) {\n if (sets.every(s => s.has(val))) {\n result.push(val);\n }\n }\n\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"timeit = (fn, times = 1000) => {\n const start = performance.now();\n for (let i = 0; i < times; i++) {\n fn();\n }\n const end = performance.now();\n return `${(end - start) / times} ms per call`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"function memoize(func) {\n const cache = new Map();\n\n return function() {\n const key = JSON.stringify(arguments);\n if (cache.has(key)) {\n return cache.get(key);\n } else {\n let val = func.apply(null, arguments);\n cache.set(key, val);\n return val;\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"md`## Miscellaneous`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"debug = true","pinned":false,"hidden":false,"mode":"ojs"},{"id":1396,"value":"epsilon = 1e-6","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"mapstyles = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1703,"value":"plotstyles = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2334,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2049,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":4044,"value":"html`\n