31:T537,makeChart = (data, width, domain) => { const bars = vl.markBar({ opacity: 0.1 }) .encode( vl.x() .fieldT('date') .scale({ domain: [startDate, endDate], 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(startDate), new Date(endDate)); 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","cells":[{"id":0,"value":"md`# COVID 19\nUtilizamos la API y el tutorial [de los alumnos del ITBA](https://observablehq.com/@jpalacci/usamos-la-api) y [el siguiente ejemplo](https://observablehq.com/@autopaideia/covid-19-curves-u-s )`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"md`Podemos filtrar para ver muertes o casos`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof type = radio({\n title: 'Filtrar',\n options: [\n { label: 'Muertes', value: 'deaths' },\n { label: 'Casos', value: 'cases' },\n ],\n value: 'deaths',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"md`## A nivel País (Argentina)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`Primero obtenemos de la API un json con la cantidad de casos y muertes por día, y cantidad de casos totales y muertes totales desde la fecha definida en la variable start_date hasta la última actualización de la API.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"md` Luego calculamos un indicador sobre el dataset.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"makeHtml('total deaths in the last 14 days', totalDeathsInLast14Days.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \".\"), width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"md`Graficamos a nivel país la cantidad de casos y fallecidos por día`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"makeFigure('Argentina', argProcessedDayData, width);","pinned":true,"hidden":false,"mode":"ojs"},{"id":407,"value":"viewof horizontalBar2 = vl.markBar()\n .title(\"Total Cases vs Total Deaths\")\n .data(u)\n .encode(\n vl.y().fieldO(\"range\").title(\" \"),\n vl.x().fieldQ(\"count\").title(\" \")\n )\n .render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"viewof horizontalBar = vl.markBar()\n .data(d)\n .encode(\n vl.y().fieldO(\"range\").title(\"Age Range\"),\n vl.x().fieldQ(\"count\").title(\"# of deaths\")\n )\n .title(\"Deaths by Age Range\")\n .render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"md`## A nivel provincia`","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"viewof selectedProvince = autoSelect({\n options: provinces,\n placeholder: \"Buscar una provincia Argentina\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"makeHtml('people under 35 used respirators all over the pandemic in this province', provinceYoungRespirators.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \".\"), width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"makeFigures(selectedProvince, provinceDayData, width);","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"viewof horizontalBarbis = vl.markBar()\n .data(e)\n .encode(\n vl.y().fieldO(\"range\").title(\"Age Range\"),\n vl.x().fieldQ(\"count\").title(\"# of deaths\")\n )\n .title(\"Deaths by Age Range\")\n .render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"api_url = \"https://covid19api.it.itba.edu.ar/api/v1/\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"startDate = \"2020-03-01\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"lastApiUpdate = d3.json(api_url + 'last_update/').then(x => x.last_update)","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"endDate = lastApiUpdate","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"argDayData = {\n let argDayData = []\n let response = await d3.json(api_url + 'summary/?classification=Confirmed&from=' + startDate + '&to=' + endDate)\n response.forEach(elem => {\n argDayData.push({'date': elem.fecha, 'cases': elem.casos, 'deaths': elem.muertes, 'total_cases': elem.casos_acum, 'total_deaths': elem.muertes_acum})\n })\n return argDayData\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import { radio, select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"totalDeathsInLast14Days = {\n let arr = []\n let firstIndex = argDayData.length -14\n let count = 0\n let i\n for(i = firstIndex ; i < argDayData.length; i++) {\n count += argDayData[i].deaths\n arr.push(argDayData[i])\n }\n return count\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":" makeHtml = async (title, data, width, domain) => html`

${data}

${title}

\n`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"argProcessedDayData = process_data(argDayData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"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":133,"value":" makeFigure = async (title, data, width, domain) => html`

${title}

\n ${data.total.toLocaleString('es')} TOTAL ${type.toUpperCase()}\n

\n ${await makeChart(data, width, domain)}\n`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"import {vl} from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"import {autoSelect} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"provinces = {\n let provs = []\n let response = await d3.json(api_url + '/provinces/')\n // return response\n // // print(response)\n response.forEach(elem => {\n provs.push(elem.province)\n })\n return provs\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"selectedProvinceSlug = {\n let slug\n let response = await d3.json(api_url + '/provinces/')\n // return response\n // // print(response)\n response.forEach(elem => {\n if(elem.province == selectedProvince) {\n slug = elem.slug\n }\n })\n return slug\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"provinceDayData = {\n let provDayData = []\n let response = await d3.json(api_url + '/province/' + selectedProvinceSlug + '/summary/?classification=confirmed&from='+ startDate + '&to=' + endDate)\n\n response.forEach(elem => {\n provDayData.push({'date': elem.fecha, 'cases': elem.casos, 'deaths': elem.muertes, 'total_cases': elem.casos_acum, 'total_deaths': elem.muertes_acum})\n })\n return provDayData\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"makeFigures = async (title, data, width, domain) => html`

${title}

\n \n

\n ${await makeChart(data, width, domain)}\n`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"provinceYoungRespirators = {\n let count = 0\n let response = await d3.json(api_url + '/province/' + selectedProvinceSlug + '/?respirator=true&from='+ startDate + '&to=' + endDate)\n\n response.forEach(elem => {\n if(elem.edad > 0 && elem.edad < 35) {\n count++\n }\n })\n \n return count\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"u = {\n let resp = []\n let totalDeaths = argDayData[argDayData.length - 1].total_deaths\n let totalCases = argDayData[argDayData.length - 1].total_cases\n resp.push({'range':'Total Deaths', 'count':totalDeaths})\n resp.push({'range':'Total Cases', 'count':totalCases})\n return resp\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"provsSlugs = {\n let slugs = []\n let response = await d3.json(api_url + '/provinces/')\n response.forEach(elem => {\n slugs.push(elem.slug)\n })\n return slugs\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"d = {\n let n0to10 = 0\n let n10to35 = 0\n let n35to50 = 0\n let n50to65 = 0\n let n75to120 = 0\n let i, j\n for(i = 0; i < provsSlugs.length ; i++){\n let response = await d3.json(api_url + '/province/' + provsSlugs[i] + '/?dead=true&from='+ startDate + '&to=' + endDate)\n response.forEach(elem => {\n if(elem.edad >= 0 && elem.edad < 10) {\n n0to10++\n }\n if(elem.edad >= 10 && elem.edad < 35) {\n n10to35++\n }\n if(elem.edad >= 35 && elem.edad < 50) {\n n35to50++\n }\n if(elem.edad >= 50 && elem.edad < 65) {\n n50to65++\n }\n if(elem.edad >= 75 && elem.edad < 120) {\n n75to120++\n }\n \n })\n }\n let resp = []\n resp.push({'range':'0 - 10', 'count':n0to10})\n resp.push({'range':'10 - 35', 'count':n10to35})\n resp.push({'range':'35 - 50', 'count':n35to50})\n resp.push({'range':'50 - 65', 'count':n50to65})\n resp.push({'range':'75 - 120', 'count':n75to120})\n\n return resp\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"e = {\n let n0to10 = 0\n let n10to35 = 0\n let n35to50 = 0\n let n50to65 = 0\n let n75to120 = 0\n let i, j\n let response = await d3.json(api_url + '/province/' + selectedProvinceSlug + '/?dead=true&from='+ startDate + '&to=' + endDate)\n response.forEach(elem => {\n if(elem.edad >= 0 && elem.edad < 10) {\n n0to10++\n }\n if(elem.edad >= 10 && elem.edad < 35) {\n n10to35++\n }\n if(elem.edad >= 35 && elem.edad < 50) {\n n35to50++\n }\n if(elem.edad >= 50 && elem.edad < 65) {\n n50to65++\n }\n if(elem.edad >= 75 && elem.edad < 120) {\n n75to120++\n }\n })\n \n let resp = []\n resp.push({'range':'0 - 10', 'count':n0to10})\n resp.push({'range':'10 - 35', 'count':n10to35})\n resp.push({'range':'35 - 50', 'count':n35to50})\n resp.push({'range':'50 - 65', 'count':n50to65})\n resp.push({'range':'75 - 120', 'count':n75to120})\n\n return resp\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}