31:T5b5,{ const data = dataGroupedByLocation.filter(d => d.region == selectedRegion); const invalidIncidencia = [] const invalidCrecimiento = [] const invalidPositividad = [] const nodes = data.forEach(d => { const incidencia100K = d.metricsByDate[selectedDate] && d.metricsByDate[selectedDate].incidencia100K; const crecimiento = d.metricsByDate[selectedDate] && d.metricsByDate[selectedDate].crecimiento; const positividad = d.metricsByDate[selectedDate] && d.metricsByDate[selectedDate].positividad; if (incidencia100K == null) invalidIncidencia.push(d.location) if (crecimiento == null) invalidCrecimiento.push(d.location) if (positividad == null) invalidPositividad.push(d.location) }) const outPositividad = html` ${invalidPositividad.length ? `Comunas sin dato de positividad:` : ``} ${invalidPositividad.map(d => `${d}`).join(", ")}
${invalidIncidencia.length ? `Comunas sin dato de incidencia:` : ``} ${invalidIncidencia.map(d => `${d}`).join(", ")} ` const outCrecimiento = html` ${invalidCrecimiento.length ? `Comunas sin dato de crecimiento:` : ``} ${invalidCrecimiento.map(d => `${d}`).join(", ")}
${invalidIncidencia.length ? `Comunas sin dato de incidencia:` : ``} ${invalidIncidencia.map(d => `${d}`).join(", ")} ` return indicadorY == "positividad" ? outPositividad : outCrecimiento; }32:T618,html``33:T469c,class IncidenceGrowthVis { constructor(el, metric) { this._data = []; this._margin = {left: 60, right:100, top:80, bottom: 80}; this._totalWidth = width; this._totalHeight = width *0.60; this.yLabels = { "positividad": "Positividad últimos 7 días", "crecimiento": "Variación del aumento en 7 días", } this.scaleRanges = { "positividad": yRange, "crecimiento":[-1,1], "incidencia100K":xRange } this.zones = { "crecimiento" : [ { left: 0, right: 5, bottom: -1, top:0, color:"#abdda4" // verde }, { left: 5, right: 10, bottom: -1, top:1, color:"#fdae61" // naranjo }, { left: 0, right: 5, bottom: 0, top:1, color:"#ffffbf" // amarillo }, { left: 10, right: 20, bottom: -1, top:1, color:"#d7191c" // rojo } ], "positividad" : [ { left: this.scaleRanges["incidencia100K"][0], right: 5, bottom: this.scaleRanges[indicadorY][0] < 0.02 ? 0.02 : this.scaleRanges[indicadorY][0] , top:0.04, color:"#abdda4" // verde APERTURA INICIAL }, { left: this.scaleRanges["incidencia100K"][0] < 2 ? 2 : this.scaleRanges["incidencia100K"][0], right: 5, bottom: this.scaleRanges[indicadorY][0], top:0.04, color:"#abdda4" // verde APERTURA INICIAL }, { left: this.scaleRanges["incidencia100K"][0], right: 10, bottom: 0.08, top:0.1, color:"#fdae61" // naranjo TRANSICIÓN }, { left: 5, right: 10, bottom: this.scaleRanges[indicadorY][0], top:0.08, color:"#ffffbf" // amarillo PREPARACIÓN }, { left: this.scaleRanges["incidencia100K"][0], right: 5, bottom: 0.04, top:0.08, color:"#ffffbf" // amarillo PREPARACIÓN }, { left: this.scaleRanges["incidencia100K"][0], right: this.scaleRanges.incidencia100K[1], bottom: 0.1, top:this.scaleRanges[indicadorY][1], color:"#d7191c" // rojo CUARENTENA }, { left: 10, right: this.scaleRanges.incidencia100K[1], bottom: this.scaleRanges[indicadorY][0], top:this.scaleRanges[indicadorY][1], color:"#d7191c" // rojo CUARENTENA } ] /* "positividad" : [ { left: 0, right: 5, bottom: 0, top:0.05, color:"#abdda4" // verde }, { left: 5, right: 10, bottom: 0, top:this.scaleRanges[indicadorY][1], color:"#fdae61" // naranjo }, { left: 0, right: 5, bottom: 0.05, top:this.scaleRanges[indicadorY][1], color:"#ffffbf" // amarillo }, { left: 10, right: 20, bottom: 0, top:this.scaleRanges[indicadorY][1], color:"#d7191c" // rojo } ] */ } this.referenceLinesData = { "positividad" : [0.05, 0.10], "crecimiento" : [0] } this.yZoneLabels = { "positividad" : [ {y: 0.025, label: "BAJA"}, {y: 0.075, label: "MEDIA"}, {y: 0.2, label: "ALTA"} ], "crecimiento" : [ {y: -0.5, label: "DISMINUYENDO"}, {y: 0.5, label: "AUMENTANDO"}, ], } this.phaseLabels = [ { name: "CUARENTENA", color: "white", left: this.scaleRanges["incidencia100K"][0], bottom: 0.1, }, { name: "TRANSICIÓN", color: "black", left: this.scaleRanges["incidencia100K"][0], bottom: 0.08, }, { name: "PREPARACIÓN", color: "black", left: this.scaleRanges["incidencia100K"][0], bottom: 0.04, }, { name: "APERTURA INICIAL", color: "black", left: this.scaleRanges["incidencia100K"][0], bottom: 0.02, }, { name: "APERTURA AVANZADA", color: "black", left: this.scaleRanges["incidencia100K"][0], bottom: 0.0, }, ] this.svgContainer = d3.select(el); this.colorTrayectoria= "blue"; this.startup(); } startup() { this._width = this._totalWidth - this._margin.left - this._margin.right; this._height = this._totalHeight - this._margin.top - this._margin.bottom; //this.xScale = d3.scaleLinear() this.xScale = d3.scaleLog() .range([0,this._width]) //this.yScale = d3.scaleLog() this.yScale = d3.scaleLinear() .range([this._height,0]) this.size = d3.scaleLinear() .range([5,20]) this.color = d3.scaleOrdinal() .range(_.map(colorCodes, (color,key)=> color)) .domain(_.map(colorCodes, (color,key)=> key)) this.yAxis = d3.axisLeft(this.yScale) //.ticks(10) .tickFormat(d3.format(".0%")); this.xAxis = d3.axisBottom(this.xScale) .tickFormat(d3.format("d")); this.svgContainer .attr("width",this._width+this._margin.left+this._margin.right) .attr("height",this._height+this._margin.top+this._margin.bottom) this.svgContainer.selectAll("g").remove(); this.svgContainer.selectAll("defs").remove(); this.svgContainer.append("svg:defs").selectAll("marker") .data(["arrow"]) // Different link/path types can be defined here .enter().append("svg:marker") // This section adds in the arrows .attr("id", String) .attr("viewBox", "0 0 12 12") .attr("refX", 6) .attr("refY", 6) .attr("markerUnits", "strokeWidth") .attr("markerWidth", 12) .attr("markerHeight", 12) .attr("orient", "auto") .append("svg:path") .attr("d", "M2,2 L10,6 L2,10 L6,6 L2,2") .style("fill", this.colorTrayectoria) this.container = this.svgContainer.selectAll("g.container") .data([1]) .join("g") .attr("class", "container inlineVis") .attr("transform", `translate(${this._margin.left},${this._margin.top})`) this.container.selectAll("rect.zone") .data(this.zones[indicadorY]) .join("rect") .attr("class", "zone") this.xAxisEl = this.container.append("g") .attr("transform", `translate(0,${this._height})`) .attr("class", "x axis") this.yAxisEl = this.container.append("g") .attr("class", "y axis") this.dateLabel = this.container.append("text") .attr("class", "title label") .attr("x", this._width/2) .attr("y", 0) .attr("dy", -40) .attr("text-anchor", "middle") .attr("fill", "grey") .attr("font-size", 24) .text("TITLE") .property("_current", function(d) {return this._current || firstDate}) this.container.append("text") .attr("class", "title x") .attr("x", this._width) .attr("y", this._height) .attr("dy", 50) .attr("text-anchor", "end") .text("Promedio de casos confirmados diarios x 100 mil habitantes (última semana)") this.container.append("text") .attr("class", "author") .attr("x", this._width) .attr("y", this._height) .attr("dy", 70) .attr("text-anchor", "end") .attr("font-weight", "bold") .text("@elaval") this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", 14) .attr("class", "title y") .attr("transform",`rotate(-90)`) .attr("y", 0 - this._margin.left) .attr("x",0 - (this._height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text(this.yLabels[indicadorY]); this.container.append("text") .attr("class", "label baja incidencia") .attr("y", 0) .attr("dy", -10) .attr("fill", "grey") .attr("text-anchor", "middle") .text("INCIDENCIA BAJA") this.container.append("text") .attr("class", "label media incidencia") .attr("y", 0) .attr("dy", -10) .attr("fill", "grey") .attr("text-anchor", "middle") .text("INCIDENCIA MEDIA") this.container.append("text") .attr("class", "label alta incidencia") .attr("y", 0) .attr("dy", -10) .attr("fill", "grey") .attr("text-anchor", "middle") .text("INCIDENCIA ALTA") this.yZoneLabels this.container.selectAll("text.yZoneLabel") .data(this.yZoneLabels[indicadorY]) .join("text") .attr("class","yZoneLabel") .attr("font-family", "sans-serif") .attr("font-size", 14) .attr("fill", "grey") .attr("transform",`rotate(-90)`) .attr("x", this._width) .attr("dy", "1em") .style("text-anchor", "middle") .text(d => d.label); this.container.selectAll("line.reference") .data(this.referenceLinesData[indicadorY]) .join("line") .attr("class", "reference") .attr("stroke-width", 1) .attr("stroke", "black") .attr("stroke-dasharray", "5 5 5 5") .attr("x1", 0) .attr("x2", this._width) this.container.selectAll("text.phaseLabel") .data(this.phaseLabels) .join("text") .attr("class","phaseLabel") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("font-style", "italic") .attr("fill", d => d.color) .attr("dy", "-5") .attr("dx", "5") .style("text-anchor", "left") .text(d => d.name); } render(_data, fecha) { this.xAttribute = "incidencia100K"; this.yAttribute = indicadorY == "crecimiento" ? "crecimiento" : "positividad"; this.sizeAttribute = "poblacion"; this.maxIncidencia = 100; this.maxPositividad = this.scaleRanges["positividad"][1]; this.maxCrecimiento = 1; this.minCrecimiento = -1; const data = _data.map(d => ({ name: d.name, crecimiento_original: d.crecimiento, crecimiento: d.crecimiento < this.maxCrecimiento ? d.crecimiento : this.maxCrecimiento, positividad_original: d.positividad, positividad: d.positividad == null ? 0 : d.positividad <= this.maxPositividad ? d.positividad : this.maxPositividad, incidencia100K : d.incidencia100K <= this.maxIncidencia ? d.incidencia100K : this.maxIncidencia, incidencia100K_original: d.incidencia100K, poblacion: d.poblacion, searched: d.searched, recent: d.recent, })) .filter( d => d.positividad && d.incidencia100K) .filter(d => { return d.incidencia100K_original <= this.scaleRanges["incidencia100K"][1] && d.incidencia100K_original >= this.scaleRanges["incidencia100K"][0] && d.positividad_original >= this.scaleRanges["positividad"][0] && d.positividad_original <= this.scaleRanges["positividad"][1] }) .filter(d => { return !textoABuscar || d.searched }) data.forEach(d => { d.beyondLimit = d.incidencia100K_original > this.maxIncidencia; if (indicadorY == "crecimiento") { d.beyondLimit = d.beyondLimit || d.crecimiento_original > this.maxCrecimiento || d.crecimiento_original < this.minCrecimiento; } else if (indicadorY == "positividad") { d.beyondLimit = d.beyondLimit || d.positividad_original > this.maxPositividad; } }) function missingData(d) { if (indicadorY == "positividad") { return (d.positividad_original == null) || (d.incidencia100K_original == null) } else if (indicadorY == "crecimiento") { return (d.crecimiento_original == null) || (d.incidencia100K_original == null) } else { return true } } // transition const t = this.container.transition() .duration(transitionTime); const self = this; this.xScale.domain(this.scaleRanges[this.xAttribute]) this.yScale.domain(this.scaleRanges[this.yAttribute]) this.size.domain(d3.extent(data, d => d[this.sizeAttribute])) this.xAxisEl.call(this.xAxis); this.yAxisEl.call(this.yAxis); this.container.select("text.baja.incidencia") .attr("x", this.xScale((this.scaleRanges[this.xAttribute][0]+5)/2)) this.container.select("text.media.incidencia") .attr("x", this.xScale(7.5)) this.container.select("text.alta.incidencia") .attr("x", this.xScale((10+ this.scaleRanges[this.xAttribute][1])/2)) this.container.select("text.aumentando") .attr("y", this.yScale(0.5)) .attr("transform", `rotate(${-90},${this._width},${this.yScale(0.5)})`) this.container.select("text.disminuyendo") .attr("y", this.yScale(-0.5)) .attr("transform", `rotate(${-90},${this._width},${this.yScale(-0.5)})`) this.container.selectAll("text.yZoneLabel") .attr("y", d => this.yScale(d.y)) .attr("transform", d => `rotate(${-90},${this._width},${this.yScale(d.y)})`) this.container.selectAll("text.phaseLabel") .attr("y", d => this.yScale(d.bottom)) .attr("x", d => this.xScale(this.scaleRanges[this.xAttribute][0])) this.container.selectAll("line.reference") .attr("y1", d => this.yScale(d)) .attr("y2", d => this.yScale(d)) //this.container.select("text.title.label") //.text(`${this._region} - ${moment(this._date).format("DD MMMM")}`) this.container.select("text.title.label") .transition(t) .textTween(function(d) { debugger; const i = d3.interpolateDate(moment(this._current), moment(self._date)) return function(t) { this._current = moment(i(t)).format("YYYY-MM-DD"); return `${self._region} - ${moment(i(t)).format("DD MMMM")}` }; }) //.text(`${this._region} - ${moment(this._date).format("DD MMMM")}`) /* this.dateLabel .transition(t) .textTween(function(d) { const i = d3.interpolateDate(moment(this._current), moment(fecha)) return function(t) { this._current = moment(i(t)).format("YYYY-MM-DD"); return moment(i(t)).format("DD MMM") }; //return function(t) { return (this._current = i(t).format("YYYY-MM-DD")); }; }) */ this.container.selectAll("rect.zone") .attr("x",d => this.xScale(d.left)) .attr("y",d => this.yScale(d.top)) .attr("width",d => this.xScale(d.right)-this.xScale(d.left)) //this.yScale(d.rigth-d.left)) .attr("height",d => { const a = this.yScale(d.bottom); const b = this.yScale(d.top); return Math.abs(a-b) })//+this.yScale(d.top)) .attr("fill",d => d.color) const bubbles = this.container.selectAll("g.bubble") .data(data, d => d.name) .join( enter => enter.append("g") .attr("class","bubble") .attr("transform", d => `translate(0, 0)`) .call(enter => enter.transition(t) .attr("transform", d => `translate(${this.xScale(d[this.xAttribute])}, ${this.yScale(d[this.yAttribute])})`)), update => update .call(update => update.transition(t) .attr("transform", d => `translate(${this.xScale(d[this.xAttribute])}, ${this.yScale(d[this.yAttribute])})`)), exit => exit .call(exit => { exit.transition(t) .attr("opacity",0) .remove() exit.select("circle") .transition(t) .attr("r",0) //.attr("transform", d => `translate(0, 0})`) }) ); bubbles .attr("opacity", 0.95) .each(function(d) { if( d.searched) { this.parentNode.appendChild(this); } }) .on("mouseover", function(d) { this.parentNode.appendChild(this); }) bubbles.selectAll("circle") .data(d => [d]) .join("circle") .attr("r",d => { return this.size(d.poblacion) }) .attr("stroke-width", d=> d.beyondLimit ? 3 : 0.5) .attr("stroke", d=> d.beyondLimit ? "black" : "black") .attr("fill",d => missingData(d) ? "grey" : d.searched ? "yellow" : "#2b83ba")// d => this.color(clasificacion(d.incidencia100K, d.crecimiento))) const trayectoria = d3.line() .curve(d3.curveBasis) .x(d => d.x) .y(d => d.y) bubbles.selectAll("path.vector") .data(d => [d]) .join("path") .attr("class",d => `vector ${d.name}`) .attr("d",d => trayectoria(d.recent.map(e => ({ x: e[this.xAttribute] && d[this.xAttribute] ? this.xScale(e[this.xAttribute])-this.xScale(d[this.xAttribute]): 0, y: this.yScale(e[this.yAttribute])-this.yScale(d[this.yAttribute]) })))) .attr("stroke-width", d => d.searched ? 1 : 1 ) .attr("stroke-dasharray", 1.5) .attr("stroke", this.colorTrayectoria) .attr("marker-end", "url(#arrow)"); bubbles.selectAll("rect") .data(d => [d]) .join("rect") bubbles.selectAll("text") .data(d => [d]) .join("text") .attr("dy",d => { return this.size(d.poblacion)+12 }) .attr("font-size",12) .attr("fill", "black") .text(d => d.name) .call(getTextBox); bubbles.selectAll("rect") .attr("x", function(d){return d.bbox.x}) .attr("y", function(d){return d.bbox.y}) .attr("width", function(d){return d.bbox.width}) .attr("height", function(d){return d.bbox.height}) .style("opacity", 0.8) //.style("fill", "#FFE6F0"); .style("fill", "white"); function getTextBox(selection) { selection.each(function(d) { d.bbox = this.getBBox(); }) } } height(_) { this._totalHeight = _; this.startup(); return this; } width(_) { this._totalWidth = _; this.startup(); return this; } title(_) { this._title = _; return this; } region(_) { this._region = _; return this; } date(_) { this._date = _; return this; } }34:T4e9,function getNodes(date) { const data = dataGroupedByLocation.filter(d => d.region == selectedRegion); const weekAgoDate = moment(date).subtract(1,"week").format("YYYY-MM-DD"); function isSearched(item) { const searchExpression = textoABuscar.split(",").map(d => d.trim()).join("|"); const re = new RegExp(searchExpression, "i"); return textoABuscar && !!item.location.match(re) } function getRecent(d) { return _.chain(d.items) .filter(d => d.date >= weekAgoDate && d.date <= selectedDate) .map(e => ({ crecimiento: d.metricsByDate[e.date] && d.metricsByDate[e.date].crecimiento - 1, positividad: d.metricsByDate[e.date] && d.metricsByDate[e.date].positividad, incidencia100K: d.metricsByDate[e.date] && d.metricsByDate[e.date].incidencia100K, })) .value() } const nodes = data.map(d => ({ name: d.location, crecimiento: d.metricsByDate[date] && d.metricsByDate[date].crecimiento - 1, positividad: d.metricsByDate[date] && d.metricsByDate[date].positividad, incidencia100K: d.metricsByDate[date] && d.metricsByDate[date].incidencia100K, poblacion: d.poblacion, searched: isSearched(d), recent: getRecent(d) })) return nodes }35:[] 2f:{"title":"COVID19 - Comportamiento comunal: Incidencia & Positividad","cells":[{"id":0,"value":"md`# COVID19 - Comportamiento comunal: Incidencia & Positividad`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6712,"value":"viewof selectedRegion = { \n const regiones = _.chain(data).map(d=> d.region).uniq().sortBy(d => ordenRegiones[d]).value();\n return select({\n title:\"Región\",\n description:\"Seleccione la región para la cual mostrar datos de sus comunas\",\n options:_.chain(regiones).value(),\n value:\"Metropolitana\"\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6810,"value":"viewof textoABuscar = text({title: \"Destacar comuna\", placeholder: \"Nombre de la comuna\", description: \"Se destacarán las comunas cuyo nombre que contenga este texto\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6996,"value":"md`**Seleccione una fecha en la barra siguiente (o presione \"Play\" para animar)**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6956,"value":"viewof selectedDate = Scrubber(validDates, {\n initial:validDates.length,\n autoplay: false,\n loop:false,\n delay:1000,\n format: date => moment(date).format(\"DD MMM\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6356,"value":"vis = {\n const out = html`

\n \n \n

`;\n \n\n \n \n return out;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6829,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":7102,"value":"viewof xRange = rangeSlider({\n min: 1,\n max: 200,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [1, 80],\n // Custom slider CSS, replaces all styles.\n\n format: '.1f',\n title: 'Rango para escala de Incidencia',\n description: 'Modifique si desea cambiar la escala visible',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7106,"value":"viewof yRange = rangeSlider({\n min: 0,\n max: 0.5,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [0, 0.25],\n // Custom slider CSS, replaces all styles.\n\n format: '.1%',\n title: 'Rango para la escala de positividad',\n description: 'Modifique si desea cambiar la escala visible.',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7052,"value":"md`Notas:\n* El tamaño de las burbujas representa la población de la comuna.\n\n* Se utiliza una escala de 0 a 30% para la positividad para evitar que los casos extremos hagan \"invisible\" los rangos \"normales\". Las comunas con más de 30% de positividad se ubicarán en el limite superior con un borde negro de mayor grosorpara indicar que tienen valores mayores.\n\n* De igual manera se utiliza una escala de 0 a 20 casos diarios x 100 mil habitantes para la incidencia. Las comunas con más de 20 casos x 100 mil habitantes se ubicarán en el límite derecho con un borde negro de mayor grosor para indicar que tienen valores mayores.\n\n* Para algunas comunas en ciertas fechas no hay datos de positividad en la fuente de datos utilizada. En este caso, la comuna se muestra en el borde inferior del gráfico con una burbuja de fondo gris.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7065,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":589,"value":"html`

Autor

Ernesto Laval (@elaval)

\n\n

Fuente de datos

\nDatos de casos confirmados por comunas en Informes epidemiológicos del Ministerio de Salud de Chile, publicados por el Ministerio de Ciencia en: https://github.com/MinCiencia/Datos-COVID19/blob/master/output/producto1/Covid-19_std.csv\n

\nDatos de positividad son provistos por iCovid Chile iCovid Chile y son publicados por el Ministerio de Ciencia en:\nhttps://github.com/MinCiencia/Datos-COVID19/blob/master/output/producto55/Positividad_por_comuna.csv \n

\n\n\n

\n\n\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":7067,"value":"{\n const data = getNodes(selectedDate);\n \n const out = html`\n \n \n \n \n \n\n \n ${_.map(data, d => `\n \n \n \n \n \n `)}\n

Región	Positividad	Incidencia
${d.name}	${d3.format(\".1%\")(d.positividad)}	${d3.format(\".1f\")(d.incidencia100K)}

\n `\n\n return out\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":6755,"value":"viewof indicadorY = radio({\n title: 'Indicador para en eje Y',\n description: 'Seleccione si desea utilizar positividad o crecimiento semanal',\n options: [\n { label: 'Positividad', value: 'positividad' },\n { label: 'Crecimiento semanal', value: 'crecimiento' },\n ],\n value: 'positividad'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1402,"value":"md`## CSS Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5838,"value":"html`\n\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"style_bootstrap","pinned":false,"hidden":false,"mode":"ojs"},{"id":4097,"value":"style_fontawesome","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":4832,"value":"md`# Vis`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6434,"value":"renderer = {\n const nodes = getNodes(selectedDate)\n visObj.region(selectedRegion.toUpperCase()).date(selectedDate).render(nodes);\n\n //visObj.title(`${selectedRegion.toUpperCase()} - ${moment(selectedDate).format(\"DD MMMM\")}`).render(nodes);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6354,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":6441,"value":"visObj = {\n const visEl = d3.select(vis).select(\"svg\");\n \n return new IncidenceGrowthVis(visEl.node());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1407,"value":"md`## Config Params`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6411,"value":"colorCodes = ({\n baja_incidencia_bajo_crecimiento: \"green\",\n media_incidencia_bajo_crecimiento: \"orange\",\n alta_incidencia_bajo_crecimiento: \"red\",\n baja_incidencia_alto_crecimiento: \"yellow\",\n media_incidencia_alto_crecimiento: \"orange\",\n alta_incidencia_alto_crecimiento: \"red\",\n \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6481,"value":"validDates = _.chain(data)\n .filter(d => \n (indicadorY == \"positividad\" && !(d.positividadMedia == null))\n || (indicadorY == \"crecimiento\" && !(d.variacionSemanal == null))\n )\n .map(d => d.date)\n .uniq()\n //.filter(d => moment(maxDate).diff(moment(d), \"weeks\") < 10)// Last 6 weeks\n\n //.filter(d => moment(d).day()==1)// Lunes\n //.filter(d => moment(d).day()==5)\n //.filter(d => [5,6].includes(moment(d).day()))\n .sortBy(d => d)\n .value()","pinned":false,"hidden":false,"mode":"ojs"},{"id":6925,"value":"firstDate = _.chain(validDates).first().value()","pinned":false,"hidden":false,"mode":"ojs"},{"id":6350,"value":"maxDate_ = _.max(data.map(d => d.date))","pinned":false,"hidden":false,"mode":"ojs"},{"id":5770,"value":"transitionTime = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":5097,"value":"omitDates = [\"2020-06-08\",\"2020-06-12\",\"2020-06-15\", \"2020-06-19\", \"2020-06-23\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2536,"value":"standardNames= ({\n \"Arica y Parinacota\": \"Arica y Parinacota\",\n\"Tarapaca\": \"Tarapacá\",\n\"Antofagasta\": \"Antofagasta\",\n\"Atacama\": \"Atacama\",\n\"Coquimbo\": \"Coquimbo\",\n\"Valparaiso\": \"Valparaíso\",\n\"Metropolitana\": \"Metropolitana\",\n\"Del Libertador General Bernardo O’Higgins\":\"O'Higgins\",\n\"O’Higgins\":\"O'Higgins\",\n\"Maule\": \"Maule\",\n\"Nuble\": \"Ñuble\",\n\"Biobio\": \"Biobío\",\n\"La Araucania\": \"Araucanía\",\n\"Los Rios\": \"Los Ríos\",\n\"Los Lagos\": \"Los Lagos\",\n\"Aysen\": \"Aysén\",\n\"Magallanes y la Antartica\": \"Magallanes\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2884,"value":"locale_es_ES = d3.json(\"https://raw.githubusercontent.com/d3/d3-time-format/master/locale/es-ES.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":840,"value":"// Base trasition duration during transitions \nduration = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":6881,"value":"ordenRegiones = ({\n\"Arica y Parinacota\": 10,\n\"Tarapacá\": 20,\n\"Antofagasta\": 30,\n\"Atacama\": 40,\n\"Coquimbo\": 50,\n\"Valparaíso\": 60,\n\"Metropolitana\": 70,\n\"O’Higgins\": 80,\n\"Maule\": 90,\n\"Ñuble\":100,\n\"Biobío\": 110,\n\"Araucanía\": 120,\n\"Los Ríos\": 130,\n\"Los Lagos\": 140,\n\"Aysén\": 150,\n\"Magallanes\": 160\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1384,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6342,"value":"dataGroupedByLocation = { \n \n // Filter records only before the selected max date\n const _data = data\n \n function getMetricSummary(item) {\n return {\n incidencia100K: item.incidencia100K,\n crecimiento: item.variacionSemanal,\n positividad: item.positividadMedia,\n data:item\n }\n }\n \n function getMetricsByDate(items) {\n const dict = {};\n \n items.forEach(d => {\n dict[d.date] = getMetricSummary(d)\n })\n \n return dict;\n }\n \n const newData = _.chain(_data)\n .groupBy(d => d.location)\n .map((items, location) => { \n return ({\n location: location,\n region: items[0].region,\n items: items,\n metricsByDate: getMetricsByDate(items),\n poblacion: items[0].poblacion\n })\n })\n .filter(d => !d.location.match(/Desconocido/))\n .value()\n \n return newData\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6339,"value":"data = data_chile_comunas_INFORME_EPI;","pinned":false,"hidden":false,"mode":"ojs"},{"id":3870,"value":"cuarentenasByCode = _.groupBy(dataCuarentenas_minCencia, d => d.location_code)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3850,"value":"dataCuarentenas_minCencia = {\n \n //const dataRaw = await d3.csv(\"https://raw.githubusercontent.com/MinCiencia/Datos-COVID19/master/output/producto29/Cuarentenas-Totales.csv\"); \n \n const dataRaw = await d3.csv(\"https://raw.githubusercontent.com/MinCiencia/Datos-COVID19/master/output/producto29/Cuarentenas-Totales.csv\");\n \n \n \n return _.chain(dataRaw)\n .filter(d => d.Estado == \"Activa\")\n .map(d => ({\n \n location: d.Nombre,\n detail: d.Nombre,\n scope: d[\"Alcance\"],\n start_date: moment(d[\"Fecha de Inicio\"]).format(\"YYYY-MM-DD\"),\n end_date: d[\"Fecha de Término\"] && moment(d[\"Fecha de Término\"]).format(\"YYYY-MM-DD\") || null,\n location_code: d[\"Código CUT Comuna\"]\n }))\n .sortBy(d => d.location)\n .value()\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6337,"value":"import {data_chile_comunas_SEREMIS, data_chile_comunas_INFORME_EPI} from \"@elaval/coronavirus-data\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1397,"value":"md`## Aux functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6909,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":6406,"value":"clasificacion = (incidencia, crecimiento) => {\n debugger;\n if (incidencia < 5 && crecimiento < 1) {\n return \"baja_incidencia_bajo_crecimiento\"\n } else if (incidencia < 10 && crecimiento < 0) {\n return \"media_incidencia_bajo_crecimiento\"\n } else if (incidencia >= 10 && crecimiento < 0) {\n return \"alta_incidencia_bajo_crecimiento\"\n } else if (incidencia < 5 && crecimiento >= 0) {\n return \"baja_incidencia_alto_crecimiento\"\n } else if (incidencia < 10 && crecimiento >= 0) {\n return \"media_incidencia_alto_crecimiento\"\n } else if (incidencia >= 10 && crecimiento >= 0) {\n return \"alta_incidencia_alto_crecimiento\"\n } else return null\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3997,"value":"function enCuarentena(item) {\n return item.lockdowns.find(d => {\n const fromDate = moment(d.start_date);\n const toDate = moment(d.end_date).add(1, \"day\")\n return moment(new Date()).isBetween(fromDate, toDate)\n }) ? true : false\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1387,"value":"md`## Code Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6953,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"import {style_bootstrap, style_fontawesome} from \"@elaval/utils\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":7104,"value":"import {rangeSlider}from \"@beerdrinker/range-slider\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"_ = require(\"lodash\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"moment = require('moment@2.24.0/moment.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2331,"value":"momentLocaleConfig = {\n moment.locale('es'); // 'en'\n \n moment.updateLocale('es', {\n weekdays : [\n \"Domingo\", \"Lunes\", \"Martes\", \"Miércoles\", \"Jueves\", \"Viernes\", \"Sábado\"\n ]\n});\n \n moment.updateLocale('es', {\n months : [\n \"Enero\", \"Febrero\", \"Marzo\", \"Abril\", \"Mayo\", \"Junio\", \"Julio\",\n \"Agosto\", \"Septiembre\", \"Octubre\", \"Noviembre\", \"Diciembre\"\n ]\n});\n \n moment.updateLocale('es', {\n monthsShort : [\n \"Ene\", \"Feb\", \"Mar\", \"Abr\", \"May\", \"Jun\",\n \"Jul\", \"Ago\", \"Sep\", \"Oct\", \"Nov\", \"Dic\"\n ]\n});\n \n moment.updateLocale('es', {\n weekdaysShort : [\"Dom\", \"Lun\", \"Mar\", \"Mie\", \"Jue\", \"Vie\", \"Sab\"]\n});\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"import {input, autoSelect,text, select, date, radio, button, number, slider, checkbox} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"ga = {\n const ga = await require(\"https://www.google-analytics.com/analytics.js\").catch(() => window.ga);\n ga(\"create\", \"UA-143020946-10\", \"auto\");\n ga(\"send\", \"pageview\", html``.pathname);\n return ga;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}