2b:null 2c:["$","title",null,{"children":"Información de COVID-19 en Renca | Ernesto Laval | Observable"}] 31:T4ba,html`

Situación al ${moment(maxFecha).format("D MMMM YYYY")}

Incidencia: ${d3.format(".1f")(registroActual.incidencia)} casos confirmados diarios por 100 mil habitantes (promedio en últimos 7 días)
Positividad: ${d3.format(".1%")(registroActual.positividad)} de los tests en los últimos 7 días dio positivo

7 días atrás la Incidencia era ${d3.format(".1f")(registroActual.semanaPrevia.incidencia)} y la positividad ${d3.format(".1%")(registroActual.semanaPrevia.positividad)}

${ estado == "creciendo" ? `

ALERTA
Positividad está creciendo

Es ${d3.format(".1f")(crecimientoPositividad)} veces lo que era 7 días atrás
Para controlar la epidemia se requiere una reducción sostenida de la positividad, que corresponde a la proporción de casos que dan positivo del total de tests que se realizan en los últimos 7 días

` : `` } `32:T727,html``33:T53f2,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 }, { 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.02, dy: 15 }, ] 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)) 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 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", 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) } 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(`${comuna} - ${moment(this._date).format("DD MMMM")}`) 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); }) 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() }) ) 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; } }34:T4c7,function buildIncidenceChart(options) { const selectedData = data.filter(d => d.fecha >= minFecha) const metric = options && options.metric || "incidencia"; const _width = options && options.width || width; const hideName = options && options.hideName; const showTrend = options && options.showTrend || false; const el = html`

Evolución de ${metric} en ${comuna} (${moment(minFecha).format("D MMM")} a ${moment(maxFecha).format("D MMM")})

