31:T921,vlChart = { let data = countsByDate.filter(d => d.value > 0); const maxDateWithValue = new Date(currentDate); const aWeekBeforeMax = maxDateWithValue - 7 * 24 * 3600000; const thresholdBeforeMax = maxDateWithValue - threeshold * 24 * 3600000; data = countsByDate.map(d => ({ ...d, Confiabilidad: d.key < thresholdBeforeMax ? 1 : (maxDateWithValue - d.key) / (threeshold * 24 * 3600000) / 2 })); const gridCondition = { condition: { test: "+timeFormat(datum.value, '%d') <= 7", value: [] }, value: [1, 5] }; const base = vl.markBar({ tooltip: true }).encode( vl .x() .fieldT("key") .timeUnit("yearmonthdate") .title(datesLabels[attrSelected]) .axis({ gridDash: gridCondition, tickCount: "week", tickDash: gridCondition, labelAlign: "left", labelExpr: "[timeFormat(datum.value, '%d'), +timeFormat(datum.value, '%d') <= 7 ? timeFormat(datum.value, '%b') : '']", labelOffset: 4, labelPadding: -24, tickSize: 30 }), vl .y() .fieldQ("value") .title("Casos Reportados") .scale({ domainMin: 0 }) .axis({ tickMinStep: 100, gridDash: { condition: { test: "datum.value % 1000==0", value: [] }, value: [2, 10] } }), vl .opacity() .fieldQ("Confiabilidad") .scale({ domain: [0, 1], range: [0, 1] }) .legend( width > 600 ? { format: "%", symbolFillColor: "steelblue", symbolStrokeColor: "steelblue" } : null ) ); const bar = base.encode( vl .color() .fieldQ("value") .title("Casos Reportados") .legend(width > 600) .scale({ scheme: "lightgreyteal" }) ); const line = base .markLine({ color: "firebrick", size: 3, interpolate: "basis", point: { color: "firebrick" } }) .transform( vl.filter("datum.value>0"), vl.window(vl.mean("value").as("rolling_mean")).frame([-days, 0]) ) .encode(vl.y().fieldQ("rolling_mean")); return vl .layer(bar, line) .data(data) .width(width - (width > 600 ? 200 : 50)) .height(400); }32:T621,allCountsByDate = { if (updateLive === "false") return cachedData; const before = new Date(); const cs = crossfilter(recentData); cs.groups = {}; cs.dims = {}; for (let tod of types_of_dates) { cs.dims[tod] = cs.dimension(d => dateParse(d[tod])); cs.groups[tod] = cs.dims[tod].group(); } console.log("Groups done", (new Date() - before) / 1000, cs.groups); const maxDate = dateParse( recentData[recentData.length - 1].fecha_reporte_web ); const firstDate = new Date(2020, 2, 6); let allCounts = {}; for (let date of d3.timeDay.range( firstDate, maxDate.getTime() + 24 * 3600000 // Plus one day )) { cs.dims.fecha_reporte_web.filter([firstDate, date]); allCounts[dateFmt(date)] = {}; const maps = {}; for (let tod of types_of_dates) { maps[tod] = new Map( cs.groups[tod] .all() .filter(d => d.key) .map(d => [dateFmt(d.key), d.value]) ); // allCounts[dateFmt(date)][tod] = cs.groups[tod] // .all() // .filter(d => d.key) // .map(d => ({ ...d, key: dateFmt(d.key) })); } console.log("Maps done", (new Date() - before) / 1000); allCounts[dateFmt(date)] = []; for (let [key, value] of maps.fecha_reporte_web) { const objWithAllDates = { key }; for (let tod of types_of_dates) { objWithAllDates[tod] = maps[tod].get(key); } allCounts[dateFmt(date)].push(objWithAllDates); } } console.log("Crossfilter time ", (new Date() - before) / 1000); return allCounts; }33:[{"id":"96a2e50df7b16c56de6a6469141da21d1d10fa1cc0f9c41de6d5de1601faef8ba0e7350b85881adbb30c3dfdc454837cd9fb5d3c9828f3f4611701c13530638a","href":"https://static.observableusercontent.com/files/96a2e50df7b16c56de6a6469141da21d1d10fa1cc0f9c41de6d5de1601faef8ba0e7350b85881adbb30c3dfdc454837cd9fb5d3c9828f3f4611701c13530638a","name":"allCountsByDate_13.csv","type":"text/csv","lastModified":1604326927788.699,"size":2391945}] 2f:{"title":"Evolución Coronavirus en Colombia","cells":[{"id":0,"value":"md`# Evolución Coronavirus en Colombia\n\nCómo ha evolucionado la curva del Coronavirus en Colombia`","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"header = html`\n

\n \n

Coronavirus en Colombia

\n\n

Si queremos analizar la curva de crecimiento del COVID19 en Colombia, debemos tener en cuenta que los datos de las últimas tres semanas se van actualizando día a día. Esto es fundamental para poder juzgar si la curva está creciendo o no. Normalmente los epidemiólogos asumen que este desface corresponde a la última semana, pero en Colombia puede ser superior a tres semanas. Puede sacar sus propias conclusiones interactuando con esta visualización y sus parámetros. \n
\nFeedback y preguntas @guerravis

\n
\n

Haga click en play para iniciar la animación

${viewof currentDate} ${viewof updateLive}

\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"chart = {\n const target = html`

Casos diarios reportados en ${fmt(\n new Date(currentDate)\n )}

`;\n // yield target;\n vlChart\n .render()\n .then(view => target.querySelector(\"#chart\").appendChild(view));\n yield target;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"footer = html`\n ${viewof attrSelected}\n
\n

\n ${viewof days} ${viewof threeshold}\n

\n\n
\n

Según datos del Instituto Nacional de Salud .\n
\n John Alexis Guerra Gómez @duto_guerra @guerravis\n
\n https://johnguerra.co/coronavirus \n
\n $\"Creative$ \n

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"md`## Controls`","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"viewof currentDate = Scrubber(allDates.map(d => dateParseShort(d)), {\n format: date =>\n date.toLocaleString(\"es\", {\n month: \"long\",\n day: \"numeric\",\n year: \"numeric\"\n }),\n initial: allDates.length - 45,\n autoplay: true,\n loop: false,\n delay: 100\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"viewof updateLive = {\n const btn = html``;\n btn.value = false;\n const evt = btn.addEventListener(\"click\", function() {\n btn.value = true;\n btn.dispatchEvent(new CustomEvent(\"input\"));\n btn.setAttribute(\"disabled\", true);\n btn.innerText = \"Espere unos 2 minutos\";\n });\n invalidation.then(() => btn.removeEventListener(\"click\", evt));\n return btn;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"viewof days = slider({\n min: 0,\n max: 15,\n value: 7,\n step: 1,\n title: \"Ventana Promedio\",\n description: \"Días anteriores incluídos en el promedio\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"viewof threeshold = slider({\n min: 0,\n max: 30,\n value: 21,\n step: 1,\n title: \"Num. días incompletos\",\n description: \"Después de cuantos días se consideran confiables los datos\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":744,"value":"viewof attrSelected = select({\n options: types_of_dates.map(d => ({ label: datesLabels[d], value: d })),\n title: \"Fecha a utilizar\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"maxDate = new Date(countsByDate[countsByDate.length - 1].key)","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"fmt = {\n const fmt = d3.timeFormatDefaultLocale(locale).format;\n return fmt(\"%B %d %Y\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":676,"value":"types_of_dates = [\n \"fecha_inicio_sintomas\",\n \"fecha_muerte\",\n \"fecha_reporte_web\",\n \"fecha_recuperado\",\n \"fecha_de_notificaci_n\",\n \"fecha_diagnostico\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":725,"value":"datesLabels = ({\n fecha_inicio_sintomas: \"Fecha de Inicio de Síntomas\",\n fecha_reporte_web: \"Fecha Reporte Web\",\n fecha_de_notificaci_n: \"Fecha de Notificación\",\n fecha_muerte: \"Fecha de Muerte\",\n fecha_diagnostico: \"Fecha Diagnóstico\",\n fecha_recuperado: \"Fecha Recuperado\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":710,"value":"allCountsForCSV = {\n let res = [];\n for (let fecha_historica in allCountsByDate) {\n res = res.concat(\n allCountsByDate[fecha_historica].map(d => ({ ...d, fecha_historica }))\n );\n }\n return res;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":543,"value":"allDates = Object.keys(allCountsByDate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":453,"value":"countsByDate = allCountsByDate[dateFmt(currentDate)].map(d => ({\n value: +d[attrSelected],\n key: dateParseShort(d.key)\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":258,"value":"cachedData = {\n // const cachedData = await FileAttachment(\"allCountsByDate_7@1.json\")\n // .text()\n // .then(res => JSON.parse(res))\n // .then(allDates => {\n // for (let date in allDates) {\n // for (let type_of_dates of types_of_dates)\n // allDates[date][type_of_dates] = allDates[date][type_of_dates].map(\n // d => ((d.key = d.key), d)\n // );\n // }\n // return allDates;\n // });\n\n let cachedData = {};\n await FileAttachment(\"allCountsByDate_13.csv\")\n .csv()\n .then(csv => {\n csv.forEach(row => {\n if (!(row.fecha_historica in cachedData)) {\n cachedData[row.fecha_historica] = [];\n }\n cachedData[row.fecha_historica].push(row);\n });\n });\n\n return cachedData;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":824,"value":"recentData[recentData.length - 1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":654,"value":"recentData = {\n if (updateLive === \"false\") return [];\n console.log(\"Downloading recent Data\");\n\n const before = new Date();\n const generator = loadSocrata(\n \"https://www.datos.gov.co/resource/gt2j-8ykr.csv\",\n {\n progressive: false\n }\n );\n\n const { value, done } = await generator.next();\n console.log(\"Got live data\", value.length, (new Date() - before) / 1000);\n\n return value;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":796,"value":"// recentDataCSV = recentData.map(d => (delete d.__i, d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":782,"value":"// viewof selected = navio(recentData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"dateParse = d3.timeParse(\"%d/%m/%Y %H:%M:%S\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":524,"value":"dateFmt = d3.timeFormat(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":553,"value":"dateParseShort = d3.timeParse(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"d3 = require(\"d3-time-format\", \"d3-array\", \"d3-time\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"locale = fetch(\n \"https://unpkg.com/d3-time-format@2/locale/es-MX.json\"\n).then(res => res.json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"import { vl } from \"@vega/vega-lite-api-v5\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"import { slider, select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"import { loadSocrata } from \"@john-guerra/socrata-load-multiples-pages\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"crossfilter = require(\"crossfilter2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":474,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":784,"value":"import { navio } from \"@john-guerra/navio\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}