31:T148d,chart = { let filteredData = departamento_nom !== "Colombia" ? data.filter(d => d.departamento_nom===departamento_nom) : data; filteredData = filteredData.map((d,i) => { d.last = i>=filteredData.length-1 ? 1: 0; if (d.fecha) d.everyWeek = d.fecha.getDay()===0; return d; }); const brush = vl.selectMulti().encodings('y'); const barsByTime = vl .layer( // vl.markBar({"tooltip": true}) // .encode( // vl.x().fieldT("fecha").timeUnit("yearmonthdate"), // vl.y().count().title("Casos nuevos diarios"), // vl.color().value("#ccc"), // ) // .select(brush), vl.markArea() .data([ {x: new Date()-14*24*3600000, y: 0}, {x: new Date()-14*24*3600000, y: 200}, {x: new Date(), y: 200}, {x: new Date(), y: 0}, ]) .encode( vl.x().fieldT("x"), vl.y().fieldQ("y"), vl.color().value("#7773") ), vl.markBar({"tooltip": true}) .transform(vl.filter(brush)) .encode( vl.x().fieldT("fecha_inicio_sintomas").timeUnit("yearmonthdate").title("Fecha de inicio de síntomas"), vl.y().count().title("Número de casos"), vl.color().fieldO("estado") .scale(colorScale), // vl.order().fieldN("estado") ), // vl.markLine() // .transform( // vl.window(vl.mean("count()").as('Media Móvil')) // .sort(vl.field('fecha')).frame([-7, 7]) // ) // .encode( // vl.x().fieldT("fecha_inicio_sintomas").timeUnit("yearmonthdate").title("Fecha de inicio de síntomas"), // vl.y().fieldQ("Media Móvil"), // vl.color().value("firebrick") // ) // vl.markText({dx: 10, dy: -8}) // .transform(vl.filter(brush)) // .encode( // vl.x().fieldT("fecha_inicio_sintomas").timeUnit("yearmonthdate").title("Fecha de inicio de síntomas"), // vl.y().count().title("Casos nuevos diarios"), // // vl.text().count() // // vl.text().if(vl.filter("datum.everyWeek === true"), vl.value(1)).value(null) // ) ).width(width*0.8); const lineChart = vl .data(filteredData) .transform( vl.filter(brush), vl.groupby('fecha').aggregate(vl.count().as('Count')), vl.window(vl.sum('Count').as('Total Acumulado')).sort(vl.field('fecha')), ) .layer( vl.markLine({"tooltip": true}) .encode( vl.x().fieldT("fecha").timeUnit("yearmonthdate").title("Fecha de diagnóstico"), vl.y().fieldQ("Total Acumulado").title("Casos acumulados diarios"), ), vl.markCircle({"tooltip": true}) .encode( vl.x().fieldT("fecha").timeUnit("yearmonthdate").title("Fecha de diagnóstico"), vl.y().fieldQ("Total Acumulado").title("Casos acumulados diarios"), ), vl.markText({dx: 0, dy: -8, "tooltip": true}) .transform(vl.filter("datum.last===1")) .encode( vl.x().fieldT("fecha").timeUnit("yearmonthdate").title("Fecha de diagnóstico"), vl.y().fieldQ("Total Acumulado").title("Casos acumulados diarios"), vl.text().fieldQ("Total Acumulado"), vl.order("-x") ) ).width(width*0.8); const chart = await vl.data(filteredData) .vconcat( vl.hconcat( makeHist(vl.y().fieldN("tipo").title("Tipo de Infección"), brush), makeHist(vl.y().fieldN("sexo").title("Género"), brush) ), vl.hconcat(makeHist(vl.y().fieldQ("edad").bin(true).title("Edad"), brush).height(150), makeHist(vl.y().fieldN("atenci_n").title("Tipo de Atención"), brush) ), vl.hconcat( makeHist(vl.y().fieldO("estado").title("Estado"), brush, vl.color().fieldN("estado").scale(colorScale)), makeHist(vl.y().fieldN("pertenencia_etnica").title("Pertenencia Étnica"), brush), ), barsByTime, lineChart ) .config({ header: { titleFontSize: 16, labelFontSize: 14 }, axisBottom: { labelFlush: true, grid: false }, title: { fontSize: 20, offset: 20 }, legend: { titleFontSize: 16, labelFontSize: 12 }, padding: { bottom : 20, top: 20 } }).render(); return html`

Casos confirmados de Coronavirus en ${viewof departamento_nom}

Seleccione cualquiera de las barras para filtrar

${chart}

${footer}
John Alexis Guerra Gómez @duto_guerra @guerravis
https://johnguerra.co/coronavirus

`; }32:Tbe4,dailyCasesByDepto = { const iwidth = Math.min(650, width); // select a point for which to provide details-on-demand const hover = vl .selectSingle() .encodings('x') // limit selection to x-axis value .on('mouseover') // select on mouseover events .nearest(true) // select data point nearest the cursor .empty('none'); // empty selection includes no data points const base = await vl .markBar({ tooltip: true }) .transform( vl.filter("datum.fecha_inicio_sintomas") // vl.groupby(["departamento_nom", 'fecha']).aggregate(vl.count().as('Count')), // vl.window(vl.sum('Count') // .as('Total Acumulado') // ) // .groupby(["departamento_nom"]) // .sort(vl.field('fecha_inicio_sintomas')) ) .encode( vl .x() .fieldT("fecha_inicio_sintomas") .timeUnit("yearmonthdate") .title(null) .axis(null), // vl.y().fieldQ("Total Acumulado") vl .y() .count() // vl.y().fieldQ("Count") .axis({ grid: false }) .title(null) // .title("# de Casos Reportados"), ); // .config({ // // axisX: {titleLimit: 150, grid: false}, // // axis: {grid: false} // }); const lineChart = vl // .select(hover) .layer( base.markLine({ tooltip: true }), base.select(hover), // vl // .markRule() // .transform(vl.filter(hover)) // .encode( // vl // .opacity() // .if(hover, vl.value(1)) // .value(0) // ) // base.markText({dx: 0, dy: -8}) // .encode( // vl.text().fieldQ("Total Acumulado") // ) ) .width(facetWidth) .height(facetWidth) .facet( vl .facet() .field("departamento_nom") .header({ labelLimit: facetWidth, labelFontSize: 13, labelPadding: 0, labelBaseline: "top", labelColor: "#777" }) .title(null) .sort(vl.count().order("descending")) ) .data(data) .spacing(25) .columns(Math.floor((iwidth - 30) / (facetWidth + 5))); // return lineChart.toJSON(); // console.log("Linechart", JSON.stringify(lineChart.toJSON(),null, 2)); const chart = await lineChart .config({ view: { stroke: null } }) .render(); return html`

Casos Confirmados diarios por Departamento

${chart}

${footer2}
John Alexis Guerra Gómez @duto_guerra @guerravis
https://johnguerra.co/coronavirus

`; }33:T835,chartByDpto = { const lineChart = await vl .markLine() // .data(data) .transform( vl.groupby(["departamento_nom", 'fecha']).aggregate(vl.count().as('Count')), vl .window(vl.sum('Count').as('Total Acumulado')) .groupby(["departamento_nom"]) .sort(vl.field('fecha')) ) .encode( // vl.row().fieldN("departamento_nom"), vl .x() .fieldT("fecha") .timeUnit("yearmonthdate") .title("Fecha de diagnóstico"), vl .y() .fieldQ("Total Acumulado") .title("# de Casos Reportados") ) // .layer( // vl.markLine({"tooltip": true}), // vl.markCircle({"tooltip": true}), // vl.markText({dx: 0, dy: -8}) // .encode( // vl.text().fieldQ("Total Acumulado") // ) // ) // .markLine({tooltip: true}) .config({ axisX: { titleLimit: 150 } }) .width(100) .height(100) .facet( vl .facet() .field("departamento_nom") .header({ labelLimit: 100, labelFontSize: 14 }) .sort(vl.average("Total Acumulado").order("descending")) ) .data(data) .columns(Math.floor((width * .8) / 100)); // return lineChart.toJSON(); // console.log("Linechart", JSON.stringify(lineChart.toJSON(),null, 2)); const chart = await lineChart.render(); return html`

Casos Confirmados de Coronavirus por Departamentos

${chart}

${footer2}
John Alexis Guerra Gómez @duto_guerra @guerravis
https://johnguerra.co/coronavirus

`; }34:Tbb1,agesByDpto = { const brush = vl.selectMulti().encodings('y'); const ageChart = vl .data(data) .transform( vl.filter(brush), vl.calculate("floor(datum.edad/10)*10").as("grupo_edad"), vl.groupby(["departamento_nom", 'grupo_edad']).aggregate(vl.count().as('Count')), vl.window(vl.sum('Count') .as('total_count') ).frame([null, null]) .groupby(["departamento_nom"]) .sort(vl.field('grupo_edad')), // vl.filter("datum.total_count > 10"), vl.calculate("datum.Count/datum.total_count ").as("pct"), // vl.density("pct").bandwidth(0.3).groupby(["departamento_nom"]), ) .encode( vl.y() .fieldN("departamento_nom").axis({labelFontSize:12}), vl.size().fieldQ("pct") .scale({rangcoe: [0, 700]}) .legend({ format: "0.1%" }).title("% casos reportados"), vl.color().fieldQ("pct").legend({ format: "0.1%" }).title("% casos reportados"), vl.x().fieldO("grupo_edad").title("Edad"), vl.detail().fieldQ("Count") ) .layer([ vl.markCircle({tooltip: true}), vl.markText({tooltip: true}) .encode( vl.text().fieldQ("pct").format("0.1%").title("% casos reportados"), vl.color().value("#302E5F"), vl.size().value(10) ) ]) .width(width*.6) .height(500) .config({ // "view": {"step": 50 }, padding: { bottom : 20, top: 20 } }); // console.log("Linechart", JSON.stringify(lineChart.toJSON(),null, 2)); const chart = await vl .data(data) .vconcat( vl.hconcat( makeHist(vl.y().fieldN("tipo").title("Tipo de Infección"), brush, ), makeHist(vl.y().fieldN("sexo").title("Género"), brush), ), vl.hconcat(makeHist(vl.y().fieldN("atenci_n").title("Tipo de Atención"), brush) ), ageChart ) .render(); return html`

Distribución de Edades Casos Confirmados de Coronavirus por Departamentos

Seleccione alguna de las barras para filtrar

${chart}

${footer3}
John Alexis Guerra Gómez @duto_guerra @guerravis
https://johnguerra.co/coronavirus

`; }35:T41d,// vl.data(data).layer( // // vl.markBar({"tooltip": true}) // // .encode( // // vl.x().fieldT("fecha").timeUnit("yearmonthdate"), // // vl.y().count().title("Casos nuevos diarios"), // // vl.color().value("#ccc"), // // ) // // .select(brush), // vl.markBar({"tooltip": true}) // .encode( // vl.x().fieldT("fecha").timeUnit("yearmonthdate").title("Fecha de diagnóstico"), // vl.y().count().title("Casos nuevos diarios"), // vl.color().fieldN("tipo") // .scale(({ // range: ["#eee", "#ddd", "#66c2a5", "#e78ac3", "#a6d854"] , // domain: [ "Importado", "Relacionado", "En Estudio"] // })), // vl.order().fieldN("tipo") // ), // vl.markText({dx: 10, dy: -8}) // .encode( // vl.x().fieldT("fecha").timeUnit("yearmonthdate").title("Fecha de diagnóstico"), // vl.y().count().title("Casos nuevos diarios"), // vl.text().count() // ) // ).width(600).render()36:T92e,// data = { // // based on https://stackoverflow.com/questions/2970525/converting-any-string-into-camel-case // const camelize = str => // str // .toLowerCase() // .replace(/(?:^\w|[A-Z]|\b\w)/g, word => word.toUpperCase()); // let data = [], // res, // i = 0; // const MAX_PAGES = 100, // ROWS_PER_PAGE = 50000; // while (i++ < MAX_PAGES) { // res = await fetch( // `${url}?$limit=${ROWS_PER_PAGE}&$offset=${data.length}` // ).then(res => res.json()); // if (!res.length) break; // data = data.concat(res); // // console.log("data",res, data.length, i) // // yield data; // } // const parse = d3.timeParse("%d/%m/%y"); // const parseLong = d3.timeParse("%d/%m/%Y"); // const parseLong2 = d3.timeParse("%Y-%m-%dT00:00:00.000"); // const attribs = [ // "sexo", // "atenci_n", // "tipo", // "estado" // // "ciudad_de_ubicaci_n", // // "departamento_nom", // ]; // data.forEach((d, i) => { // if (d.fecha_diagnostico) { // const fechaSplited = d.fecha_diagnostico.split("/"); // if (d.fecha_diagnostico.length > 10) { // d.fecha = parseLong2(d.fecha_diagnostico); // } // // Sometimes dates come with 2 year digits, sometimes 4 digits 🤦‍♂️ // else if (fechaSplited.length >= 3 && fechaSplited[2].length > 2) { // d.fecha = parseLong(d.fecha_diagnostico); // } else { // d.fecha = parse(d.fecha_diagnostico); // } // } else { // d.fecha = null; // } // d.fecha_reporte_web = parseLong2(d.fecha_reporte_web); // d.fecha_de_notificaci_n = parseLong2(d.fecha_de_notificaci_n); // if (d.fecha_recuperado) d.fecha_recuperado = parseLong2(d.fecha_recuperado); // if (d.fecha_inicio_sintomas) d.fecha_inicio_sintomas = parseLong2(d.fecha_inicio_sintomas); // d.fecha_de_muerte = // d.fecha_de_muerte && d.fecha_de_muerte.length > 7 // ? parseLong2(d.fecha_de_muerte) // : null; // // // Year 1900?? // // if (d.fecha.getYear() === -1) { // // d.fecha = undefined; // // } // for (let attr of attribs) { // if (d[attr]) { // d[attr] = camelize(d[attr].trim()); // } // } // d.edad = +d.edad; // d.id_de_caso = +d.id_de_caso; // }); // yield data; // }37:[] 2f:{"title":"Coronavirus Colombia","cells":[{"id":0,"value":"md`# Coronavirus Colombia\nSegún los datos oficiales del [Instituto Nacional de Salud de Colombia](https://www.datos.gov.co/Salud-y-Protecci-n-Social/Casos-positivos-de-COVID-19-en-Colombia/gt2j-8ykr/data)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":" // Colors\n // #66c2a5, #fc8d62, #8da0cb, #e78ac3, #a6d854, #ffd92f, #e5c494, #b3b3b3\ncolorScale = ({\n range: [\"#fc8d62\", \"#8da0cb\", \"#66c2a5\", \"#e78ac3\", \"#a6d854\", \"#ffd92f\", \"#e5c494\", \"#b3b3b3\"] ,\n // domain: [ \"Importado\", \"Relacionado\", \"En Estudio\"] \n domain: [\"N/A\",\"AsintomáTico\",\"Leve\", \"Moderado\",\"Grave\", \"Fallecido\", undefined]\n})\n// colorScale = ({schema:\"category20\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1416,"value":"new Set(data.map(d=> d.estado))","pinned":true,"hidden":false,"mode":"ojs"},{"id":541,"value":"makeHist = (yField, brush, colorScale) => vl.layer(\n vl.markBar({\"tooltip\": true})\n .encode(\n yField,\n vl.x().count().title(\"# de Casos Reportados\"),\n vl.color().value(\"#ccc\")\n )\n .select(brush),\n vl.markBar({\"tooltip\": true})\n .transform(vl.filter(brush)) \n .encode(\n yField,\n vl.x().count().title(\"# de Casos Reportados\"),\n colorScale || vl.color().value(\"#e5c494\")\n ),\n vl.markText({dx:10})\n .transform(vl.filter(brush)) \n .encode(\n yField,\n vl.x().count().title(\"# de Casos Reportados\"),\n vl.text().count()\n ) \n ).width(width/3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1167,"value":"facetWidth = 100","pinned":true,"hidden":false,"mode":"ojs"},{"id":1144,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":638,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":1020,"value":"brush = vl.selectInterval()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1235,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":620,"value":"d3.nest().key(d => d.departamento_nom).key(d=> d.ciudad_de_ubicaci_n).entries(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"footer = html`Según datos del Instituto Nacional de Salud. Última actualización ${fechaActualizacion}.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":348,"value":"footer2 = html`Según datos del Instituto Nacional de Salud. Última actualización ${fechaActualizacion}.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":500,"value":"footer3 = html`Según datos del Instituto Nacional de Salud. Última actualización ${fechaActualizacion}.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":603,"value":"fechaActualizacion = d3.timeFormat(\"%d/%m/%Y\")(d3.max(data, d=> d.fecha))","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"esLocale = fetch(\"https://unpkg.com/d3-time-format@2/locale/es-MX.json\").then(res => res.json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"url = \"https://www.datos.gov.co/resource/gt2j-8ykr.csv?$ORDER=fecha_reporte_web DESC\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1450,"value":"parseLong2 = d3.timeParse(\"%Y-%m-%d 00:00:00\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1455,"value":"data = {\n const generator = await loadSocrata(url, {\n progressive: false,\n max_pages: 2\n }).next();\n const data = generator.value;\n\n const fechas = Object.keys(data[data.length - 1])\n .filter(a => a.includes(\"fecha\"));\n // .concat([\"fecha_inicio_sintomas\"]);\n data.forEach(d => {\n fechas.forEach(f => {\n d[f] = parseLong2(d[f]);\n });\n\n d.fecha = d.fecha_diagnostico;\n });\n\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":677,"value":"maxDate = data.sort((a,b) => b.fecha-a.fecha)[0].fecha","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"vl = {\n const [vega, vegalite, api, tooltip] = await Promise.all([\n 'vega@latest',\n 'vega-lite@latest',\n 'vega-lite-api@latest',\n 'vega-tooltip@latest'\n\n // 'vega@5.10.1',\n // 'vega-lite@4.9.0',\n // 'vega-lite-api@0.5.0',\n // 'vega-tooltip@0.22.0'\n ].map(module => require(module)));\n\n const options = {\n config: {\n // vega-lite default configuration\n config: {\n view: {continuousWidth: 400, continuousHeight: 300},\n mark: {tooltip: null}\n }\n },\n init: view => {\n // initialize tooltip handler\n view.tooltip(new tooltip.Handler().call);\n // enable horizontal scrolling for large plots\n if (view.container()) view.container().style['overflow-x'] = 'auto';\n },\n view: {\n // view constructor options\n loader: vega.loader({baseURL: 'https://vega.github.io/vega-datasets/'}),\n renderer: 'canvas'\n }\n };\n \n vega.timeFormatLocale(esLocale);\n \n return api.register(vega, vegalite, options);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"viewof departamento_nom = select({\n options: [\"Colombia\"].concat(Array.from(new Set(data.map(d=> d.departamento_nom))).sort()),\n value: \"Colombia\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1478,"value":"data[1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":366,"value":"import { table } from \"@tmcw/tables/2\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":564,"value":"import {select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1459,"value":"import { loadSocrata } from \"@john-guerra/socrata-load-multiples-pages\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}