31:Tc0f,map = { const map = d3.select(html``) const path = d3.geoPath() map.append('rect') .attr('x', 0) .attr('y', 0) .attr('width', mapSize.width) .attr('height', mapSize.height) .attr('fill', '#FFF') const recentCasesPerCapita = annotatedTownData .filter((d, $) => op.equal(d.Date, op.max(d.Date))) .select('Town', 'New Cases Per Capita', 'Cases Hidden') .objects() const townShapes = map.append('g') .selectAll() .data(topojson.feature(massCities, massCities.objects.towns).features) .join('path') .attr('d', path) // We define a function that colors the towns according to data objects passed in // We make this a reusable function so that we can call it later to dynamically update // the map const updateWithData = (data) => { townShapes.attr('fill', d => { const dataPoint = data.find(f => f.Town === d.properties.TOWN2) if (dataPoint === undefined) { console.warn(`Data point not found for town ${d.properties}`) return } if (dataPoint['Cases Hidden'] || isNaN(dataPoint['New Cases Per Capita'])) return noDataPattern.url() return perCapitaColorScale(dataPoint['New Cases Per Capita']) }) } updateWithData(recentCasesPerCapita) const townOutlines = map.append('g') .selectAll() .data(topojson.feature(massCities, massCities.objects.towns).features) .join('path') .attr('d', path) .attr('stroke', '#FFF') .attr('fill', 'none') map.call(noDataPattern) map.call( d3.zoom() .translateExtent([[0, 0], [mapSize.width, mapSize.height]]) .scaleExtent([1, 4]) .on('zoom', ({ transform }) => { townShapes.attr('transform', transform) townOutlines.attr('transform', transform) }) ) // Legend map.append('g') .attr('transform', `translate(20, ${mapSize.height - 100})`) .append(() => legend({ color: perCapitaColorScale, title: "Weekly new cases per 100k", tickFormat: d => d3.format('d')(d * 100000), width: 200, })) map.append('rect') .attr('x', 20) .attr('y', mapSize.height - 40) .attr('width', 15) .attr('height', 15) .attr('fill', noDataPattern.url()) map.append('text') .attr('x', 40) .attr('y', mapSize.height - 40 + 12) .attr('font-size', 11) .attr('font-family', 'sans-serif') .text('MA provides inexact counts for small towns with <5 cases, for confidentiality') // Interactivity const inputEvent = new CustomEvent('input') townShapes.on('mouseover', function (e) { d3.select(this).attr('opacity', 0.6) }) townShapes.on('mouseout', function (e) { d3.select(this).attr('opacity', 1) }) townShapes.on('click', function (e) { output.value = d3.select(this).data()[0].properties.TOWN2 output.dispatchEvent(inputEvent) }) const output = viewof selectedTown.bind( Object.assign(map.node(), { value: null, update: updateWithData }) ) return output }32:T712,townOutput = { if (!selectedTown) return html`` const townData = annotatedTownData .params({ selectedTown }) .filter((d, $) => d.Town === $.selectedTown) .objects() const mostRecent = townData.slice(-1)[0] let increaseText if (mostRecent['Increased By'] > 0.05) { increaseText = "Increasing" } else if (mostRecent['Increased By'] < -0.05) { increaseText = "Decreasing" } else if (mostRecent['Increased By'] === null) { increaseText = null } else { increaseText = "Steady" } return html`

${selectedTown} ${increaseText ? '(' + increaseText + ')' : ''}

Highlights

${townDetails(mostRecent)}

Remember: Testing capacity changes over time and case counts from last week are not directly comparable to case counts months ago.

Weekly New Cases Per 100k Population

${barChart(townData)}

Recent Weeks

${casesTable(townData)}

` }33:T4a8,annotatedTownData = townData // Add town pop data .join(massPopulations, ['Town', 'Town'], [aq.all(), ['Population']]) // Annotate rows with case counts suppressed (MA does this for small towns for privacy reasons) .derive({ 'Cases Hidden': d => d['Total Cases'] === '<5' ? true : false }) // Calculate change from previous week per town using a window function // If case counts are suppressed calculate new cases to be 0 .groupby('Town') .derive({ 'New Cases': aq.rolling( d => d['Cases Hidden'] ? 0 : d['Total Cases'] - op.lag(d['Total Cases'], 1) ), 'New Tests': aq.rolling( d => op.equal(op.lag(d['Total Tests'], 1, 0), null) ? null : d['Total Tests'] - op.lag(d['Total Tests'], 1, 0) ), 'Cases Suppressed': d => op.equal(d['Total Cases'], '<5') }) .derive({ 'Increased By': aq.rolling( d => d['New Cases'] && op.lag(d['New Cases'], 1) ? (d['New Cases'] - op.lag(d['New Cases'], 1, 0)) / op.lag(d['New Cases'], 1) : null ), 'New Cases Per Capita': d => d['New Cases'] / d['Population'], 'Positivity': d => d['New Cases'] && d['New Tests'] ? d['New Cases'] / d['New Tests'] : null }) .ungroup()34:T64d,barChart = data => { const dim = { width: 300, height: 150, top: 5, left: 40, bottom: 40, right: 20, } const casesFieldName = 'New Cases Per Capita' // 'New Cases' const timeScale = d3.scaleTime() .domain([ d3.min(data, d => d.Date), d3.max(data, d => d.Date) ]) .range([dim.left, dim.width - dim.right]) const caseScale = d3.scaleLinear() .domain([ 0, Math.max(0.003, d3.max(data, d => d[casesFieldName])) ]) .range([dim.height - dim.bottom, dim.top]) const leftAxis = d3.axisLeft(caseScale) .ticks(5) .tickFormat(d => d3.format('d')(d * 100000)) const bottomAxis = d3.axisBottom(timeScale) .tickFormat(d3.timeFormat('%b')) const chart = d3.select(svg``) chart.append('g') .attr('transform', `translate(${dim.left}, 0)`) .call(leftAxis) chart.append('g') .attr('transform', `translate(0, ${dim.height - dim.bottom})`) .call(bottomAxis) chart.append('g') .selectAll('rect') .data(data.filter(d => !isNaN(d[casesFieldName]))) .join('rect') .attr('x', d => timeScale(d3.timeWeek.offset(d.Date, -1)) + 1) .attr('y', d => caseScale(d[casesFieldName])) .attr('width', d => timeScale(d.Date) - timeScale(d3.timeWeek.offset(d.Date, -1)) - 2) .attr('height', d => dim.height - dim.bottom - caseScale(d[casesFieldName])) .attr('fill', d => perCapitaColorScale(d[casesFieldName])) const latest2 = data.slice(-2) chart.append('line') .attr('x1', ) return chart.node() }35:[{"id":"d4b6e9af02f11adcc739ba7c3efd95fcdb2158738ace1a34e96c392a3ebd4162160f1b961ab7145a8b058727ebded1207e90b69f84f8bc523c628c695422f46d","href":"https://static.observableusercontent.com/files/d4b6e9af02f11adcc739ba7c3efd95fcdb2158738ace1a34e96c392a3ebd4162160f1b961ab7145a8b058727ebded1207e90b69f84f8bc523c628c695422f46d","name":"MA-Town-Population-Estimates-July-2019.csv","type":"text/csv","lastModified":1605659882111.99,"size":5534},{"id":"bbe7c93899b9c3ba14929fb55b89869e2f8c54972d2e6fbcd98d6998d06d4203c04f00406df9cfed73f93f4f2d04a5a9ef30b413d824a38aabad4fb9faa52dc4","href":"https://static.observableusercontent.com/files/bbe7c93899b9c3ba14929fb55b89869e2f8c54972d2e6fbcd98d6998d06d4203c04f00406df9cfed73f93f4f2d04a5a9ef30b413d824a38aabad4fb9faa52dc4","name":"ma-towns-state-plane-topo-1.json","type":"application/json","lastModified":1605291402732.333,"size":9168288}] 2f:{"title":"Massachusetts Coronavirus Cases by Town","cells":[{"id":805,"value":"md`# Massachusetts Coronavirus Cases by Town`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`_Data is published [weekly on Thursdays](https://www.mass.gov/info-details/covid-19-response-reporting#covid-19-weekly-public-health-report-) and [manually aggregated by me](https://observablehq.com/@harrislapiroff/massachusetts-covid-data) (so there might be a delay). Most recent data is from the week ending on **${d3.utcFormat('%a %b %e, %Y')(townData.filter(d => op.equal(d.Date, op.max(d.Date))).objects()[0].Date)}**._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"viewof selectedDate = {\n const dates = annotatedTownData\n .groupby('Date')\n .rollup(d => op.unique('Date'))\n .objects()\n .map(d => d.Date)\n .slice(1)\n \n return Scrubber(\n dates,\n {\n autoplay: false,\n initial: dates.length - 1,\n format: d => d3.utcFormat('%a %b %e, %Y')(d),\n delay: 150,\n loopDelay: 2000,\n }\n )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"viewof selectedTown.bind(autoSelect({\n title: \"Town\",\n options: massCities.objects.towns.geometries.map(d => d.properties.TOWN2),\n description: \"Enter a town name to see details—or click on a town on the map\",\n value: selectedTown,\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"md`
\n***\n\n# Implementation\n\n## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":788,"value":"md`Load the data from my Google Sheet into an Arquero data table:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"townData = aq.fromCSV(await (await fetch(CORSPROXY + TOWN_CASES_CSV)).text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":793,"value":"md`Annotate the data with the following columns:\n\n* **Population:** population counts from the American Community Survey—joined from an uploaded CSV\n* **New Cases:** the difference between cases this week and cases last week\n* **New Tests:** the difference between tests this week and tests last week\n* **Cases Suppressed:** \\`true\\` if the **Total Cases** column is \\`\"<5\"\\`, indicating that the DPH has suppressed an exact case count\n* **Increased By:** percentage change in new cases this week versus last week\n* **New Cases Per Capita:** new cases divided by population\n* **Positivity:** new cases divided by new tests (note, this may be a mixed unit calculation)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"md`## Chart\n\nThe bulk of the charting code is in the cells at the top of the notebook, but a few reusable utilities and constants are defined here:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"mapSize = ({ width: 800, height: 500 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":515,"value":"// We use epsilon to guarantee that thresholds are inclusive on the top end\nperCapitaColorScale = d3.scaleThreshold()\n .domain([\n 0 + Number.EPSILON,\n 0.0001 + Number.EPSILON,\n 0.00025 + Number.EPSILON,\n 0.0005 + Number.EPSILON,\n 0.001 + Number.EPSILON,\n 0.002 + Number.EPSILON,\n ])\n .range(['#CED', '#BDC', '#FD4', '#FA0', '#F44', '#900', '#400'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":724,"value":"noDataPattern = textures.circles()\n .thicker()\n .complement()\n .size(10)\n .background(perCapitaColorScale(0))\n .fill('#FFF')","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"md`## Bar Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":813,"value":"casesTable = data => html`\n \n \n \n \n \n \n \n \n \n ${data.slice(-5).reverse().map(d => html`\n \n \n \n \n \n `)}\n \n

Week Ending On	7-Day Cases	New Cases per 100k
${d3.utcFormat('%x')(d.Date, -1)}	${d['New Cases']}	${d3.format('d')(d['New Cases Per Capita'] * 100000)}

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":836,"value":"townDetails = recentDatum => html`\n \n \n \n \n \n \n \n \n \n \n \n \n \n

Population	\n ${d3.format(',d')(recentDatum.Population)}\n
Total Cases	\n ${d3.format(',d')(recentDatum['Total Cases'])}\n
Total Tests	\n ${d3.format(',d')(recentDatum['Total Tests'])}\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":658,"value":"md`## Interactivity`","pinned":false,"hidden":false,"mode":"ojs"},{"id":881,"value":"md`This is a minimal view that we use to keep the map and town selector in sync. See [@mbostock/synchronized-views](https://observablehq.com/@mbostock/synchronized-views) for details.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"viewof selectedTown = new View(null)","pinned":true,"hidden":false,"mode":"ojs"},{"id":895,"value":"md`This cell monitors the \\`selectedDate\\` view and updates the map when it changes. We use this instead of Observable's native reactivity for performance and animation reasons. (This way we avoid redrawing the entire map every time \\`selectedDate\\` changes.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":898,"value":"mapUpdater = {\n const data = annotatedTownData\n .params({ selectedDate })\n .filter((d, $) => op.equal(d.Date, $.selectedDate))\n .select('Town', 'New Cases Per Capita', 'Cases Hidden')\n .objects()\n \n map.update(data)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"CORSPROXY = 'https://corsproxy.harrislapiroff.com/'","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"TOWN_CASES_CSV = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRUkAX8YSW1_d0lJ0G6OCqobcXGuriZfiBGs5warTyZQRAhvcG2BHOyZwklWKTzL9jbtPOeBOzOMJqq/pub?gid=956094840&single=true&output=csv'","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"massPopulations = aq.fromCSV(await FileAttachment(\"MA-Town-Population-Estimates-July-2019.csv\").text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"massCities = FileAttachment(\"ma-towns-state-plane-topo-1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"import { aq, op } from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":655,"value":"import { View } from '@mbostock/synchronized-views'","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"import {autoSelect} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":842,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"textures = require('textures')","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}