2c:null 2d:["$","title",null,{"children":"Usamos la API | Julian Palacci | Observable"}] 32: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(); }33:[] 30:{"id":"a02c196e36e423d4","slug":"usamos-la-api","title":"Usamos la API","thumbnail":"07d4b0e425391f8bdf78cbde8b32e6ade5c9e8d19582e3ae32720f96e8ebd50f","access_level":"public","create_time":"$D2020-07-10T19:52:04.775Z","update_time":"$D2020-10-07T03:15:14.897Z","view_time":null,"first_public_time":"$D2020-07-10T19:52:19.155Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"8d8e76c624392d89","login":"jpalacci","name":"Julian Palacci","avatar_url":"https://avatars-next.observableusercontent.com/2734bb0a91c38bb5ac81490138a8af2b6daf3ef99f527e097f2c748049d8540e","tier":"starter_2024"},"version":159,"publish_version":159,"role":null,"authored":false,"authors":[{"type":"individual","id":"6616dae087cd2152","login":"jpalacci","name":"Julian Palacci","avatar_url":"https://avatars-next.observableusercontent.com/2734bb0a91c38bb5ac81490138a8af2b6daf3ef99f527e097f2c748049d8540e","tier":null}],"members":[{"type":"individual","id":"6616dae087cd2152","login":"jpalacci","name":"Julian Palacci","avatar_url":"https://avatars-next.observableusercontent.com/2734bb0a91c38bb5ac81490138a8af2b6daf3ef99f527e097f2c748049d8540e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Usamos la API","cells":[{"id":77,"value":"md`# Usamos la API`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"api_url = \"https://covid19api.it.itba.edu.ar/api/v1/\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"make_figure('Argentina', cases_per_day, width);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"cases_per_day = process_data(raw_cases_per_day)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"last_update = d3.json(api_url + 'last_update/').then(x => x.last_update)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"date_extent = [\"2020-03-01\", last_update]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"moment = require('moment')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"import {vl} from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"import { radio, select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"