30:T773,{ const line = vl.markLine({ interpolate: 'monotone' }).encode( vl .x() .fieldT('date') .timeUnit('utcyearmonthdate') .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('utcyearmonthdate') .title(null), vl .y() .fieldQ('argmax.mean') .axis(null) .title(null) ) .transform( vl.calculate('ceil(datum.mean)').as('mean_ceil'), vl.aggregate({ op: 'argmax', field: 'mean', as: 'argmax' }) ); const tick = text.markTick({ size: 10, xOffset: -4, align: 'right', fill: '#000' }); return vl .layer(line.markArea({ opacity: 0.2 }), line, text, tick) .width(165) .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 }, padding: { top: 5, right: 0, bottom: 5, left: 0 } }) .data( state_data .filter(d => d.total) .map(d => d.map(v => Object.assign({ state: d.state }, v))) .flat() ) .render(); }31:T55a,make_chart = (data, width, domain) => { const bars = vl.markBar({ opacity: 0.1 }).encode( vl .x() .fieldT('date') .timeUnit('utcyearmonthdate') .scale({ domain: date_extent.map(d3.utcFormat('%Y-%m-%d')) }) .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: 'red' }) ); // Push the line/area layers to the right edge of the bars (1 bandwidth) const xOffset = width / d3.timeDay.count(...date_extent); 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 / 5) .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(); }32:[] 2e:{"title":"COVID-19 Curves (U.S.)","cells":[{"id":273,"value":"md`# COVID-19 Curves (U.S.)\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"},{"id":1516,"value":"md`## State/Territory`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1859,"value":"viewof type = Inputs.radio(['cases', 'deaths'], {\n label: 'Type',\n value: 'cases',\n format: x => toPascalCase(x)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1931,"value":"md`## Total`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1511,"value":"make_figure('United States', us_data, width);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1201,"value":"viewof state = Inputs.select(\n Array.from(new Set(raw_state_data.map(d => d.state))).sort(),\n { value: 'California', label: 'Select State/Territory' }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1064,"value":"make_figure(active_state_data.state, active_state_data, width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1894,"value":"md`### Counties\n\n${(active_state_counties_data.length &&\n `The highest ${active_state_counties_data.length} counties in terms of **${type}** this past week in **${state}**.`) ||\n 'No counties to display.'}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2068,"value":"viewof selected_county = Inputs.select(\n active_state_counties_data.map(({ county }) => county).sort(),\n { value: 'Santa Barbara', label: 'Select County' }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2038,"value":"make_figure(\n selected_county,\n active_state_counties_data.find(({ county }) => county === selected_county),\n width\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2077,"value":"md`### Top counties`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1900,"value":"viewof county_scale_type = Inputs.radio(['shared', 'independent'], {\n label: 'Scale',\n value: 'shared',\n format: x => toPascalCase(x)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1504,"value":"{\n if (!active_state_counties_data.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(active_state_counties_data, d => d3.max(d, v => v[type]))]\n : undefined;\n\n return html`

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

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1541,"value":"md`## All States and Territories`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1908,"value":"viewof state_scale_type = Inputs.radio(['shared', 'independent'], {\n label: 'Scale',\n value: 'independent',\n format: x => toPascalCase(x)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1274,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":920,"value":"md`## Appendix`","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":true,"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":true,"hidden":false,"mode":"ojs"},{"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":true,"hidden":false,"mode":"ojs"},{"id":1492,"value":"us_data = process_data(\n d3\n .groups(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 }))\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1258,"value":"state_data = d3\n .groups(raw_state_data, d => d.state)\n .map(([, rows]) => process_data(rows))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2055,"value":"active_state_data = state_data.find(d => d.state === state)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1250,"value":"county_data = d3\n .groups(raw_county_data, d => d.county + d.state)\n .map(([, rows]) => process_data(rows))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1887,"value":"active_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":true,"hidden":false,"mode":"ojs"},{"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].setDate(extent[0].getDate() - 1);\n extent[1].setDate(extent[1].getDate() + 1);\n\n return extent;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1058,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"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":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2062,"value":"import { table } from '@gnestor/table'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1203,"value":"import { toPascalCase } from \"@gnestor/grants-utilities\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}