2f:T6e4,{ 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(); }30:T536,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(); }31:[] 2d:{"title":"Great use and mastery of vega-lite","cells":[{"id":273,"value":"md`# Great use and mastery of vega-lite\n\n# 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":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":1931,"value":"md`## Total`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1511,"value":"make_figure('United States', us_data, width);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1516,"value":"md`## State/Territory`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1201,"value":"viewof state = select({\n title: 'Select State/Territory',\n options: Array.from(new Set(raw_state_data.map(d => d.state))).sort(),\n value: 'New York',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1064,"value":"make_figure(active_state_data.state, active_state_data, width)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1894,"value":"md`### Counties\n\n${active_state_counties_data.length && `The highest ${Math.min(active_state_counties_data.length, 6)} counties in terms of **${type}** this past week in **${state}**.` || 'No counties to display.'}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1900,"value":"viewof county_scale_type = radio({\n title: 'Scale',\n options: [\n { label: 'Shared', value: 'shared' },\n { label: 'Independent', value: 'independent' },\n ],\n value: 'shared',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1504,"value":"{\n if (!active_state_counties_data.length) return html``;\n\n const counties = active_state_counties_data.slice(0, 6);\n const figureWidth = width > 500 ? width / 2 : width;\n\n const domain = county_scale_type === 'shared'\n ? [0, d3.max(counties, d => d3.max(d, v => v[type]))]\n : undefined;\n\n return html`

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

`;\n}","pinned":true,"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 = 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"},{"id":1274,"value":"$2f","pinned":true,"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":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":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"},{"id":1492,"value":"us_data = process_data(d3.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 })))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1258,"value":"state_data = d3.groups(raw_state_data, d => d.state)\n .map(([, rows]) => process_data(rows))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2069,"value":"active_state_data = state_data.find(d => d.state === state)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1250,"value":"county_data = d3.groups(raw_county_data, d => d.county + d.state)\n .map(([, rows]) => process_data(rows))","pinned":false,"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":false,"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":false,"hidden":false,"mode":"ojs"},{"id":1058,"value":"$30","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":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":"$W31","stdlib":"1","titling":"auto"}