30:T6e3,{ 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: '#3580b1' }), ); 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: 'cases', as: 'mean' }) .groupby('state') .frame([-3, 3]), ) .resolve({ axis: { x: 'independent' }, scale: { y: 'shared' } }) .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:T53c,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('cases') .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: 'cases', 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 test","cells":[{"id":2144,"value":"md`# COVID test`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1541,"value":"md`## Cases by states and territories`","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":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['cases']),\n total: output[output.length - 1][`total_${'cases'}`],\n });\n\n ['date', 'cases', 'deaths'].forEach(key => delete output[key]);\n\n return output;\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":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":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1499,"value":"make_figure = async (title, data, width, domain) => html`

${title}

\n ${data.past_week.toLocaleString('en')} NEW ${'cases'.toUpperCase()} IN PAST WEEK
\n ${data.total.toLocaleString('en')} TOTAL ${'cases'.toUpperCase()}\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":"$W32","stdlib":"1","titling":"auto"}