31:T50c,showOnly2 = null /* [ "Arica y Parinacota", "Tarapacá", "Antofagasta", "Atacama", "Coquimbo", "Valparaíso", "Metropolitana", "O'Higgins", "Maule", "Ñuble", "Biobío", "Araucanía", "Los Ríos", "Los Lagos", "Aysén", "Magallanes" ] */ /* [ //"Arica y Parinacota", "Tarapacá", "Antofagasta", //"Atacama", //"Coquimbo", //"Valparaíso", //"Metropolitana", //"O'Higgins", //"Maule", //"Ñuble", "Biobío", "Araucanía", //"Los Ríos", //"Los Lagos", //"Aysén", "Magallanes" ] /* [ //"Arica y Parinacota", //"Tarapacá", "Antofagasta", "Atacama", "Coquimbo", "Valparaíso", "Metropolitana", "O'Higgins", //"Maule", //"Ñuble", "Biobío", //"Araucanía", "Los Ríos", "Los Lagos", "Aysén", //"Magallanes" ] */ /* [ "Arica y Parinacota", //"Tarapacá", //"Antofagasta", //"Atacama", // "Coquimbo", //"Valparaíso", // "Metropolitana", //"O'Higgins", "Maule", "Ñuble", //"Biobío", //"Araucanía", //"Los Ríos", //"Los Lagos", //"Aysén", //"Magallanes" ] */ 32:Ta3a,function Scrubber2(values, { format = value => value, initial = 0, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {}) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; let direction = 1; function start() { form.b.textContent = "Next"; if (delay === null) frame = requestAnimationFrame(tick); //else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Next"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); disposal(form).then(stop); return form; }33:T643,html``34:T5e54,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 | Escala logarítmica", "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 visible: !focusHigh }, { 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 visible: !focusHigh }, { left: this.scaleRanges["incidencia100K"][0], right: 10, bottom: 0.08, top:0.1, color:"#fdae61", // naranjo TRANSICIÓN visible: !focusHigh }, { left: 5, right: 10, bottom: this.scaleRanges[indicadorY][0], top:0.08, color:"#ffffbf", // amarillo PREPARACIÓN visible: !focusHigh }, { left: this.scaleRanges["incidencia100K"][0], right: 5, bottom: 0.04, top:0.08, color:"#ffffbf", // amarillo PREPARACIÓN visible: !focusHigh }, { left: this.scaleRanges["incidencia100K"][0], right: this.scaleRanges.incidencia100K[1], bottom: 0.1, top:this.scaleRanges[indicadorY][1], color:"#d7191c", // rojo CUARENTENA visible: true }, { left: 10, right: this.scaleRanges.incidencia100K[1], bottom: this.scaleRanges[indicadorY][0], top:this.scaleRanges[indicadorY][1], color:"#d7191c", // rojo CUARENTENA visible: true } ] } this.phaseLabels = [ { name: "CUARENTENA", color: "white", left: this.scaleRanges["incidencia100K"][0], bottom: 0.1, visible: true }, { name: "TRANSICIÓN", color: "black", left: this.scaleRanges["incidencia100K"][0], bottom: 0.08, visible: !focusHigh }, { name: "PREPARACIÓN", color: "black", left: this.scaleRanges["incidencia100K"][0], bottom: 0.04, visible: !focusHigh }, { name: "APERTURA INICIAL", color: "black", left: this.scaleRanges["incidencia100K"][0], bottom: 0.02, visible: !focusHigh }, { name: "APERTURA AVANZADA", color: "black", left: this.scaleRanges["incidencia100K"][0], bottom: 0.02, dy: 15, visible: !focusHigh }, ] 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.labelSize = enlarge ? largeSize : 12; 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)) function customFormat(d) { return (d >= 0.01) ? d3.format(".0%")(d) : d3.format(".1%")(d) } this.yAxis = d3.axisLeft(this.yScale) //.ticks(10) .tickFormat(customFormat); 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.bubbleContainer = this.container.selectAll("g.bubbleContainer") .data([1]) .join("g") .attr("class", "bubbleContainer") this.arrowContainer = this.container.selectAll("g.arrowContainer") .data([1]) .join("g") .attr("class", "arrowContainer") 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 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") .style("display", focusHigh ? "none": true); 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") .style("display", focusHigh ? "none": true); 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") .style("display", focusHigh ? "none": true); 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", d => d.dy || "-5") .attr("dx", "5") .style("text-anchor", "left") .text(d => d.name) .attr("display", d => d.visible ? true : "none") 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) { this.xAttribute2 = "incidencia"; 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 = _.chain(_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) .sortBy(d => d.name == "Metropolitana" ? -1 : 1) .value() 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; } }) data.forEach(d=> { const recentSlice = d.recent.filter(e => e.date <= this._date); const newRecent = []; _.range(0, d.recent.length -recentSlice.length).forEach(e => { newRecent.push(d.recent[0]); }) recentSlice.forEach(e => { newRecent.push(e); }) d.recent2 = newRecent; }) 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(1000); const t2 = this.arrowContainer.transition() .duration(1000); 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(allNodes, 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") .text(`Chile por Regiones - ${moment(this._date).format("DD MMMM")}`) /* .transition(t) .textTween(function(d) { 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) .attr("display", d => d.visible ? true: "none") const bubbles = this.bubbleContainer.selectAll("g.bubble") .data(data, d => d.name) .join( enter => enter.append("g") .attr("class","bubble") .attr("transform", d => `translate(${this.xScale(d[this.xAttribute])}, ${this.yScale(d[this.yAttribute])})`) .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", d0 => { const d = _.last(d0.recent2) return `translate(${this.xScale(d[this.xAttribute2])}, ${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); }) console.log(this.arrowContainer.selectAll("g.bubble0").nodes()) const bubbles0 = this.arrowContainer.selectAll("g.bubble0") .data(data, d => d.name) .join("g") .attr("class", "bubble0") .attr("transform", d => { const d0 = d.recent[0]; return `translate(${this.xScale(d0["incidencia"])}, ${this.yScale(d0[this.yAttribute])})` }) .attr("display", d => { debugger; const d0 = d.recent[0]; return d0.date == self._date ? "none" : null }) 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) console.log(bubbles0.selectAll("path.vector2").nodes()) bubbles0.selectAll("path.vector2") .data(d => [d]) .join( enter => enter.append("path") .attr("class","vector2") .attr("stroke-width", 2) .attr("stroke", this.colorTrayectoria) .attr("marker-end", "url(#arrow)") .call(enter => enter .attr("d",d => { const items = d.recent2 debugger; return trayectoria(items.map(e => { const d0 = d.recent2[0] return ({ x: this.xScale(e.incidencia)-this.xScale(d0["incidencia"]), y: this.yScale(e.positividad)-this.yScale(d0[this.yAttribute]) }) })) }) ) , update => update .call(update => update.transition(t2) .attr("d",d => { debugger; return trayectoria(d.recent2.map(e => { const d0 = d.recent2[0] return ({ x: this.xScale(e.incidencia)-this.xScale(d0["incidencia"]), y: this.yScale(e.positividad)-this.yScale(d0[this.yAttribute]) }) })) }) ), exit => exit .call(exit => { exit .attr("opacity",0) .remove() }) ) /* bubbles0.selectAll("path.vector2") .data(d => [d]) .join("path") .call(enter => enter .attr("class","vector2") .attr("d",d => { const items = _.take(d.recent2, d.recent2.length-1) debugger; return "" return trayectoria(items.map(e => { const d0 = d.recent2[0] return ({ x: this.xScale(e.incidencia)-this.xScale(d0["incidencia"]), y: this.yScale(e.positividad)-this.yScale(d0[this.yAttribute]) }) })) }) .attr("stroke-width", 2) //.attr("stroke-dasharray", 1.5) .attr("stroke", this.colorTrayectoria) .attr("marker-end", "url(#arrow)") , update => update .call(update => update.transition(t2) .attr("d",d => { debugger; return trayectoria(d.recent2.map(e => { const d0 = d.recent2[0] return ({ x: this.xScale(e.incidencia)-this.xScale(d0["incidencia"]), y: this.yScale(e.positividad)-this.yScale(d0[this.yAttribute]) }) })) }) ), exit => exit .call(exit => { exit .attr("opacity",0) .remove() }) ) */ 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",this.labelSize) .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; } }35:T57bd,class IncidenceGrowthQuadrantsVis { constructor(el, metric) { this._data = []; this._margin = {left: 60, right:100, top:80, bottom: 80}; this._totalWidth = width; this._totalHeight = width *0.60; this._attributeX = "incidencia100K"; this.yLabels = { "positividad": "Positividad últimos 7 días | Escala logarítmica", "crecimiento": "Variación del aumento en 7 días", "growth": "CRECIMIENTO (Variación de positividad en 7 días)", } this.xLabels = { "incidencia100K" : "INCIDENCIA (Nuevos casos diarios x 100 mil habitantes, promedio última semana)", "muertes_x_1MM" : "MUERTES DIARIAS x 1 Millón de habitantes (promedio última semana)", } this.scaleRanges = { "positividad": yRange, "crecimiento":[-1,1], "incidencia100K":xRange, "muertes_x_1MM":[0.4, 15], "growth":[-1,1] } this.criticalPoint = { "incidencia100K":10, "muertes_x_1MM":2 } 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" : [ ] } this.phaseLabels = [ ] this.quadrantLabels = { incidencia100K: [ ["INCIDENCIA MENOS ALTA", "AUMENTANDO CONTAGIOS"], ["INCIDENCIA MUY ALTA", "AUMENTANDO CONTAGIOS"], ["INCIDENCIA MENOS ALTA", "REDUCIENDO CONTAGIOS"], ["INCIDENCIA MUY ALTA", "REDUCIENDO CONTAGIOS"], ], muertes_x_1MM: [ ["MORTALIDAD MENOS ALTA", "AUMENTANDO CONTAGIOS"], ["MORTALIDAD MUY ALTA", "AUMENTANDO CONTAGIOS"], ["MORTALIDAD MENOS ALTA", "REDUCIENDO CONTAGIOS"], ["MORTALIDAD MUY ALTA", "REDUCIENDO CONTAGIOS"], ], } this.xAxisLabel = { "incidencia100K" : "NUEVOS CASOS CONFIRMADOS (Promedio diariox x 100 mil habitantes en última semana)", "muertes_x_1MM" : "MUERTES DIARIAS x 1 Millón de habitantes (promedio última semana)", } this.referenceLinesData = { "positividad" : [0], "crecimiento" : [0], "incidencia100K" : [this.criticalPoint["incidencia100K"]], "incidencia" : [this.criticalPoint[this._attributeX]], "muertes_x_1MM" : [this.criticalPoint["muertes_x_1MM"]], } this.yZoneLabels = { "positividad" : [ ], "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() { const self = this; 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([10,10]) this.color = d3.scaleOrdinal() .range(_.map(colorCodes, (color,key)=> color)) .domain(_.map(colorCodes, (color,key)=> key)) function customFormat(d) { return (d >= 0.01) ? d3.format(".0%")(d) : d3.format(".0%")(d) } this.yAxis = d3.axisLeft(this.yScale) //.ticks(10) .tickFormat(customFormat); this.xAxis = d3.axisBottom(this.xScale) .tickFormat(d3.format(".1f")); //.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.container.selectAll("g.quadLabels") .data([null]) .join("g") .attr("class", "quadLabels") this.container.select("g.quadLabels").selectAll("g.quadLabel") .data(this.quadrantLabels[this._attributeX]) .join("g") .attr("class", "quadLabel") /* .attr("transform", (d,i) => ` translate(${quadLabelPos(i)[0]}, ${quadLabelPos(i)[1]}) `) */ this.container.select("g.quadLabels").selectAll("g.quadLabel").selectAll("text.line1") .data(d => [d]) .join("text") .attr("text-anchor", "middle") .attr("class", "line1") .text(d => d[0]) this.container.select("g.quadLabels").selectAll("g.quadLabel").selectAll("text.line2") .data(d => [d]) .join("text") .attr("class", "line2") .attr("text-anchor", "middle") .attr("dy", "1em") .text(d => d[1]) this.bubbleContainer = this.container.selectAll("g.bubbleContainer") .data([1]) .join("g") .attr("class", "bubbleContainer") this.arrowContainer = this.container.selectAll("g.arrowContainer") .data([1]) .join("g") .attr("class", "arrowContainer") 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(`${this.xLabels[this._attributeX]} ${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["growth"]); 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", d => d.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) this.container.selectAll("line.referenceX") .data(this.referenceLinesData[this._attributeX]) .join("line") .attr("class", "referenceX") .attr("stroke-width", 1) .attr("stroke", "black") .attr("stroke-dasharray", "5 5 5 5") .attr("y1", 0) .attr("y2", this._height) } render(_data, fecha) { debugger; this.xAttribute2 = "incidencia"; this.xAttribute = this._attributeX; this.yAttribute = "positividad"; this.yAttribute = "growth"; 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 minX = _.min(_.map(_data, d => d[this.xAttribute])); this.scaleRanges["muertes_x_1MM"][0] = minX; const data = _.chain(_data).map(d => ({ name: d.name, growth: d.growth, 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, muertes_x_1MM: d.muertes_x_1MM, 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) .sortBy(d => d.name == "Metropolitana" ? -1 : 1) .value() 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; } }) data.forEach(d=> { const recentSlice = d.recent.filter(e => e.date <= this._date); const newRecent = []; _.range(0, d.recent.length -recentSlice.length).forEach(e => { newRecent.push(d.recent[0]); }) recentSlice.forEach(e => { newRecent.push(e); }) d.recent2 = newRecent; }) 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(1000); const t2 = this.arrowContainer.transition() .duration(1000); 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]) const maxAbsY = d3.max(data, d => Math.abs(d[this.yAttribute])) this.yScale.domain([-maxAbsY, maxAbsY]) console.log("Y DOMAIN"); console.log(this.yScale.domain()); console.log(data[0][this.yAttribute]); console.log(this.yScale(data[0][this.yAttribute])); this.size.domain(d3.extent(allNodes, 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.selectAll("line.referenceX") .attr("x1", d => this.xScale(d)) .attr("x2", d => this.xScale(d)) //this.container.select("text.title.label") //.text(`${this._region} - ${moment(this._date).format("DD MMMM")}`) this.container.select("text.title.label") .text(`Chile por Regiones - ${moment(this._date).format("DD MMMM")}`) /* .transition(t) .textTween(function(d) { 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.bubbleContainer.selectAll("g.bubble") .data(data, d => d.name) .join( enter => enter.append("g") .attr("class","bubble") .attr("transform", d => `translate(${this.xScale(d[this.xAttribute])}, ${this.yScale(d[this.yAttribute])})`) .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", d0 => { const d = _.last(d0.recent2) return `translate(${this.xScale(d[this.xAttribute2])}, ${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.target") .data(d => [d]) .join("circle") .attr("class","target") .classed("safe",d => d[this.xAttribute] < self.criticalPoint[self.xAttribute] && d.growth <0) .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) /* bubbles0.selectAll("path.vector2") .data(d => [d]) .join("path") .call(enter => enter .attr("class","vector2") .attr("d",d => { const items = _.take(d.recent2, d.recent2.length-1) debugger; return "" return trayectoria(items.map(e => { const d0 = d.recent2[0] return ({ x: this.xScale(e.incidencia)-this.xScale(d0["incidencia"]), y: this.yScale(e.positividad)-this.yScale(d0[this.yAttribute]) }) })) }) .attr("stroke-width", 2) //.attr("stroke-dasharray", 1.5) .attr("stroke", this.colorTrayectoria) .attr("marker-end", "url(#arrow)") , update => update .call(update => update.transition(t2) .attr("d",d => { debugger; return trayectoria(d.recent2.map(e => { const d0 = d.recent2[0] return ({ x: this.xScale(e.incidencia)-this.xScale(d0["incidencia"]), y: this.yScale(e.positividad)-this.yScale(d0[this.yAttribute]) }) })) }) ), exit => exit .call(exit => { exit .attr("opacity",0) .remove() }) ) */ 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 quadLabelPos(i) { if (i==0) { return [ (self.xScale([self.criticalPoint[self.xAttribute]])+ self.xScale(self.scaleRanges[self.xAttribute][0]))/2, (self.yScale(0)+ self.yScale(maxAbsY))/2 ] } else if (i==1) { return [ (self.xScale([self.criticalPoint[self.xAttribute]])+ self.xScale(self.scaleRanges[self.xAttribute][1]))/2, (self.yScale(0)+ self.yScale(maxAbsY))/2 ] } else if (i==2) { return [ (self.xScale([self.criticalPoint[self.xAttribute]])+ self.xScale(self.scaleRanges[self.xAttribute][0]))/2, (self.yScale(0)+ self.yScale(-maxAbsY))/2 ] } else if (i==3) { return [ (self.xScale([self.criticalPoint[self.xAttribute]])+ self.xScale(self.scaleRanges[self.xAttribute][1]))/2, (self.yScale(0)+ self.yScale(-maxAbsY))/2 ] } } this.container.select("g.quadLabels").selectAll("g.quadLabel") .data(this.quadrantLabels[this._attributeX]) .join("g") .attr("class", "quadLabel") .attr("transform", (d,i) => ` translate(${quadLabelPos(i)[0]}, ${quadLabelPos(i)[1]}) `) 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; } attributeX(_) { this._attributeX = _; this.startup(); return this; } }36:T549,data2 = { const dict = {}; return _.chain(dataChile) .map(d => ({ location: d.localidad, date: d.fecha, incidencia: d.incidencia, positividad_semanal: d.positividad, poblacion: d.poblacion })) .value() /* location: "Arica y Parinacota" date: "2020-04-09" new_tests: 70 total_tests: 70 weekly_tests: 70 poblacion: 252110 total_cases: 75 weekly_cases: 68 new_cases: 12 new_cases_con_sintomas: 12 new_cases_sin_sintomas: 0 new_cases_sin_notificar: 0 total_deaths: 0 total_probable: 0 incidencia: 3.9 positividad_semanal: 0.9714285714285714 return _.chain(data_chile_regiones) .each(d => { const location = d["localidad"] ; const date = d["fecha"] const weekAgoDate = moment(date).subtract(7,"day").format("YYYY-MM-DD"); dict[location] = dict[location] || {}; dict[location][date] = d; if (dict[location][weekAgoDate]) { d["weekAgo_incidencia"]=dict[location][weekAgoDate]["incidencia"]; d["weekAgo_positividad_semanal"]=dict[location][weekAgoDate]["positividad_semanal"]; d["nuevas_muertes_semana"] = d["total_deaths"] - dict[location][weekAgoDate]["total_deaths"]; d["nuevas_muertes_x_1MM"] = 1000000*d["nuevas_muertes_semana"]/d["poblacion"]/7; } }) .map(d => d) .value() */ }37:T5f8,function getNodes(date) { const data = dataGroupedByLocation; const recentDates = _.chain(_.range(0,8)) .map(d => moment(date).subtract(d,"day").format("YYYY-MM-DD")) .filter(d => d >= fromDate) .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, growth: d.metricsByDate[date] && (d.metricsByDate[date].positividad / d.metricsByDate[date].positividad_semanal_semana_previa) - 1, muertes_x_1MM : d.metricsByDate[date] && d.metricsByDate[date]["nuevas_muertes_x_1MM"], muertes_x_semana : d.metricsByDate[date] && d.metricsByDate[date]["nuevas_muertes_semana"], 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 }38:[] 2f:{"title":"COVID19 - Reporte semanal x regiones: Incidencia & Positividad","cells":[{"id":0,"value":"md`# COVID19 - Reporte semanal x regiones: Incidencia & Positividad`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8006,"value":"selection = \"Coq, Anto, Tara\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":8432,"value":"\n\nviewof enlarge = checkbox({\n options: [{ value: \"true\", label: \"Enlarge font\" }],\n value: \"true\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8435,"value":"largeSize = 18","pinned":true,"hidden":false,"mode":"ojs"},{"id":8542,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":8469,"value":"\n\nviewof focusHigh = checkbox({\n options: [{ value: \"true\", label: \"Seleccionar area de alta positividad e incidencia\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8697,"value":"viewof opcionSeleccion = radio({\n title: 'Filtrar regiones',\n description: 'Regiones a seleccionas',\n options: [\n { label: 'Todas', value: 'todas' },\n { label: 'Creciendo', value: 'creciendo' },\n { label: 'Decreciendo', value: 'decreciendo' },\n ],\n value: 'todas'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":7268,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":8666,"value":"viewof showOnly = {\n \n /*\n const opciones = opcionSeleccion == \"creciendo\" \n ? nodesCrecen\n : opcionSeleccion == \"creciendo\"\n ? nodesDecrecen\n : allNodes\n */\n \nreturn checkbox({\n title: \"Regiones\",\n description: \"Please select your favorite colors\",\n options: [\n \"Arica y Parinacota\", \n \"Tarapacá\",\n \"Antofagasta\", \n \"Atacama\",\n \n \"Coquimbo\",\n \"Valparaíso\",\n \"Metropolitana\",\n \"O’Higgins\",\n \"Maule\",\n \"Ñuble\",\n \"Biobío\", \n \"Araucanía\", \n \"Los Ríos\",\n \n \"Los Lagos\",\n \"Aysén\",\n \"Magallanes\"\n \n ],\n value: [\n \"Arica y Parinacota\", \n \"Tarapacá\",\n \"Antofagasta\", \n \"Atacama\",\n \n \"Coquimbo\",\n \"Valparaíso\",\n \"Metropolitana\",\n \"O’Higgins\",\n \"Maule\",\n \"Ñuble\",\n \"Biobío\", \n \"Araucanía\", \n \"Los Ríos\",\n \n \"Los Lagos\",\n \"Aysén\",\n \"Magallanes\"\n \n ],\n submit: false\n})\n \n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":7615,"value":"viewof estado = radio({\n title: 'Selección',\n options: [\n {label:\"Incidencia crítica\", value:\"Incidencia crítica\"}, \n {label:\"Incidencia no crítica, Reduciendo\", value:\"No crítica Bajando\"}, \n {label:\"Incidencia no crítica, No reduciendo\", value:\"No crítica No Bajando\"}, \n {label:\"Selección\", value:\"Selection\"}, \n {label:\"Todos\", value:\"Todos\"}, \n\n\n \n \"Creciendo\", \n {label:\"Reduciendo\", value:\"Decreciendo\"}, \n \"Estable\", \n \"Alta Incidencia\",\n \"Incidencia No Alta\", \n \"Sube incidencia\",\n \"Baja incidencia\"\n \n ],\n value: 'Todos'\n})\n\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":8714,"value":"nodes","pinned":true,"hidden":false,"mode":"ojs"},{"id":7946,"value":"{\n //mutable toDate = \"2021-06-07\"\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":8688,"value":"nodesCrecen = {\n const crecen = allNodes.filter(d => d.recent[0].incidencia < d.recent[7].incidencia)\n \n return crecen\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8692,"value":"nodesDecrecen = {\n const crecen = allNodes.filter(d => d.recent[0].incidencia > d.recent[7].incidencia)\n \n return crecen\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8554,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":8340,"value":"{\n return html`\n \n \n \n ${nodes.map(d => `\n \n \n `)}\n

Nombre	\n	Incidencia	\n	Positividad	\n	Crecimiento	\n\n
${d.name}	\n	${d.incidencia}	\n	${d3.format(\".1%\")(d.positividad)}	\n	${d3.format(\".1%\")(d.growth)}	\n

\n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7739,"value":"//viewof selectedDate1 = Scrubber([fromDate, toDate], {\nviewof animateDate = Scrubber(validDates.filter(d => d >= fromDate && d <= toDate), {\n initial:7,\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":7210,"value":"viewof xRange = {\n focusHigh;\n return rangeSlider({\n min: 0.01,\n max: 200,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [ focusHigh ? 10 : 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})\n}","pinned":true,"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 : [focusHigh ? 0.02 : 0.001, _.max([Math.ceil((rangePositividad[1]+0.01)*100)/100, .12])],\n // Custom slider CSS, replaces all styles.\n\n format: '.2%',\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":8134,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":8089,"value":"visQuad = {\n const out = html`

\n \n \n

`;\n \n\n \n \n return out;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8255,"value":"//renderDate = toDate \nrenderDate = \"2020-10-01\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":8357,"value":"quadNodes","pinned":true,"hidden":false,"mode":"ojs"},{"id":8196,"value":"visQuadFallecidos = {\n const out = html`

\n \n \n

`;\n \n\n \n \n return out;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8098,"value":"nodes","pinned":true,"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":8032,"value":"moment(\"2020-11-29\").diff(moment(\"2020-08-21\"),\"days\")","pinned":true,"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\n \n ${_.map(data, d => `\n \n \n \n \n \n \n \n `)}\n

Región	Positividad ${moment(fromDate).format(\"D MMM\")}	Positividad ${moment(toDate).format(\"D MMM\")}	Incidencia ${moment(fromDate).format(\"D MMM\")}	Incidencia ${moment(toDate).format(\"D MMM\")}
${d.name}	${d3.format(\".2%\")(d.positividad_semana_previa)}	${d3.format(\".1%\")(d.positividad)}	${d3.format(\".1f\")(d.incidencia_semana_previa)}	${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":8051,"value":"{\n const fechas = _.chain(dataCamasUCI).map(d => d.date).uniq().sortBy().takeRight(6).value()\n const regiones = _.chain(dataCamasUCI).map(d => d.region).uniq().value()\n \n const data = _.chain(dataCamasUCI)\n .filter(d => fechas.includes(d.date))\n .groupBy(d => d.region)\n .value();\n \n //return data \n return html`\n

Ocupación camas UCI

\n \n \n \n ${fechas.map(d => `\n \n `)}\n \n ${_.map(data,(d,key) => `\n \n \n ${d.map(e => `\n \n `)}\n \n `)}\n

Región	${moment(d).format(\"D MMM\")}
${key}	${d3.format(\".1%\")(e.ocupacion)}

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