31:T53a,make_chart = (data, width, domain) => { const bars = vl.markBar({ opacity: 0.1 }) .encode( vl.x() .fieldT('date') .scale({ domain: date_extent, paddingInner: 0.1, paddingOuter: 0 }) .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(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 / 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:[] 2f:{"title":"COVID-19 cases in Argentina","cells":[{"id":77,"value":"# COVID-19 ${type} in Argentina\n\n> Arregle el ejemplo de [Julian Palacci](https://observablehq.com/@jpalacci) que había dejado de funcionar, el trabajo esta en esta [url](https://observablehq.com/@jpalacci/usamos-la-api).\n\n> A su vez, Julian se habia inspirado en el trabajo de [Nick Bosman](https://observablehq.com/@autopaideia) https://observablehq.com/@autopaideia/covid-19-curves-u-s y Nick Bosman, tomo algunas ideas de [este articulo del NYTimes]( https://www.nytimes.com/interactive/2020/03/19/world/coronavirus-flatten-the-curve-countries.html)\n\n>Por otro lado, estoy comparando los datos oficiales del ministerio de salud con los de Our World In Data","pinned":false,"hidden":false,"mode":"md"},{"id":115,"value":"viewof type = Inputs.radio([\"cases\", \"deaths\"], {\n value: \"deaths\",\n label: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"make_figure(\"Argentina (datos oficiales - MSAL)\", cases_per_day, width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"____\n### Appendix\n\nhttps://covid19api.it.itba.edu.ar/api/v0.4.0/swagger/","pinned":false,"hidden":false,"mode":"md"},{"id":63,"value":"api_url = \"https://covid19api.it.itba.edu.ar/api/v0.4.0/\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"last_update = d3.json(api_url + 'last_update/').then(x => x.last_update)","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"date_extent = [\"2020-03-01\", last_update]","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"process_data = (data) => {\n const output = data.map((d, i) => ({\n date: d.date,\n cases: d.cases,\n deaths: d.deaths,\n total_cases: d.total_cases,\n total_deaths: d.total_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":395,"value":"cases_per_day = {\n let data = await d3.json(\n api_url +\n \"summary/?classification=confirmed&from=\" +\n date_extent[0] +\n \"&to=\" +\n date_extent[1]\n );\n let raw_cases_per_day = data.map((d) => ({\n date: d.fecha,\n cases: +d.casos,\n deaths: +d.muertes,\n total_cases: +d.casos_acum,\n total_deaths: +d.muertes_acum\n }));\n\n return process_data(raw_cases_per_day);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"moment = require('moment')","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"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"},{"id":267,"value":"// old URL\n// owid = d3.csv(\"https://covid.ourworldindata.org/data/owid-covid-data.csv\")\n\n// new URL\n// owid = d3.csv(\"https://catalog.ourworldindata.org/garden/covid/latest/compact/compact.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"// owid_selected = owid.filter((d) => d.country == country_selected && d.total_cases > 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"// owid_casos_por_dia = owid_selected.map((d) => ({\n// date: new Date(d.date),\n// cases: +d.new_cases,\n// deaths: +d.new_deaths,\n// total_cases: +d.total_cases,\n// total_deaths: +d.total_deaths\n// }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"// viewof country_selected = Inputs.select([...new Set(owid.map((d) => d.country))],{ value: \"Argentina\", label: \"Country (OWID)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"// make_figure(country_selected + \" (Our World in Data)\", process_data(owid_casos_por_dia), width)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}