31:T77b,todas = { 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(166) .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(); }32:T585,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'), vl.tooltip([vl.fieldT('date'), "deaths"])); 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(); }33:[] 2f:{"title":"COVID-19 Death Curves Spain","cells":[{"id":273,"value":"md`# COVID-19 Death Curves Spain\n\nForked from [Nick Bosman](https://observablehq.com/@autopaideia/covid-19-curves-u-s), adapted to Spain\n\nData [from Datadista](https://github.com/datadista/datasets).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2414,"value":"act = md`*Última actualización el ${date_extent[1].toLocaleString(\"es-ES\", {\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\"\n})}*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2212,"value":"viewof type = radio({\n title: 'Data',\n options: [{ label: 'Deaths', value: 'deaths' }],\n value: 'deaths'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1931,"value":"md`## Total nacional`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1511,"value":"España = make_figure('España', us_data, width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1516,"value":"md`## Comunidad Autónoma`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1201,"value":"viewof state = select({\n title: 'Seleciona Comunidad Autónoma',\n options: Array.from(new Set(ccaa_data.map(d => d.state))).sort(),\n value: 'Madrid'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1064,"value":"ccaa = make_figure(active_state_data.state, active_state_data, width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1541,"value":"md`## Todas las Comunidades Autónomas`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1908,"value":"viewof state_scale_type = radio({\n title: 'Escala',\n options: [\n { label: 'Compartida', value: 'shared' },\n { label: 'Individual', value: 'independent' }\n ],\n value: 'shared'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1274,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2520,"value":"md`---`","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(\n 'https://raw.githubusercontent.com/datadista/datasets/master/COVID%2019/ccaa_covid19_fallecidos_por_fecha_defuncion_nueva_serie_original.csv',\n d => {\n d.date = d.Fecha;\n d.deaths = d.Fallecidos;\n d.state = d.CCAA;\n\n return d;\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2195,"value":"ccaa_data = raw_state_data.filter(function(d) {\n return d.state != \"No consta\";\n})","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: +d.deaths,\n total_cases: +d.cases,\n total_deaths: d3.sum(data, d => 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(\n d3\n .groups(ccaa_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":false,"hidden":false,"mode":"ojs"},{"id":1258,"value":"state_data = d3\n .groups(ccaa_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":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":"$32","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.past_week.toLocaleString(\n 'es-ES'\n )} fallecidos en la última semana
\n ${data.total.toLocaleString('es-ES')} fallecidos en total\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":"$W33","stdlib":"1","titling":"auto"}