31:T643,html``32:T4cd2,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: this.scaleRanges.incidencia100K[1], 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 } ] } 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.referenceLinesData = { "positividad" : [0.04, 0.10], "crecimiento" : [0] } this.yZoneLabels = { "positividad" : [ {y: 0.025, label: "BAJA"}, {y: 0.07, label: "MEDIA"}, {y: 0.15, label: "ALTA"} ], "crecimiento" : [ {y: -0.5, label: "DISMINUYENDO"}, {y: 0.5, label: "AUMENTANDO"}, ], } this.yZoneLabelsPositividad = [ {y: 0.1, label: "POSITIVIDAD"} ] 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 = logScale ? d3.scaleLog() : d3.scaleLinear() this.xScale .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")); //.ticks(20); 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) ${logScale ? `| Escala Logarítmica` : ``}`) 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.container.selectAll("text.yZoneLabelPositividad") .data(this.yZoneLabelsPositividad) .join("text") .attr("class","yZoneLabelPositividad") .attr("font-family", "sans-serif") .attr("font-size", 14) .attr("fill", "grey") .attr("transform",`rotate(90)`) .attr("x", this._width) .attr("dy", -20) //.attr("dx", "3em") .style("text-anchor", "middle") .text(d => d.label); 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("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); 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) } render(_data, fecha) { debugger; this.xAttribute = "incidencia100K"; this.yAttribute = "positividad"; this.xAttributePrev = "incidencia100K_semana_previa"; this.yAttributePrev = "positividad_semana_previa"; this.sizeAttribute = "poblacion"; this.maxIncidencia = 200; 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, positividad_semana_previa_original: d.positividad_semana_previa, positividad_semana_previa: d.positividad_semana_previa == null ? 0 : d.positividad_semana_previa <= this.maxPositividad ? d.positividad_semana_previa : this.maxPositividad, incidencia100K : d.incidencia <= this.maxIncidencia ? d.incidencia : this.maxIncidencia, incidencia100K_original: d.incidencia, incidencia100K_semana_previa : d.incidencia_semana_previa <= this.maxIncidencia ? d.incidencia_semana_previa : this.maxIncidencia, incidencia100K_previa_original: d.incidencia_semana_previa, recent: d.recent, poblacion: d.poblacion, searched: d.searched })) .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 => !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; const escala = this.xScale this.xScale.domain(this.scaleRanges[this.xAttribute]) //this.xScale.domain([1, this.scaleRanges[this.xAttribute][1]]) this.yScale.domain(this.scaleRanges[this.yAttribute]) this.size.domain(d3.extent(data, d => d[this.sizeAttribute])) console.log(escala(1)); console.log(escala.domain()); console.log(escala.range()); 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("dy", -5) .attr("y", d => this.yScale(d.y)) .attr("transform", d => `rotate(${90},${this._width},${this.yScale(d.y)})`) this.container.selectAll("text.yZoneLabelPositividad") .attr("y", d => this.yScale(d.y)) .attr("dy", -30) .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 `Chile por Regiones - ${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.prev") .data(d => [d]) .join("circle") .attr("class","prev") .attr("cx",d => this.xScale(d[this.xAttributePrev])-this.xScale(d[this.xAttribute])) .attr("cy",d => this.yScale(d[this.yAttributePrev])-this.yScale(d[this.yAttribute])) .attr("r",d => { return this.size(d.poblacion) }) .attr("opacity", 0) .attr("stroke-width", d=> d.beyondLimit ? 3 : 0.5) .attr("stroke-dasharray", 4) .attr("stroke", d=> d.beyondLimit ? "black" : "black") .attr("fill","none") bubbles.selectAll("circle.target") .data(d => [d]) .join("circle") .attr("class","target") .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 => "#EEE")// d => this.color(clasificacion(d.incidencia100K, d.crecimiento))) //.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.vector2") .data(d => [d]) .join("path") .attr("class","vector2") .attr("d",d => trayectoria(d.recent.map(e => ({ x: this.xScale(e.incidencia)-this.xScale(d[this.xAttribute]), y: this.yScale(e.positividad)-this.yScale(d[this.yAttribute]) })))) .attr("stroke-width", 1.5) .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"); if (hideBubbles) { bubbles .attr("opacity", 0) } 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; } }33:T48a,function getNodes(date) { const data = dataGroupedByLocation; const recentDates = _.chain(_.range(0,8)) .map(d => moment(date).subtract(d,"day").format("YYYY-MM-DD")) .reverse() .value(); function isSearched(item) { const searchExpression = textoABuscar.split(",").map(d => d.trim()).join("|"); const re = new RegExp(searchExpression, "i"); return textoABuscar && !!item.location.match(re) } const nodes = data.map(d => ({ name: d.location, positividad: d.metricsByDate[date] && d.metricsByDate[date].positividad, incidencia: d.metricsByDate[date] && d.metricsByDate[date].incidencia100K, positividad_semana_previa: d.metricsByDate[date] && d.metricsByDate[date].positividad_semanal_semana_previa, incidencia_semana_previa: d.metricsByDate[date] && d.metricsByDate[date].incidencia_semana_previa, poblacion: d.poblacion, searched: isSearched(d), recent: recentDates.map(f => ({ date:f, positividad: d.metricsByDate[f] && d.metricsByDate[f].positividad, incidencia: d.metricsByDate[f] && d.metricsByDate[f].incidencia100K, })) })) return nodes }34:[] 2f:{"title":"COVID19 - Comportamiento regional: Incidencia & Positividad","cells":[{"id":0,"value":"md`# COVID19 - Comportamiento regional: Incidencia & Positividad`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6810,"value":"viewof textoABuscar = text({title: \"Destacar región\", placeholder: \"Nombre de la región\", description: \"Se destacarán las regiones cuyo nombre que contenga este texto (múltiples valores separados por coma)\"})","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":7052,"value":"md`Notas:\n* El tamaño de las burbujas representa la población de la región.\n* La línea azul representa el movimiento de la región en la última semana.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7210,"value":"viewof xRange = rangeSlider({\n min: 1,\n max: 100,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [1, Math.ceil(rangeIncidencia[1]+10)],\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":7222,"value":"viewof yRange = rangeSlider({\n min: 0,\n max: .5,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [0, Math.ceil((rangePositividad[1]+0.01)*100)/100],\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":7289,"value":"{\n const data = getNodes(selectedDate).filter(d => !showOnly || showOnly.includes(d.name));\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.incidencia)}

