2c:null 2d:["$","title",null,{"children":"COVID-19 Curves (U.S.) | Frank Brill | Observable"}] 32:T6b2,{ const line = vl.markLine({ interpolate: 'monotone' }) .encode( vl.x() .fieldT('date') .timeUnit('utcyearmonthday') .axis({ tickCount: 'month', format: '%b.', grid: false, tickSize: 6, labelColor: '#929292' }) .title(null), vl.y() .fieldQ('mean') .axis(null) .scale({ nice: false }) .title(null), vl.color({ value: 'red' }), ); const text = vl.markText({ align: 'right', dx: -13, dy: -4, baseline: 'top', fontSize: 9 }) .encode( vl.text() .fieldQ('argmax.mean_ceil') .format(',d'), vl.x() .fieldT('argmax.date') .timeUnit('yearmonthday') .title(null), vl.y() .fieldQ('argmax.mean') .axis(null) .title(null), ) .transform( vl.calculate().as('mean_ceil').calculate('ceil(datum.mean)'), vl.aggregate({ op: 'argmax', field: 'mean', as: 'argmax' }), ); const tick = text.markTick({ size: 10, xOffset: -5, align: 'right', fill: '#000' }); return vl.layer(line.markArea({ opacity: 0.2 }), line, text, tick) .width(168) .height(100) .facet(vl.facet().fieldN('state').title(null)) .columns(5) .transform( vl.window({ op: 'mean', field: type, as: 'mean' }) .groupby('state') .frame([-3, 3]), ) .resolve({ axis: { x: 'independent' }, scale: { y: state_scale_type } }) .config({ style: { cell: { stroke: 'transparent' } }, header: { labelFontSize: 14, labelPadding: 0 }, }) .data(state_data .filter(d => d.total) .map(d => d.map(v => Object.assign({ state: d.state }, v))) .flat()) .render(); }33:T586,make_chart = (data, width, domain) => { const bars = vl.markBar({ opacity: 0.1 }) .encode( vl.x() .fieldT('date') .timeUnit('utcyearmonthday') .scale({ domain: date_extent, paddingInner: 0.1, paddingOuter: 0 }) .axis({ tickCount: 'month', format: '%B', grid: false, tickSize: 6, labelFontSize: 16 }) .title(null), vl.y() .fieldQ(type) .scale({ domain, nice: false }) .axis({ tickCount: 4, domain: false, ticks: false, labelAlign: 'left', labelBaseline: 'bottom', labelFontSize: 16 }) .title(null), vl.color({ value: 'red' }), ); // Push the line/area layers to the right edge of the bars (1 bandwidth) const xOffset = width / d3.timeDay.count(new Date(date_extent[0]), new Date(date_extent[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 / 2) .autosize({ type: 'fit-x', contains: 'padding' }) .config({ style: { cell: { stroke: 'transparent' } }, axis: { labelColor: '#929292', gridColor: '#ececec' }, padding: { top: 5, right: 0, bottom: 5, left: 0 }, }) .render(); }34:[] 30:{"id":"1f2c2578bad9d6cc","slug":"covid-19-curves-u-s","title":"COVID-19 Curves (U.S.)","thumbnail":"2167d9a398f14b3dc9a32bc7f1b6f7504ba92ee8c85adadc5fd0e8c6c9da37d6","access_level":"public","create_time":"$D2020-06-20T01:35:24.271Z","update_time":"$D2020-08-29T06:00:05.060Z","view_time":null,"first_public_time":"$D2020-06-30T04:38:50.169Z","has_unpublished_edits":null,"fork":{"id":"6abf0ed1e76ab124","slug":"covid-19-curves-u-s","title":"COVID-19 Curves (U.S.)","owner":{"id":"71e001d943b9a4ca","login":"autopaideia","name":"Nick Bosman"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a7265f15a463bb4e","login":"fzbrill","name":"Frank Brill","avatar_url":"https://avatars-next.observableusercontent.com/0e3f6e1dd86972d89c2f40563613016ae4bd0cc7ac0c84de82cfae5be7b2e7d2","tier":"starter_2024","bio":""},"version":2199,"publish_version":2199,"role":null,"authored":false,"authors":[{"type":"individual","id":"601a3020bc1007fe","login":"fzbrill","name":"Frank Brill","avatar_url":"https://avatars-next.observableusercontent.com/0e3f6e1dd86972d89c2f40563613016ae4bd0cc7ac0c84de82cfae5be7b2e7d2","tier":null,"bio":""}],"members":[{"type":"individual","id":"601a3020bc1007fe","login":"fzbrill","name":"Frank Brill","avatar_url":"https://avatars-next.observableusercontent.com/0e3f6e1dd86972d89c2f40563613016ae4bd0cc7ac0c84de82cfae5be7b2e7d2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"COVID-19 Curves (U.S.)","cells":[{"id":273,"value":"md`# COVID-19 Curves (U.S.)\n\nModified slightly https://observablehq.com/@autopaideia.\n\nInteractive U.S.-based versions of [the charts in this article](https://www.nytimes.com/interactive/2020/03/19/world/coronavirus-flatten-the-curve-countries.html). 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).\n\n*Last updated ${d3.utcFormat('%B %e, %Y')(new Date(d3.max(us_data, d => d.date)))}*.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1931,"value":"md`## Total`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1511,"value":"make_figure('United States', us_data, width);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2188,"value":"md`## Large States`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2190,"value":"{\n const large_states = [\"New York\", \"California\", \"Florida\", \"Texas\"];\n \n return html`

${\n await Promise.all(large_states.map(s => make_figure(s, state_data.find(d => d.state === s), width/4, [0, 15000])))\n }

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

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1541,"value":"md`## All States and Territories`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1908,"value":"viewof state_scale_type = radio({\n title: 'Scale',\n options: [\n { label: 'Shared', value: 'shared' },\n { label: 'Independent', value: 'independent' },\n ],\n value: 'independent',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1274,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":920,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"process_data = data => {\n const output = data.map((d, i) => ({\n date: d.date,\n cases: Math.max(d.cases - (data[i - 1] ? data[i - 1].cases : 0), 0),\n deaths: Math.max(d.deaths - (data[i - 1] ? data[i - 1].deaths : 0), 0),\n total_cases: +d.cases,\n total_deaths: +d.deaths,\n }));\n\n // The line/area will be shifted to the right by one band, so prepend\n // a placeholder value with 0 to the left to make up for it\n const dayBefore = new Date(output[0].date);\n dayBefore.setDate(dayBefore.getDate() - 1);\n\n output.unshift({\n date: d3.utcFormat('%Y-%m-%d')(dayBefore),\n cases: 0,\n deaths: 0,\n total_cases: 0,\n total_deaths: 0,\n });\n\n Object.assign(output, data[0], {\n past_week: d3.sum(output.slice(-7), d => d[type]),\n total: output[output.length - 1][`total_${type}`],\n });\n\n ['date', 'cases', 'deaths'].forEach(key => delete output[key]);\n\n return output;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1258,"value":"state_data = Array.from(d3.group(raw_state_data, d => d.state))\n .map(([, rows]) => process_data(rows))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1250,"value":"county_data = Array.from(d3.group(raw_county_data, d => d.county + d.state))\n .map(([, rows]) => process_data(rows))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1887,"value":"state_counties_data = county_data\n .filter(d => d.state === state)\n .filter(d => d.total)\n .filter(d => d.county !== 'Unknown')\n .filter(d => d.county !== 'District of Columbia')\n // .filter(d => d.past_week > 100)\n .sort((a, b) => d3.descending(a.past_week, b.past_week))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":909,"value":"date_extent = {\n const extent = d3.extent(raw_state_data, d => d.date)\n .map(d => new Date(d));\n extent[0] = new Date(\"2020-03-01\"); // hack the date to May 1st\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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2044,"value":"county_plot_num = 6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1058,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1499,"value":"make_figure = async (title, data, width, domain) => html`

${title}

\n ${data.past_week.toLocaleString('en')} NEW ${type.toUpperCase()} IN PAST WEEK
\n ${data.total.toLocaleString('en')} TOTAL ${type.toUpperCase()}\n

\n ${await make_chart(data, width, domain)}\n`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"import {vl} from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1203,"value":"import { radio, select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"