` const visEl = d3.select(el).select("div.vis svg"); const visObj = new IncidenceVis(visEl.node()); visObj.width(_width).metric(metric).showTrend(showTrend).render(selectedData) return el } 35:T267f,class IncidenceVis { constructor(el) { this._data = []; this._margin = {left: 100, right:100, top:20, bottom: 60}; this._totalWidth = width; this._totalHeight = width/2; this._metric = "incidencia"; this.dateAttribute = "fecha"; this.logScale = logScale; this.lowerLimits = { incidencia: 0.5, positividad: 0.005, } this.format = { incidencia: d3.format(","), positividad: d3.format(".1%"), } this.yLabel = { incidencia: "Nuevos casos diarios x 100 mil habitantes", positividad: "Positividad", } this.referenceRanges = { incidencia: { high: { label: "INCIDENCIA ALTA", value: 10 }, low: { label: "INCIDENCIA BAJA", value: 2 } }, positividad: { high: { label: "POSITIVIDAD ALTA", value: 0.1 }, low: { label: "POSITIVIDAD BAJA", value: 0.02 } }, } this.svgContainer = d3.select(el); this.startup(); } startup() { this._width = this._totalWidth - this._margin.left - this._margin.right; this._height = this._totalHeight - this._margin.top - this._margin.bottom; this.lowThreshold = this.lowerLimits[this._metric]; this.xScale = d3.scaleTime() .range([0,this._width]) this.yScale = (this.logScale ? d3.scaleLog() : d3.scaleLinear()) .range([this._height,0]) this.baseFontSize = width / 60; this.colorScale = d3.scaleOrdinal(d3.schemeCategory10) var formatMillisecond = locale.format(".%L"), formatSecond = locale.format(":%S"), formatMinute = locale.format("%I:%M"), formatHour = locale.format("%I %p"), formatDay = locale.format("%a %d"), formatWeek = locale.format("%b %d"), formatMonth = locale.format("%d %b"), formatYear = locale.format("%Y"); function multiFormat(date) { return (d3.timeSecond(date) < date ? formatMillisecond : d3.timeMinute(date) < date ? formatSecond : d3.timeHour(date) < date ? formatMinute : d3.timeDay(date) < date ? formatHour : d3.timeMonth(date) < date ? (d3.timeWeek(date) < date ? formatDay : formatWeek) : d3.timeYear(date) < date ? formatMonth : formatYear)(date); } this.yAxis = d3.axisLeft(this.yScale) .tickFormat(this.format[this._metric]); this.xAxis = d3.axisBottom(this.xScale) .tickFormat(multiFormat); 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.container = this.svgContainer.selectAll("g.container") .data([1]) .join("g") .attr("class", "container") .attr("transform", `translate(${this._margin.left},${this._margin.top})`) this.container.append("rect") .attr("class", "alto") .attr("width", this._width) this.container.append("rect") .attr("class", "bajo") .attr("width", this._width) this.container.append("text") .attr("class", "label alto") .attr("text-anchor", "end") .attr("dy", "1em") .attr("fill", "white") .text(this.referenceRanges[this._metric].high.label) this.container.append("text") .attr("class", "label bajo") .attr("text-anchor", "end") .attr("dy", -5) .text(this.referenceRanges[this._metric].low.label) this.container .append("g") .attr("class", "y axis") this.container .append("g") .attr("transform", `translate(0,${this._height})`) .attr("class", "x axis") // text label for the x axis this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", this.baseFontSize) .attr("y", this._margin.bottom-32) .attr("class", "title x") .attr("dy", 5) .attr("transform",`translate(${this._width},${this._height})`) .style("text-anchor", "end") .text(`Fecha`); // text label for the y axis this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", this.baseFontSize) .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.yLabel[this._metric]); // text label for the y axis this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", this.baseFontSize) .attr("class", "title y log") .attr("transform",`rotate(-90)`) .attr("y", 0 - this._margin.left) .attr("x",0 - (this._height / 2)) .attr("dy", "2em") .style("text-anchor", "middle") .text("Escala logarítmica"); this.line = d3.line() .x((d, i) => this.xScale(moment(d[this.dateAttribute]))) // set the x values for the line generator .y((d) => this.yScale(+d[this._metric] && +d[this._metric] >= this.lowThreshold ? +d[this._metric] : this.lowThreshold )) // set the y values for the line generator .curve(d3.curveMonotoneX) // apply smoothing to the line } getY(record) { return this.yScale(+record[this._metric] && +record[this._metric] >= this.lowThreshold ? +record[this._metric] : this.lowThreshold ) } render(data) { const dateAttribute = this.dateAttribute const self = this; debugger; const maxCases = _.max(data.map(d=> +d[this._metric])); const minCases = _.min(data.map(d=> +d[this._metric])); const startDate = data[0][dateAttribute]; const endDate = _.last(data)[dateAttribute]; const startValue = maxCases; const endValue = _.last(data)[this._metric];; const numWeeks = -moment(startDate).diff(moment(endDate), "weeks"); // Update axis this.xScale.domain(d3.extent(data, d => moment(d[dateAttribute]))) this.yScale.domain([this.lowerLimits[this._metric],maxCases]) this.container.select("g.y.axis") .call(this.yAxis) this.container.select("g.x.axis") .call(this.xAxis) const trendLineData = [0.05, 0.10, 0.20] .map(d => buildTrendPoints(startDate,startValue,numWeeks,d)) .map(d => ({ rate: d.rate, x1: this.xScale(moment(d.startDate)), x2: this.xScale(moment(d.endDate)), y1: this.yScale(d.startValue), y2: this.yScale(d.endValue), })) .map(d => ({ rate: d.rate, x1: d.x1, x2: d.x2, y1: d.y1, y2: d.y2, slope: (d.y2-d.y1)/(d.x2-d.x1), })); const trendLineData2 = [0, 0.05, 0.20] .map(d => buildTrendPoints2(endDate,endValue,numWeeks,d)) .map(d => ({ rate: d.rate, x1: this.xScale(moment(d.startDate)), x2: this.xScale(moment(d.endDate)), y1: this.yScale(d.startValue), y2: this.yScale(d.endValue), })) .map(d => ({ rate: d.rate, x1: d.x1, x2: d.x2, y1: d.y1, y2: d.y2, slope: (d.y2-d.y1)/(d.x2-d.x1), })); const trendLines = this.container.selectAll("line.trend") .data(trendLineData2) .join("line") .attr("class", "trend") .attr("hidden", this.showTrend ? false: true) .attr("x1",d=> d.x1) .attr("x2",d=> d.x2) .attr("y1",d=> d.y1) .attr("y2",d=> d.y2) .attr("stroke","grey") const trendSlopes = this.container.selectAll("text.trendSlope") .data(trendLineData2) .join("text") .attr("class", "trendSlope") .attr("hidden", this.showTrend ? false: true) .attr("dy", -5) .attr("dx", -200) .attr("fill", "grey") //.attr("transform",d => `rotate(${180*Math.atan(d.slope)/Math.PI}) translate(${d.x2},${d.y2}) `) .attr("transform",d => `translate(${d.x2},${d.y2}) rotate(${180*Math.atan(d.slope)/Math.PI}) `) .text(d => `${d.rate > 0 ? '-' : '' }${d3.format(".0%")(d.rate)}`) const points = this.container.selectAll("g.point") .data(data) .join("g") .attr("class", "point") .attr("transform",(d,i) => `translate(${this.xScale(moment(d[dateAttribute]))}, ${this.getY(d)})`) const circles = points.selectAll("circle") .data(d => [d]) .join("circle") .attr("fill", "blue") .attr("r",2) const path = this.container.selectAll("path.curve") .data([data]) .join("path") .attr("class", "curve") .attr("d",d => { debugger; const out = this.line(d) return out; }) this.container.selectAll("rect.alto") .attr("height", d => Math.abs(this.yScale(maxCases)-this.yScale(this.referenceRanges[this._metric].high.value))) .attr("fill", "red") this.container.selectAll("rect.bajo") .attr("y", d => Math.abs(this.yScale(this.referenceRanges[this._metric].low.value))) .attr("height", d => Math.abs(this.yScale(this.referenceRanges[this._metric].low.value)-this.yScale(this.lowThreshold))) .attr("fill", "yellow") this.container.select("text.label.bajo") .attr("y", this.yScale(this.lowThreshold)) .attr("x", this._width) this.container.select("text.label.alto") .attr("y", this.yScale(maxCases)) .attr("x", this._width) } width(_) { this._totalWidth = _; this._totalHeight = _/2; this.startup(); return this; } metric(_) { this._metric = _; this.startup(); return this; } showTrend(_) { this._showTrend = _; this.startup(); return this; } }36:Ta84,data = { const dict = {}; const historiaComuna = {}; const out = []; const metricFields = ["Casos", "Test"]; rawData .forEach(d => { dict[d.Fecha] = d; }) const accum = { casos: 0, tests:0 } rangoFechas.forEach(d => { const record = {}; const semanaPrevia = moment(d).subtract(7, "days").format("YYYY-MM-DD"); historiaComuna[d] = record; record["fecha"] = d accum["casos"] = dict[d] ? accum["casos"] + +dict[d]["Casos"] : accum["casos"]; accum["tests"] = dict[d] ? accum["tests"] + +dict[d]["Test"] : accum["tests"]; record["casos_nuevos"]= dict[d] ? +dict[d]["Casos"] : 0; record["casos_totales"]= accum["casos"]; record["tests_nuevos"]= dict[d] ? +dict[d]["Test"] : 0; record["tests_totales"]= accum["tests"]; record["semanaPrevia"]= historiaComuna[semanaPrevia] record["tests_semanales"]= historiaComuna[semanaPrevia] ? accum["tests"] - historiaComuna[semanaPrevia]["tests_totales"] : accum["tests"]; record["casos_semanales"]= historiaComuna[semanaPrevia] ? accum["casos"] - historiaComuna[semanaPrevia]["casos_totales"] : accum["casos"]; record["positividad"] = record["casos_semanales"]/record["tests_semanales"]; record["incidencia"] = 100000 * record["casos_semanales"] / poblacion / 7; out.push(record) }) return out /* comunas.forEach(comuna => { let accum = {}; let historiaComuna = {}; metricFields.forEach(d => accum[d]=0); _.range(0,dias).forEach(i => { const fecha = moment(minDate).add(i, "days").format("YYYY-MM-DD"); const fechaSemanaPrevia = moment(fecha).subtract(7, "days").format("YYYY-MM-DD"); const registro = dict[comuna][fecha]; const registroSemanaPrevia = dict[comuna][fechaSemanaPrevia]; metricFields.forEach(field => { accum[field] = registro ? accum[field] + registro[field] : accum[field]; }); const nuevoRegistro = { fecha: fecha, comuna: comuna, } historiaComuna[fecha] = nuevoRegistro; metricFields.forEach(field => { nuevoRegistro[`${field}_totales`] = accum[field]; nuevoRegistro[`${field}_nuevos`] = registro ? registro[field] : 0; nuevoRegistro[`${field}_semanales`] = historiaComuna[fechaSemanaPrevia] ? nuevoRegistro[`${field}_totales`] - historiaComuna[fechaSemanaPrevia][`${field}_totales`] : nuevoRegistro[`${field}_totales`]; }); out.push(nuevoRegistro); }) }) */ return out }37:[] 2f:{"id":"b36a0d03a87d59ec","slug":"informacion-de-covid-19-en-renca","title":"Información de COVID-19 en Renca","thumbnail":"4f274a404f9d09e422de1f012c740733b2ab2788855567ae34d3555e6dcc24e7","access_level":"public","create_time":"$D2020-11-17T22:36:46.159Z","update_time":"$D2020-12-05T14:28:34.681Z","view_time":null,"first_public_time":"$D2020-11-18T10:57:50.932Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"0843f5dc42ca68a0","login":"elaval","name":"Ernesto Laval","avatar_url":"https://avatars-next.observableusercontent.com/089f0414fc9025dadb05cc06d7a406bc9be10093187c46729cb4ba3a4098dc30","tier":"starter_2024"},"version":505,"publish_version":505,"role":null,"authored":false,"authors":[{"type":"individual","id":"e04cd7b5f4351ae9","login":"elaval","name":"Ernesto Laval","avatar_url":"https://avatars-next.observableusercontent.com/089f0414fc9025dadb05cc06d7a406bc9be10093187c46729cb4ba3a4098dc30","tier":null}],"members":[{"type":"individual","id":"e04cd7b5f4351ae9","login":"elaval","name":"Ernesto Laval","avatar_url":"https://avatars-next.observableusercontent.com/089f0414fc9025dadb05cc06d7a406bc9be10093187c46729cb4ba3a4098dc30","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Información de COVID-19 en Renca","cells":[{"id":0,"value":"md`# Información de COVID-19 en Renca`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":120,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":163,"value":"vis = {\n const out = html`