\n `\n\n return out\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"html`

Autor

Ernesto Laval (@elaval)

\n\n

Fuente de datos

\n\nDatos de casos totales por región publicados por el Ministerio de Ciencia en:\nhttps://raw.githubusercontent.com/MinCiencia/Datos-COVID19/master/output/producto3/TotalesPorRegion_std.csv \n

\nDatos de exámenes PCR por región publicados por el Ministerio de Ciencia en:\nhttps://raw.githubusercontent.com/MinCiencia/Datos-COVID19/master/output/producto7/PCR_std.csv \n\n\n\n

\n\n\n

\n\n\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":7268,"value":"showOnly = null // [\"Araucanía\", \"Magallanes\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":7259,"value":"logScale = true","pinned":true,"hidden":false,"mode":"ojs"},{"id":7245,"value":"hideBubbles = false","pinned":true,"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":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":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":4832,"value":"md`# Vis`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7354,"value":"getNodes(selectedDate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6434,"value":"renderer = {\n const nodes = getNodes(selectedDate).filter(d => !showOnly || showOnly.includes(d.name))\n \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":"$32","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 .map(d => d.date)\n .uniq()\n .filter(d => d >= minDate)\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":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.incidencia,\n positividad: item.positividad_semanal,\n incidencia_semana_previa: item.weekAgo_incidencia,\n positividad_semanal_semana_previa: item.weekAgo_positividad_semanal,\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 items: items,\n metricsByDate: getMetricsByDate(items),\n poblacion: items[0].poblacion\n })\n })\n .filter(d => !d.location.match(/Total/))\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":7391,"value":"minDate = moment(_.chain(data).filter(d => d.positividad_semanal).min(d => d.date).value()[\"date\"]).add(1,\"week\").format(\"YYYY-MM-DD\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":7400,"value":"rangePositividad = d3.extent(_.chain(data).filter(d => d.date >= moment(maxDate_).subtract(1,\"week\").format(\"YYYY-MM-DD\")).map(d => d.positividad_semanal).value(), d => d)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7407,"value":"rangeIncidencia = d3.extent(_.chain(data).filter(d => d.date >= moment(maxDate_).subtract(1,\"week\").format(\"YYYY-MM-DD\")).map(d => d.incidencia).value(), d => d)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7066,"value":"data = {\n const dict = {};\n \n return _.chain(data_chile_regiones)\n .each(d => {\n const location = d[\"location\"] ;\n const date = d[\"date\"]\n const weekAgoDate = moment(date).subtract(7,\"day\").format(\"YYYY-MM-DD\");\n \n dict[location] = dict[location] || {};\n dict[location][date] = d;\n \n if (dict[location][weekAgoDate]) {\n debugger;\n d[\"weekAgo_incidencia\"]=dict[location][weekAgoDate][\"incidencia\"];\n d[\"weekAgo_positividad_semanal\"]=dict[location][weekAgoDate][\"positividad_semanal\"];\n }\n \n })\n .map(d => d)\n .value()\n}","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, data_chile_regiones} from \"@elaval/coronavirus-data\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1397,"value":"md`## Aux functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7092,"value":"getNodes(\"2020-09-05\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":6909,"value":"$33","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":7207,"value":"import {rangeSlider}from \"@beerdrinker/range-slider\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"import {style_bootstrap, style_fontawesome} from \"@elaval/utils\"","pinned":false,"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":"$W34","stdlib":"1","titling":"auto"}