30: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(); }31:[] 2e:{"title":"Usamos la API","cells":[{"id":77,"value":"md`# Usamos la API`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"api_url = \"https://covid19api.it.itba.edu.ar/api/v1/\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"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":43,"value":"make_figure('Argentina', cases_per_day, width);","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":82,"value":"cases_per_day = process_data(raw_cases_per_day)","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"raw_cases_per_day = {\n let raw_cases_per_day = []\n let start_date = moment(date_extent[0])\n let end_date = moment(date_extent[1])\n let response = await d3.json(api_url + 'summary/?classification=Confirmed&from=' + date_extent[0] + '&to=' + date_extent[1])\n response.forEach(elem => {\n raw_cases_per_day.push({'date': elem.fecha, 'cases': elem.casos, 'deaths': elem.muertes, 'total_cases': elem.casos_acum, 'total_deaths': elem.muertes_acum})\n \n })\n return raw_cases_per_day\n \n}\n\n\n","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":15,"value":"moment = require('moment')","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$30","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":9,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"import {vl} from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"import { radio, select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}