\n \n \n

`;\n \n\n \n \n return out;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":255,"value":"html`${moment(registroSeleccionado.fecha).format(\"D MMMM YYYY\")} Incidencia: ${d3.format(\".1f\")(registroSeleccionado.incidencia)} | Positividad: ${d3.format(\".1%\")(registroSeleccionado.positividad)}
\n\n${moment(registroSeleccionado.semanaPrevia.fecha).format(\"D MMMM YYYY\")} Incidencia: ${d3.format(\".1f\")(registroSeleccionado.semanaPrevia.incidencia)} | Positividad: ${d3.format(\".1%\")(registroSeleccionado.semanaPrevia.positividad)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":228,"value":"viewof fechaSeleccionada = Scrubber(rangoFechas.filter(d => d >= moment(minFecha).add(7, \"days\").format(\"YYYY-MM-DD\") && d <= maxFecha), {\n initial:rangoFechas.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","author":"$undefined","summary":"$undefined"},{"id":493,"value":"buildIncidenceChart({metric:\"incidencia\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":491,"value":"buildIncidenceChart({metric:\"positividad\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":289,"value":"md`# Tabla de datos históricos`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"{\n const out = html`\n \n \n \n \n \n \n \n \n ${_.chain(data).sortBy(d => d.fecha).reverse().map(d => `\n \n \n \n \n \n \n \n `).value()}\n

Fecha	Casos semanales	Tests semanales	Incidencia	Positividad
${d.fecha}	${d.casos_semanales}	${d.tests_semanales}	${d3.format(\".1f\")(d.incidencia)}	${d3.format(\".1%\")(d.positividad)}

\n `\n \n return out\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":304,"value":"html`

\n\n\n

Fuente de datos

\n\nDatos diarios de tests y casos confirmados en comuna de Renca publicados por Gonzalo Niño en:\nhttps://github.com/Gonzalonino/covid-renca/blob/main/COVID%20Renca%20.csv \n

\n

Autor de la visualización y página inicial

Ernesto Laval (@elaval)

\n\n

\n\n\n

\n\n\n\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":294,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":194,"value":"viewof xRange = rangeSlider({\n min: 1,\n max: Math.ceil(rangeIncidencia[1]+10),\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","author":"$undefined","summary":"$undefined"},{"id":196,"value":"viewof yRange = rangeSlider({\n min: 0,\n max: Math.ceil((rangePositividad[1]+0.01)*100)/100,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [0.005, Math.ceil((rangePositividad[1]+0.01)*100)/100 > 0.12 ? Math.ceil((rangePositividad[1]+0.01)*100)/100 : 0.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","author":"$undefined","summary":"$undefined"},{"id":411,"value":"md`## CSS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":225,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":136,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"value":"style_bootstrap","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":401,"value":"md`## Parámetros y configuración`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":325,"value":"estado = {\n let estado = crecimientoPositividad > 1.05\n ? \"creciendo\"\n : crecimientoPositividad < 1.05\n ? \"reduciendo\"\n : \"estable\"\n \n return estado\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":321,"value":"crecimientoPositividad = registroActual.positividad / registroActual.semanaPrevia.positividad\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":198,"value":"rangePositividad = d3.extent(_.chain(data).map(d => d.positividad).value(), d => d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":201,"value":"rangeIncidencia = d3.extent(_.chain(data).map(d => d.incidencia).value(), d => d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":180,"value":"nodes = getNodes(fechaSeleccionada)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":218,"value":"allNodes = nodes","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":216,"value":"textoABuscar = \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":212,"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","author":"$undefined","summary":"$undefined"},{"id":210,"value":"logScale = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":208,"value":"indicadorY = \"positividad\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":168,"value":"hideBubbles = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":249,"value":"comuna= `Renca`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":214,"value":"firstDate = minFecha","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"minFecha = _.chain(rawData).map(d => d.Fecha).min().value()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"maxFecha = _.chain(rawData).map(d => d.Fecha).max().value()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"rangoFechas = {\n const dias = moment(maxFecha).diff(moment(minFecha),\"days\");\n \n return _.range(0,dias+1).map(d => moment(minFecha).add(d, \"days\").format(\"YYYY-MM-DD\"))\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":87,"value":"poblacion = 160847","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":126,"value":"registroActual = data.find(d => d.fecha == maxFecha)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":258,"value":"registroSeleccionado = data.find(d => d.fecha == fechaSeleccionada)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":423,"value":"es_ES = ({\n \"decimal\": \",\",\n \"thousands\": \".\",\n \"grouping\": [3],\n \"currency\": [\"$\", \"\"],\n \"dateTime\": \"%a %b %e %X %Y\",\n \"date\": \"%d/%m/%Y\",\n \"time\": \"%H:%M:%S\",\n \"periods\": [\"AM\", \"PM\"],\n \"days\": [\"Domingo\", \"Lunes\", \"Martes\", \"Miércoles\", \"Jueves\", \"Viernes\", \"Sábado\"],\n \"shortDays\": [\"Dom\", \"Lun\", \"Mar\", \"Mi\", \"Jue\", \"Vie\", \"Sab\"],\n \"months\": [\"Enero\", \"Febrero\", \"Marzo\", \"Abril\", \"Mayo\", \"Junio\", \"Julio\", \"Agosto\", \"Septiembre\", \"Octubre\", \"Noviembre\", \"Diciembre\"],\n \"shortMonths\": [\"Ene\", \"Feb\", \"Mar\", \"Abr\", \"May\", \"Jun\", \"Jul\", \"Ago\", \"Sep\", \"Oct\", \"Nov\", \"Dic\"]\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":426,"value":"locale = d3.timeFormatLocale(es_ES);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":398,"value":"md`## Código auxiliar`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":172,"value":"function getNodes(date) {\n \n const recentDates = _.chain(_.range(0,8))\n .map(d => moment(date).subtract(d,\"day\").format(\"YYYY-MM-DD\"))\n .filter(d => d >= minFecha)\n .reverse()\n .value();\n \n \n const nodes = data\n .filter(d => d.fecha == date)\n .map(d => ({\n positividad: d.positividad,\n incidencia: d.incidencia,\n positividad_semana_previa: d.semanaPrevia && d.semanaPrevia.positividad,\n incidencia_semana_previa: d.semanaPrevia && d.semanaPrevia.incidencia,\n\n poblacion: poblacion,\n\n \n recent: recentDates.map(f => ({\n date:f,\n positividad: datosPorFecha[f] && datosPorFecha[f].positividad,\n incidencia: datosPorFecha[f] && datosPorFecha[f].incidencia,\n\n }))\n }))\n \n return nodes\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":394,"value":"md`## Vis code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":170,"value":"renderer2 = {\n \n visObj.date(fechaSeleccionada).render(nodes);\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":192,"value":"visObj = {\n const visEl = d3.select(vis).select(\"svg\");\n \n return new IncidenceGrowthVis(visEl.node());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":166,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":417,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":419,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":421,"value":"buildTrendPoints2 = function(endDate,endValue,numWeeks,rate) {\n const startDate = moment(endDate).subtract(numWeeks, \"weeks\").format(\"YYYY-MM-DD\");\n \n return {\n rate: rate,\n startDate: startDate,\n endDate: endDate,\n startValue: endValue / Math.pow((1-rate),numWeeks),\n endValue: endValue\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":433,"value":"buildTrendPoints = function(startDate,startValue,numWeeks,rate) {\n const endDate = moment(startDate).add(numWeeks, \"weeks\").format(\"YYYY-MM-DD\");\n \n return {\n rate: rate,\n startDate: startDate,\n endDate: endDate,\n startValue: startValue,\n endValue: startValue * Math.pow((1-rate),numWeeks)\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":388,"value":"md`## Datos`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":184,"value":"datosPorFecha = {\n const dict = {};\n \n data.forEach(d => dict[d.fecha] = d)\n return dict;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":221,"value":"urlDatos = \"https://raw.githubusercontent.com/Gonzalonino/covid-renca/main/COVID%20Renca.csv\"\n//urlDatos = \"https://raw.githubusercontent.com/Gonzalonino/covid-renca/main/COVID%20Renca%20.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"rawData = {\n const dataString = await d3.text(urlDatos)\n \n //return dataString;\n const scsv = d3.dsvFormat(\";\");\n;\n return scsv.parse(dataString)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":374,"value":"md`## Librerías externas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":233,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":205,"value":"import {rangeSlider}from \"@beerdrinker/range-slider\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":105,"value":"import {style_bootstrap, style_fontawesome} from \"@elaval/utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"moment = require(\"moment\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":309,"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","author":"$undefined","summary":"$undefined"},{"id":40,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":355,"value":"googleAnalytics('G-Z78CLE57VD')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":352,"value":"googleAnalytics = UA => {\n const script = document.createElement('script');\n script.src = 'https://www.googletagmanager.com/gtag/js?id=${UA}';\n script.type = 'text/javascript';\n script.async = true;\n\n script.onload = () => {\n window.dataLayer = window.dataLayer || [];\n function gtag() {\n var dataLayer = window.dataLayer;\n dataLayer.push(arguments);\n }\n gtag('js', new Date());\n\n gtag('config', UA);\n };\n document.body.appendChild(script);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"