31:T470,viz = { const ctx = DOM.context2d(width, height); const path = d3.geoPath(null, ctx); const container = html`

${legend({ color: colorScaleThreshold, width: 200, height: 45, title: "Cumulative Coronavirus Cases", tickFormat: "," })} ${ctx.canvas} ${basemap}

`; ctx.clearRect(0, 0, width, height); curData.forEach(d => { const geojson = countyGeomLookUp.get(d.fips); if (geojson) { ctx.beginPath(); path(geojson); ctx.lineWidth = 0; ctx.fillStyle = colorScaleThreshold(d.cases); ctx.fill(); } }); return container; }32:[] 2f:{"title":"U.S. Coronavirus Cumulative Cases Animated Map","cells":[{"id":0,"value":"md`# U.S. Coronavirus Cumulative Cases Animated Map\n\nData sourced from the NY Times historic daily case counts, available on [Github](https://github.com/nytimes/covid-19-data). Note that this map shows raw counts and that a more \"correct\" way of showing the case count geographically as a choropleth map would be to show them as a per capita (n cases / 100k people).\n\n_Note: The map below may take a while to load._\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"viewof date = Scrubber(dates, {\n delay: 150,\n loopDelay: 1000,\n autoplay: true,\n format: formatDate\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"md`

${totalCases.toLocaleString()}\n
\nconfirmed Coronavirus case${\n totalCases > 1 ? \"s\" : \"\"\n} nationwide by ${formatDate(\n date\n)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"// see https://observablehq.com/@d3/color-schemes\ncolorScaleThreshold = d3\n .scaleThreshold()\n .domain([100, 1000, 10000, 100000])\n .range([\"#fee391\", \"#fec44f\", \"#fe9929\", \"#d95f0e\", \"#993404\"]) // color brewer yl-or-brwn","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"formatDate = date =>\n date.toLocaleString(\"en\", { month: \"long\", day: \"numeric\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"md`## Cases distribution\n\nThis chart plots the number of counties for each unique case count for the last date in the dataset. This is useful for getting a sense of the distribution of the data.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"casesDistributionChart = {\n const chart = d3.select(\n html``\n );\n\n chart\n .selectAll(\"circle\")\n .data(binnedByTotalCases)\n .join(\"circle\")\n .attr(\"cx\", ([k, v]) => xScale(k))\n .attr(\"cy\", ([k, v]) => yScale(v))\n .attr(\"fill\", \"steelblue\")\n .attr(\"r\", 2.5)\n .append(\"title\")\n .text(([k, v]) => `${k.toLocaleString()} has ${v} instances`);\n\n chart\n .append(\"g\")\n .attr(\"transform\", `translate(0, ${chartHeight - margin.bottom})`)\n .call(xAxis);\n\n chart\n .append(\"g\")\n .attr(\"transform\", `translate(${margin.left}, 0)`)\n .call(yAxis);\n\n return chart.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":385,"value":"chartHeight = 300","pinned":true,"hidden":false,"mode":"ojs"},{"id":240,"value":"margin = ({ top: 10, left: 36, bottom: 36, right: 24 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":234,"value":"xScale = d3\n .scaleLog()\n .base(2)\n .domain([1, d3.max(cases)])\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"xAxis = d3.axisBottom(xScale)","pinned":true,"hidden":false,"mode":"ojs"},{"id":378,"value":"yScale = d3\n .scaleLinear()\n .domain(d3.extent(binnedByTotalCases, ([k, v]) => v))\n .range([chartHeight - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":399,"value":"yAxis = d3.axisLeft(yScale)","pinned":true,"hidden":false,"mode":"ojs"},{"id":362,"value":"binnedByTotalCases = d3.rollups(\n grouped.get(datesExtent[1]),\n v => v.length,\n d => d.cases\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"md`### Non-Matching Rows\n\nRows that did not join to their county boundary equivalents. These appear to be U.S. territories or cases where the FIPS code is missing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"nonMatches = rows.filter(d => countyGeomLookUp.get(d.fips) === undefined)","pinned":true,"hidden":false,"mode":"ojs"},{"id":345,"value":"[...d3.group(nonMatches, d => d.fips).keys()]","pinned":true,"hidden":false,"mode":"ojs"},{"id":354,"value":"md`### Map Helpers\nData derived from other data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"totalCases = d3.sum(curData, d => d.cases)","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"curData = grouped.get(date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"maxNumCases = d3.max(cases)","pinned":true,"hidden":false,"mode":"ojs"},{"id":211,"value":"quantiles = [0, 0.25, 0.5, 0.75, 1].map(d => d3.quantile(cases, d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"datesExtent = d3.extent(dates)","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"dates = [...grouped.keys()]","pinned":true,"hidden":false,"mode":"ojs"},{"id":216,"value":"cases = rows.map(d => d.cases).sort()","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"// for joining covid cases to county geometries\ncountyGeomLookUp = new Map(\n topojson\n .feature(us, us.objects.counties)\n .features.map(({ id, ...rest }) => [id, rest])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"md`Note: \\`d3.group()\\` won't group on unique dates if they are date objects instead of strings. I assume this has something to do with Date objects are not primitive data types? Solve for this by first creating the grouped data, then converting the keys from strings to Date objects, then converting back to an ES6 Map. This prevents from having to duplicate the string -> date conversion elsewhere in the notebook.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"grouped = new Map(\n [...d3.group(rows, d => d.date)].map(([key, value]) => [new Date(key), value])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":483,"value":"rows = {\n const rows = await d3.csv(githubRawCsvUrl);\n rows.forEach(d => {\n d.cases = +d.cases;\n d.deaths = +d.deaths;\n });\n return rows;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":482,"value":"githubRawCsvUrl = \"https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-counties.csv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"height = 0.6256410256 * width","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"import { map as basemap, us } from \"@d3/u-s-map-canvas\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}