31:Ta19,{ const lines = vl .markLine({ strokeWidth: 2, opacity: 1, interpolate: 'monotone' }) .encode( vl .x() .fieldT('date') .timeUnit('utcyearmonthday') .scale({ domain: date_extent_two, paddingInner: 0.1, paddingOuter: 0 }) .axis({ tickCount: 'month', format: '%B', grid: false, tickSize: 6 }) .title(null), vl .y() .fieldQ('cases_rate') .scale({ width, nice: false }) .axis({ tickCount: 4, domain: false, ticks: false, labelAlign: 'left', labelBaseline: 'bottom' }) .title('Cases Per Capita'), vl .color() .fieldN('county') .legend(null), vl.tooltip().fieldN('county'), vl.text('county') ); const rule_1 = vl .markRule() .data( vl.json().values({ stay_at_home: '2020-04-03' }) ) .encode(vl.x().fieldT('stay_at_home')); const label_1 = vl .markText({ xOffset: '-55', yOffset: "-215" }) .data( vl.json().values({ label_1: 'Stay At Home Order', stay_at_home: '2020-04-03' }) ) .encode(vl.text().fieldN('label_1'), vl.x().fieldT('stay_at_home')); const rule_2 = vl .markRule() .data( vl.json().values({ restrictions_lifted: '2020-05-22' }) ) .encode(vl.x().fieldT('restrictions_lifted')); const label_2 = vl .markText({ xOffset: '-55', yOffset: "-215" }) .data( vl.json().values({ label_2: 'Restrictions Lifted' }) ) .encode(vl.text().fieldN('label_2'), vl.x().fieldT('restrictions_lifted')); const rule_3 = vl .markRule() .data( vl.json().values({ first_rally: '2020-05-30' }) ) .encode(vl.x().fieldT('first_rally')); const label_3 = vl .markText({ xOffset: '-55', yOffset: "-215" }) .data( vl.json().values({ label_3: 'First George Floyd Rally' }) ) .encode(vl.text().fieldN('label_3'), vl.x().fieldT('first_rally')); return ( vl .layer(lines, rule_1, label_1, rule_2, label_2, rule_3, label_3) .data(al_county_comparative) // .transform(vl.filter('datum.past_week > 200')) .width(width) .height(width / 2) .autosize({ type: 'fit-x', contains: 'padding' }) .config({ style: { cell: { stroke: 'transparent' } }, axis: { labelColor: '#929292', gridColor: '#ececec', title: null }, padding: { top: 5, right: 5, bottom: 5, left: 5 } }) .render() ); }32:T99c,{ const hover = vl .selectSingle() .encodings('x') // limit selection to x-axis value .on('mouseover') // select on mouseover events .nearest(true) // select data point nearest the cursor .empty('none'); // empty selection includes no data points const lines = vl .markLine({ strokeWidth: 2, opacity: 0.5, interpolate: 'monotone' }) .encode( vl .x() .fieldT('date') .timeUnit('utcyearmonthday') .scale({ domain: date_extent_two, paddingInner: 0.1, paddingOuter: 0 }) .axis({ tickCount: 'month', format: '%B', grid: false, tickSize: 6 }) .title(null), vl .y() .fieldQ('cases_rate') .scale({ width, nice: false }) .axis({ tickCount: 4, domain: false, ticks: false, labelAlign: 'left', labelBaseline: 'bottom' }) .title('Cases Per Capita'), vl .color() .fieldN('county') .legend(null) // vl.size().fieldQ('population') ); // shared base for new layers, filtered to hover selection const base = lines.transform(vl.filter(hover)); // mark properties for text label layers const label = { align: 'left', dx: 5, dy: -5 }; const white = { stroke: 'white', strokeWidth: 2 }; return vl .layer( lines, // add a rule mark to serve as a guide line vl .markRule({ color: '#aaa' }) .transform(vl.filter(hover)) .encode(vl.x().fieldT('date')), // add circle marks for selected time points, hide unselected points lines .markCircle() .select(hover) // use as anchor points for selection .encode( vl .opacity() .if(hover, vl.value(1)) .value(0) ), // add white stroked text to provide a legible background for labels base.markText(label, white).encode(vl.text().fieldN('county')), // add text labels for stock prices base.markText(label).encode(vl.text().fieldN('county')) ) .data(al_county_comparative) .transform(vl.filter('datum.past_week > 200')) .width(width) .height(width / 1.5) .autosize({ type: 'fit-x', contains: 'padding' }) .config({ style: { cell: { stroke: 'transparent' } }, axis: { labelColor: '#929292', gridColor: '#ececec', title: null }, padding: { top: 5, right: 5, bottom: 5, left: 5 } }) .render(); }33:T88d,make_chart = (data, width, domain) => { // const hover = vl // .selectSingle() // .on('mouseover') // select on mouseover events // // .nearest(true) // select data point nearest the cursor // .empty('none'); // empty selection includes no data points // // .properties(type); const rule_1 = vl .markRule() .data( vl.json().values({ rally: '2020-05-30' }) ) .encode(vl.x().fieldT('rally')); const label_1 = vl .markText({ xOffset: '-55', yOffset: "-150" }) .data( vl.json().values({ label: 'First George Floyd Rally', rally: '2020-05-30' }) ) .encode(vl.text().fieldN('label'), vl.x().fieldT('rally')); const bars = vl.markBar({ opacity: 0.1 }).encode( vl .x() .fieldT('date') .timeUnit('utcyearmonthday') .scale({ domain: date_extent_two, paddingInner: 0.1, paddingOuter: 0 }) .axis({ tickCount: 'month', format: '%B', grid: false, tickSize: 6 }) .title(null), vl .y() .fieldQ(type) .scale({ domain, nice: false }) .axis({ tickCount: 4, domain: false, ticks: false, labelAlign: 'left', labelBaseline: 'bottom' }) .title(null), vl.color({ value: 'blue' }), vl.tooltip([vl.fieldT('date'), 'cases', 'deaths']) ); // Push the line/area layers to the right edge of the bars (1 bandwidth) const xOffset = width / d3.timeDay.count( new Date(date_extent_two[0]), new Date(date_extent_two[1]) ); const line = bars .markLine({ interpolate: 'monotone', xOffset }) .encode(vl.y().fieldQ('mean')); const area = line.markArea({ opacity: 0.2, xOffset }); return vl .layer(bars, area, line) .data(data) .transform( vl.window({ op: 'mean', field: type, as: 'mean' }).frame([-3, 3]) ) .width(width) .height(width / 3) .autosize({ type: 'fit-x', contains: 'padding' }) .config({ style: { cell: { stroke: 'transparent' } }, axis: { labelColor: '#929292', gridColor: '#ececec', title: null }, padding: { top: 5, right: 5, bottom: 5, left: 5 } }) .render(); }34:T4ff,process_data = data => { const output = data.map((d, i) => ({ date: d.date, cases: Math.max(d.cases - (data[i - 1] ? data[i - 1].cases : 0), 0), deaths: Math.max(d.deaths - (data[i - 1] ? data[i - 1].deaths : 0), 0), total_cases: +d.cases, total_deaths: +d.deaths, population: +d.population, cases_rate: +( (Math.max(d.cases - (data[i - 1] ? data[i - 1].cases : 0), 0) / d.population) * 100000 ).toFixed(2), deaths_rate: +( (Math.max(d.deaths - (data[i - 1] ? data[i - 1].deaths : 0), 0) / d.population) * 100000 ).toFixed(2) })); // The line/area will be shifted to the right by one band, so prepend // a placeholder value with 0 to the left to make up for it const dayBefore = new Date(output[0].date); dayBefore.setDate(dayBefore.getDate() - 1); output.unshift({ date: d3.utcFormat('%Y-%m-%d')(dayBefore), cases: 0, deaths: 0, total_cases: 0, total_deaths: 0, population: 0, cases_rate: 0, deaths_rate: 0 }); Object.assign(output, data[0], { past_week: d3.sum(output.slice(-7), d => d[type]), total: output[output.length - 1][`total_${type}`] }); ['date', 'cases', 'deaths'].forEach(key => delete output[key]); return output; }35:[{"id":"4b5cf9be9d33ee1c39c06f6a2cc50f14331c325c825621b2b0c93b6c61bddf30a371100505b1cb8e9c82a942da101f5f23d992b7c02a5a3a839bab65d76acd05","href":"https://static.observableusercontent.com/files/4b5cf9be9d33ee1c39c06f6a2cc50f14331c325c825621b2b0c93b6c61bddf30a371100505b1cb8e9c82a942da101f5f23d992b7c02a5a3a839bab65d76acd05","name":"data@5.csv","type":"text/csv","lastModified":1590540844881.081,"size":1575},{"id":"315aa0f1d175c7ca0847b9b1b1ee1617d4da0943e1cc2985fb400ce10b7d5a41e82b9d944fc2559f985302766284880ab62bcf2aa1cd26c4d999147eeec0b66e","href":"https://static.observableusercontent.com/files/315aa0f1d175c7ca0847b9b1b1ee1617d4da0943e1cc2985fb400ce10b7d5a41e82b9d944fc2559f985302766284880ab62bcf2aa1cd26c4d999147eeec0b66e","name":"data@4.csv","type":"text/csv","lastModified":1590501184515.223,"size":1546}] 2f:{"title":"Is Alabama Poised For A Second Wave?","cells":[{"id":273,"value":"intro = md`# Is Alabama Poised For A Second Wave?\n\nInteractive Alabama-based versions of the [charts](https://www.nytimes.com/interactive/2020/03/19/world/coronavirus-flatten-the-curve-countries.html) in the *New York Time's* \"Which Country Has Flattened\nthe Curve?\" article. The bars represent the actual number of new *${type}* reported per day, while the line is a seven-day moving average to help smooth out the day-to-day anomolies and reveal the overall trend.\n\nData from [The New York Times](https://github.com/nytimes/covid-19-data) & the [US Census](https://www.census.gov/developers/).\n\n*Last updated ${d3.utcFormat('%B %e, %Y')(\n new Date(d3.max(us_data, d => d.date))\n)}*.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1859,"value":"viewof type = radio({\n title: 'Type',\n options: [\n { label: 'Cases', value: 'cases' },\n { label: 'Deaths', value: 'deaths' }\n ],\n value: 'cases'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1064,"value":"state_figure = {\n return make_figure(al_state_grouped.state, al_state_grouped, width);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2796,"value":"more = md`As you can readily see, Alabama's total *cases* continues to rise. This may be due to the relatively short duration of the state's shelter-in-place order. Alabama's order was implemented later than many states and revoked among the earliest.\n\nThankfully, Alabama's *deaths* seem to be trending downward for the time being. The total deaths also have remained low per capita.\n\nWe can also look at Alabama's data on a county-by-county basis for a more complete picture.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2603,"value":"viewof county = select({\n title: 'Select County',\n options: Array.from(new Set(al_county_data.map(d => d.county))).sort(),\n value: 'Jefferson'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2607,"value":"county_figure = make_figure(\n county,\n al_county_grouped.find(d => d.county === county),\n width\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1894,"value":"further = md`This can be helpful, espeically for people who want to see trends in their local area. But the best way to see the full picture may be side-by-side comparison.\n\n${(al_county_grouped.length &&\n `Here are all ${al_county_grouped.length} counties in Alabama, sorted by highest *${type}* this past week.`) ||\n 'No counties to display.'}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1900,"value":"viewof county_scale_type = radio({\n title: 'Y-Axis Scale',\n options: [\n { label: 'Independent', value: 'independent' },\n { label: 'Shared', value: 'shared' }\n ],\n value: 'independent'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1504,"value":"figureTwo = {\n if (!al_county_grouped.length) return md``;\n\n const figureWidth = width > 500 ? width / 2 : width;\n\n const domain =\n county_scale_type === 'shared'\n ? [0, d3.max(al_county_grouped, d => d3.max(d, v => v[type]))]\n : undefined;\n\n return html`

${await Promise.all(\n al_county_grouped.map(data =>\n make_figure(data.county, data, figureWidth, domain)\n )\n )}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2816,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2964,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":3116,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":920,"value":"md`## Appendix & Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1197,"value":"raw_state_data = d3.csv('https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv')","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"raw_county_data = d3.csv('https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-counties.csv')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2514,"value":"popByCounty = new Map(\n d3\n .csvParse(await FileAttachment(\"data@5.csv\").text(), d3.autoType)\n .map(d => [d.county, { growth: d.growth, pop: d.population }])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2922,"value":"pastWeek = new Map(al_county_grouped.map(d => [d.county, d.past_week]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2512,"value":"al_county_data = raw_county_data\n .filter(a => a.state === \"Alabama\")\n .filter(d => d.county !== 'Unknown')\n .filter(d => d.county !== 'District of Columbia')\n .map(d => ({\n ...d,\n population: popByCounty.get(d.county).pop\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1250,"value":"al_county_grouped = Array.from(\n d3.group(al_county_data, d => d.county + d.state)\n)\n .map(([, rows]) => process_data(rows))\n // .filter(d => d.total)\n .sort((a, b) => d3.descending(a.past_week, b.past_week))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2862,"value":"al_county_comparative = al_county_data.map(d => ({\n ...d,\n cases_rate: +((d.cases / popByCounty.get(d.county).pop) * 100000).toFixed(2),\n past_week: +(\n (pastWeek.get(d.county) / popByCounty.get(d.county).pop) *\n 100000\n ).toFixed(2)\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":858,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1492,"value":"us_data = process_data(Array.from(d3.group(raw_state_data, d => d.date))\n .map(([date, data]) => ({\n date,\n cases: d3.sum(data, d => d.cases),\n deaths: d3.sum(data, d => d.deaths),\n })))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1258,"value":"al_state_data = raw_state_data\n .filter(d => d.state === 'Alabama')\n .map(d => ({\n ...d,\n population: popByCounty.get(\"Alabama\").pop\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2681,"value":"al_state_grouped = Array.from(\n d3.group(al_state_data, d => d.county + d.state)\n).map(([, rows]) => process_data(rows))[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"date_extent = {\n const extent = d3.extent(al_county_data, d => d.date).map(d => new Date(d));\n extent[0].setDate(extent[0].getDate() - 1);\n extent[1].setDate(extent[1].getDate() + 1);\n\n return extent;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2951,"value":"date_extent_two = {\n const extent = d3.extent(al_county_data, d => d.date).map(d => new Date(d));\n\n return [\n new Date('2020-03-01'),\n new Date(extent[1].setDate(extent[1].getDate() + 1))\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1499,"value":"make_figure = async (\n title,\n data,\n width,\n domain\n) => html`

${title}

${\n data.population !== undefined ? data.population.toLocaleString('en') : 0\n } Residents

\n ${data.past_week.toLocaleString(\n 'en'\n )} NEW ${type.toUpperCase()} IN PAST WEEK
\n ${((data.total / data.population) * 100000)\n .toFixed(0)\n .toLocaleString('en')} TOTAL ${type.toUpperCase()} PER 100,000\n

\n ${await make_chart(data, width, domain)}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"import {vl} from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1203,"value":"import { radio, select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}