2c:null 2d:["$","title",null,{"children":"Evolución de COVID-19 en las ciudades y departamentos de Colombia | juancortiz | Observable"}] 32:T45b,// viewof baseLine = { // let options= [ // { label: `1 ${metricLabel}`, value: 1 }, // { label: `5 ${metricLabel}`, value: 5 }, // { label: `10 ${metricLabel}`, value: 10 }, // { label: `20 ${metricLabel}`, value: 20 }, // { label: `50 ${metricLabel}`, value: 50 }, // { label: `100 ${metricLabel}`, value: 100 }, // { label: `200 ${metricLabel}`, value: 200 }, // ]; // return radio({ // title: `Línea base (número de ${metricLabel})`, // description: `Seleccione el número de ${metricLabel} a usar como referente común (los días se cuentan desde que la ciudad alcanzó ese número de ${metricLabel})`, // options: options, // value: metric == "total_deaths" ? 1 : 20 // }) // } viewof baseLine = select({ title:`Línea base (número de ${metricLabel})`, description: `Seleccione el número de ${metricLabel} a usar como referente común (los días se cuentan desde que ${labelGroupBy[0]} alcanzó ese número de ${metricLabel})`, options: [1,5,10,20,50,100,200], multiple: false, value: metric == "total_deaths" ? 1 : 20 })33:T438,html`

Ritmo de Crecimiento

El brote de coronavirus tiene un tipo de crecimiento que muchos llaman "exponencial" (no completamente exponencial, pero cercano a exponencial en las primeras etapas). Esto significa que el crecimiento no es aditivo (no agregamos un aumento fijo cada período de tiempo) sino multiplicativo (cada período de tiempo multiplicamos el número anterior por un cierto factor).

Se presentan 2 indicadores que miden el ritmo de crecimiento, que pueden ser más fáciles de entender para los no especialistas. Estos son números que pueden estar asociados a un período largo (por ejemplo, una semana) o a un factor estándar (por ejemplo, duplicación):

Cuántas veces la métrica (muertes o casos confirmados) creció en los últimos 7 días
En cuántos días se duplicó la métrica

Estos indicadores están asociadas al mismo concepto: la tasa a la que se multiplican los contagios o muertes durante un período de tiempo.

`34:Td2c,{ //let data =dataGroupedByCountry; const data = _.chain(dataGroupedByCountry) .filter(d => countryShortlist.includes(d.location)) .sortBy(d => d.location) .value() function maxCases(items) { const max = d3.max(items, d => +d.total_deaths); return max; } const topLocations = _.chain(dataGroupedByCountry) .filter(d => { return (maxCases(d.items) > 3 && d.location != "World") }) .filter(d => countryShortlist.includes(d.location)) .value() const layout = new WaveLayout(); //const nodes = layout.nodes(data.items).filter(d => d[0].value > 10); const out = html`

${_.chain(topLocations).sortBy(d => d.location).map(d => { debugger; const nodes = layout.nodes(d.items).filter(d => d[0].value > 10); const el = html`

${d.location}

${d3.format(".2f")(d.rateLastWeek.rate)}

${new Date(d.rateLastWeek.now).toLocaleString("es", { month: 'short', day: 'numeric', timeZone:"UTC" })} : ${d3.format(",")(d.rateLastWeek.valueNow)}

${new Date(d.rateLastWeek.lastWeek).toLocaleString("es", { month: 'short', day: 'numeric', timeZone:"UTC" })} : ${d3.format(",")(d.rateLastWeek.valueLastWeek)}

` const visEl = d3.select(el).select("div.vis svg"); const visObj = new FactorWaveVis(visEl.node()); visObj.render(nodes) return el }).value()} ` return out } 35:T9d8,{ const countries = _.chain(dataGroupedByCountry) .filter(d => countryShortlist.includes(d.location)) .sortBy(d => d.location) //.groupBy(d => d.rateLastWeek.rate < 2 ? 0 : d.rateLastWeek.rate < 3 ? 1 : 2) .value() debugger; const out = html`

${_.chain(countries).sortBy(d => d.location).map(country => { const el = `

${country.location}

${_.slice(country.items, country.items.length-5,country.items.length).map((d,i) => `

${d3.format(".2f")(d.factor7Days_deaths)}

${new Date(d.date).toLocaleString("es", { month: 'short', day: 'numeric', timeZone:"UTC" })} : ${d3.format(",")(d.total_deaths)}

${new Date(d.weekAgoRecord.date).toLocaleString("es", { month: 'short', day: 'numeric', timeZone:"UTC" })} : ${d3.format(",")(d.weekAgoRecord.total_deaths)}

`).join("")}

` return el }).value().join("")}

` return out }36:Tb50,{ const groupDescriptions = { 0 : `${labelGroupBy[3]} que han aumentado menos de 2 veces el número de muertes durante los últimos 7 días`, 1 : `${labelGroupBy[3]} que han aumentado entre 2 y 3 veces el número de muertes durante los últimos 7 días`, 2 : `${labelGroupBy[3]} que han aumentado más de 3 veces el número de muertes durante los últimos 7 días`, } const countryGroups = _.chain(dataGroupedByCountry) .filter(d => d.rateLastWeek.rate && d.rateLastWeek.valueLastWeek && d.rateLastWeek.valueNow >= doublingMinValue["total_deaths"] && d.location !== "World" ) .groupBy(d => d.rateLastWeek.rate < 2 ? 0 : d.rateLastWeek.rate <= 3 ? 1 : 2) .value() debugger; const out = html` ${_.map(countryGroups, (countries, groupKey) => `

${groupDescriptions[groupKey]}

${_.chain(countries).sortBy(d => d.location).map(d => { const el = `

${d.location}

${d3.format(".2f")(d.rateLastWeek.rate)}

${new Date(d.rateLastWeek.now).toLocaleString("es", { month: 'short', day: 'numeric', timeZone:"UTC" })} : ${d3.format(",")(d.rateLastWeek.valueNow)}

${new Date(d.rateLastWeek.lastWeek).toLocaleString("es", { month: 'short', day: 'numeric', timeZone:"UTC" })} : ${d3.format(",")(d.rateLastWeek.valueLastWeek)}

` return el }).value().join("")}

`).join("")} ` return out }37:Td1a,{ const windowSize = 7; function growthRate(items) { const windowOffset = 1; const lastItems = _.takeRight(items,windowSize); const reg = d3Regression.regressionLinear() .x(d => +d.i) .y(d => +d.new_cases) const trend = reg(lastItems.map((d,i) => { d.i = i; return d; })) return { recentDays: lastItems, trend: trend } } function maxCases(items) { const max = d3.max(items, d => +d[doubling_metric]); return max; } const topLocations = _.chain(dataGroupedByCountry) .filter(d => { return (maxCases(d.items) > doublingMinValue[doubling_metric] && d.location != "World") }) //.groupBy(d => growthRate(d.items).trend.a > 0 ? 1 : -1) .value() debugger; const out = html`

${_.chain(topLocations).sortBy(d => d.location).map(d => { const newCasesTrend = growthRate(d.items); const el = html`

${d.location}

${d.doublingInfo[doubling_metric].doublingDays} ${d.doublingInfo[doubling_metric].doublingDays > 1 ? "días" :"día"}

${new Date(d.doublingInfo[doubling_metric].currentDate).toLocaleString("es", { month: 'short', day: 'numeric', timeZone:"UTC" })} : ${d3.format(",")(d.doublingInfo[doubling_metric].currentValue)}

${new Date(d.doublingInfo[doubling_metric].halfDate).toLocaleString("es", { month: 'short', day: 'numeric', timeZone:"UTC" })} : ${d3.format(",")(d.doublingInfo[doubling_metric].halfValue)}

` return el }).value()}

` /* doublingDays: halfDays, currentDate: maxDate, halfDate: halfDate, currentValue: maxValue, halfValue: halfValue */ return out }38:T4fd,{ //const windowSize = 7; function growthRate(items) { const windowOffset = 1; const lastItems = _.takeRight(items,windowSize); const reg = d3Regression.regressionLinear() .x(d => +d.i) .y(d => +d.new_cases) const trend = reg(lastItems.map((d,i) => { d.i = i; return d; })) return { recentDays: lastItems, trend: trend } } function maxCases(items) { const max = d3.max(items, d => +d.total_cases); return max; } const topLocations = _.chain(dataGroupedByCountry) .filter(d => { return (maxCases(d.items) > 5 && d.location != "World") }) //.groupBy(d => growthRate(d.items).trend.a > 0 ? 1 : -1) .value() debugger; const out = html`

${_.chain(topLocations).sortBy(d => d.location).map(d => { const newCasesTrend = growthRate(d.items); const el = html`

${d.location}

` const visEl = d3.select(el).select("div.vis svg"); const visObj = new NewCasesVis(visEl.node()); visObj.render(newCasesTrend) return el }).value()}

` return out }39:T527,html`

Aumento del número promedio de nuevas muertes diarias en comparación con el mismo día de la semana anterior

Todos los días hay un incremento en las muertes y este número sigue aumentando a un cierto ritmo (el crecimiento del crecimiento). Se calcula este ritmo como la diferencia entre nuevas muertes en una fecha específica y ese número en el mismo día de la semana anterior.

Este número (cuánto han aumentado las nuevas muertes diarias en comparación con la semana anterior) podría aumentar a un ritmo acelerado (un número positivo que crece todos los días), de forma desacelerada (un número positivo que se reduce todos los días) o podría estar disminuyendo (cada día tenemos menos nuevas muertes).

El objetivo final es reducir las nuevas muertes diarias hasta llegar a 0.

Estos cuadros muestran el crecimiento del crecimiento de cada día.

	Acelerando
	Desacelerando
	Reduciéndose

`3a:T521,{ const windowSize = 35; function growthRate(items) { const windowOffset = 1; const lastItems = _.takeRight(items,windowSize); const reg = d3Regression.regressionLinear() .x(d => +d.i) .y(d => +d.new_cases) const trend = reg(lastItems.map((d,i) => { d.i = i; return d; })) return { recentDays: lastItems, trend: trend } } function maxCases(items) { const max = d3.max(items, d => +d.total_cases); return max; } const topLocations = _.chain(dataGroupedByCountry) .filter(d => { return (maxCases(d.items) > 200 && d.location != "World") }) //.groupBy(d => growthRate(d.items).trend.a > 0 ? 1 : -1) .value() debugger; const out = html`

${_.chain(topLocations).sortBy(d => d.location).map(d => { const newCasesTrend = growthRate(d.items); const el = html`

${d.location}

` const visEl = d3.select(el).select("div.vis svg"); const visObj = new NewWeeklyDeathsChartVis(visEl.node()); visObj.metric("total_deaths").render(newCasesTrend) return el }).value()}

` return out }3b:T51f,{ function growthRate(items) { const windowSize = 1; const windowOffset = 1; debugger; const lastItems = _.takeRight(items,windowSize); const reg = d3Regression.regressionLinear() .x(d => d.elapsed) .y(d => d.new_cases) const trend = reg(lastItems) return { trend: trend.a, recentDays: lastItems } } const out = !displayTable ? html`` : html` ${_.chain(dataGroupedByCountry).sortBy(d => d.location).map(d => { const newCasesTrend = growthRate(d.items); return ` `}).value()}

Ciudad	Casos totales	Nuevos casos	Muertes totales	Nuevas muertes
${d.location}	${d.items.length && d.items[d.items.length-1].total_cases \|\| ""}	${d.items.length && d.items[d.items.length-1].new_cases \|\| ""}	${d.items.length && d.items[d.items.length-1].total_deaths \|\| ""}	${d.items.length && d.items[d.items.length-1].new_deaths \|\| ""}	${d.items.length && d.items[d.items.length-1].weekAgoRecord && d.items[d.items.length-1].weekAgoRecord.new_deaths \|\| ""}

` return out }3c:Tc26,html``3d:T67f,// Mapping needed to identify associated flag reference when needed countryNameMApping = ({ "Vatican": "vatican-city", "Holy See": "vatican-city", "Brunei Darussalam": "brunei", "Democratic Republic of Congo": "congo-democratic-republic-of-the", "Cote d'Ivoire":"cote-d-ivoire", "United States": "united-states-of-america", "US": "united-states-of-america", "Korea, South": "south-korea", "Congo (Brazzaville)": "congo-republic-of-the", "Congo (Kinshasa)": "congo-democratic-republic-of-the", "Czechia":"czech-republic", "Eswatini":"swaziland", "North Macedonia":"macedonia", "Taiwan*": "taiwan", "China-Anhui" : "China", "China-Beijing" : "China", "China-Chongqing" : "China", "China-Confirmed" : "China", "China-Deaths" : "China", "China-Fujian" : "China", "China-Gansu" : "China", "China-Guangdong" : "China", "China-Guangxi" : "China", "China-Guizhou" : "China", "China-Hainan" : "China", "China-Hebei" : "China", "China-Heilongjiang" : "China", "China-Henan" : "China", "China-Hong Kong" : "China", "China-Hubei" : "China", "China-Hubei " : "China", "China-Hunan" : "China", "China-Inner Mongolia" : "China", "China-Jiangsu" : "China", "China-Jiangxi" : "China", "China-Jilin" : "China", "China-Liaoning" : "China", "China-Macau" : "China", "China-Ningxia" : "China", "China-Qinghai" : "China", "China-Shaanxi" : "China", "China-Shandong" : "China", "China-Shanghai" : "China", "China-Shanxi" : "China", "China-Sichuan" : "China", "China-Taiwan" : "China", "China-Tianjin" : "China", "China-Unspecified*" : "China", "China-Xinjiang" : "China", "China-Xizang" : "China", "China-Yunnan" : "China", "China-Zhejiang" : "China", })3e:T50d,standardCountryNames = ({ "Bolivia": "Bolivia (Plurinational State of)", "Bonaire Sint Eustatius and Saba": "Bonaire, Sint Eustatius and Saba", "British Virgin Islands": "Virgin Islands (British)", "Brunei": "Brunei Darussalam", "Cape Verde": "Cabo Verde", "Cote d'Ivoire": "Côte d'Ivoire", "Curacao": "Curaçao", "Czech Republic": "Czechia", "Democratic Republic of Congo": "Congo, Democratic Republic of the", "Faeroe Islands": "Faroe Islands", "Falkland Islands": "Falkland Islands (Malvinas)", "Iran": "Iran (Islamic Republic of)", "Laos": "Lao People's Democratic Republic", "Macedonia": "North Macedonia", "Moldova": "Moldova, Republic of", "Palestine": "Palestine, State of", "Russia": "Russian Federation", "Saint Barthlemy": "Saint Barthélemy", "South Korea": "Korea, Republic of", "Swaziland": "Eswatini", "Syria": "Syrian Arab Republic", "Taiwan": "Taiwan, Province of China", "Tanzania": "Tanzania, United Republic of", "Timor": "Timor-Leste", "United Kingdom": "United Kingdom of Great Britain and Northern Ireland", "United States": "United States of America", "United States Virgin Islands": "Virgin Islands (U.S.)", "Vatican": "Holy See", "Venezuela": "Venezuela (Bolivarian Republic of)", "Vietnam": "Viet Nam", })3f:T43b1,class CoronaLogVis { constructor(el) { debugger; this._data = []; this._margin = {left: 80, right:200, top:50, bottom: 40}; this._totalWidth = width; this._totalHeight = height < screen.height ? height : screen.height; this.svgContainer = d3.select(el); this._metric = "total_cases"; this.startup(); } startup() { debugger; this._width = this._totalWidth - this._margin.left - this._margin.right; this._height = this._totalHeight - this._margin.top - this._margin.bottom; this.xScale = d3.scaleLinear() .range([0,this._width]) this.yScale = d3.scaleLog() //this.yScale = d3.scaleLinear() .range([this._height,0]) this.yScaleLinear = d3.scaleLinear() //this.yScale = d3.scaleLinear() .range([this._height,0]) this.colorScale = d3.scaleOrdinal(d3.schemeCategory10) this.yAxis = d3.axisLeft(this.yScale) .ticks(10) .tickFormat(d3.format(",")); this.yAxisLinear = d3.axisLeft(this.yScaleLinear) .ticks(10) .tickFormat(d3.format(",")); this.xAxis = d3.axisBottom(this.xScale) .ticks(limitDays ? 7 : null); 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("g") .attr("class", "y axis") this.container .append("g") .attr("class", "yLinear 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", 14) .attr("y", this._margin.bottom-12) .attr("class", "title x") .attr("dy", 5) .attr("transform",`translate(${this._width},${this._height})`) .style("text-anchor", "end") .text(`Dias desde que la ciudad alcanzó ${baseLine} ${metric == "total_deaths" ? "muertes" : "casos"}`); // text label for the y axis 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(`Número de ${metric == "total_deaths" ? "muertes" : "casos confirmados"} (escala logarítmica)`); const yRefPoints = [10,100,200,300,400,500,600,700,800,900,1000,2000,3000,4000,5000,6000,7000,8000,9000,10000, 20000,30000,40000,50000,60000,70000,80000,90000,100000]; const xRefPoints = [7,14,21,28, 35, 42, 49, 56]; this.container.selectAll("line.ref.y") .data(yRefPoints) .join("line") .attr("class", "ref y") this.container.selectAll("line.ref.x") .data(xRefPoints) .join("line") .attr("class", "ref x") /* Credits removed from svg (will be included as an additional observable cell)" this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", 18) .attr("y", this._margin.bottom-10) .attr("class", "title x") .attr("transform",`translate(${0},${this._height})`) .style("text-anchor", "start") .text("Author: @elaval, Data source: European Centre for Disease Prevention and Control"); */ /* Title removed from svg (will be included as an additional observable cell)" this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", 18) .attr("y", -18) .attr("x", this._width/2) .attr("class", "date") .attr("transform",`translate(${0},${0})`) .style("text-anchor", "middle") .text(`${moment(getVisibleDate()).format("DD MMM YYYY")}`); */ this.line = d3.line() .x((d, i) => this.xScale(d.elapsedBaseLine)) // set the x values for the line generator .y((d) => this.yScale(+d[this._metric])) // set the y values for the line generator .curve(d3.curveMonotoneX) // apply smoothing to the line this.recoveredArea = d3.area() .x((d, i) => this.xScale(d.elapsedBaseLine)) // set the x values for the line generator .y0((d) => this.yScale(+d["total_recovered"]) < this._height ? this.yScale(+d["total_recovered"]) :this._height ) // set the y values for the line generator .y1((d) => this.yScale(+d[this._metric])) // set the y values for the line generator .curve(d3.curveMonotoneX) // apply smoothing to the line this.recoveredAreaLinear = d3.area() .x((d, i) => this.xScale(d.elapsedBaseLine)) // set the x values for the line generator .y0((d) =>this._height) // set the y values for the line generator //.y1((d) => this.yScale(+d[this._metric])) // set the y values for the line generator .y1((d) => d.active_y) // set the y values for the line generator .curve(d3.curveMonotoneX) // apply smoothing to the line } render(data) { const self = this; debugger; const maxDelay = _.max(data.map(d=> _.max(this.filterChina(d.items).map(e => e.elapsedBaseLine)))); const maxCases = _.max(data.map(d=> _.max(d.items.map(e => +e[this._metric])))); const maxPoints = _.max(data.map(d=> d.items.length)); const showLinearScale = showActive && data.filter(d => d.highlight).length == 1; // Update axis this.xScale.domain([limitDays ? 0 : -1,maxDelay]) this.yScale.domain([+baseLine,maxCases]) let yScaleLinear; this.yAxisLinear = null; data.forEach(d => { d.maxActivePoint = _.maxBy(d.items, e => +e[this._metric]-e["total_recovered"]); const maxActive = d.maxActivePoint[this._metric]-d.maxActivePoint["total_recovered"]; const maxActiveY = this.yScale(maxActive) const yScaleActive = d3.scaleLinear().range([this._height, maxActiveY]).domain([0, maxActive]); if (d.highlight) { yScaleLinear = yScaleActive; } d.items.forEach((e,i) => { e.active_y = yScaleActive(+e[this._metric]-e["total_recovered"]); e.growthFactorVisible = i % 2 == d.items.length % 2; }) _.last(d.items)["lastRecord"] = true; }) const highlightedItem = (showLinearScale && _.find(data, d => d.highlight)) || null; if (yScaleLinear) { this.yAxisLinear = d3.axisLeft(yScaleLinear) .ticks(10) .tickFormat(d3.format(",")) } this.container.select("g.y.axis") .attr("display", showLinearScale ? "none" : true) .call(this.yAxis) this.container.select("g.yLinear.axis") .attr("display", showLinearScale ? true : "none") if (showLinearScale && this.yAxisLinear) { this.container.select("g.yLinear.axis") .call(this.yAxisLinear); this.container.select("text.title.y") .text(`Número de ${metric == "total_deaths" ? "muertes" : "casos activos"} (escala lineal)`); } else { this.container.select("text.title.y") .text(`Número de ${metric == "total_deaths" ? "muertes" : "casos confirmados"} (escala logarítmica)`); } this.container.select("g.x.axis") .transition() .duration(duration) .call(this.xAxis) function isSelected(item) { const searchExpression = search.split(",").map(d => d.trim()).join("|"); const re = new RegExp(searchExpression, "i"); return item.highlight || (search && item.country.match(re)) || isInRegion(item.country, selectedRegion) } function projectedPoints(record) { debugger; if (!isNaN(record.trendData.a)) { const predict = record.trendData.predict; const countryMaxElapsed = d3.max(record.items, d => d.elapsedBaseLine) const futurePoints = _.range(countryMaxElapsed+1, maxDelay).map(d => { const record = {}; record[self._metric] = predict(d); record['elapsedBaseLine'] = d; return record }) const peak = d3.max(futurePoints, d => d[self._metric]); const peakX = futurePoints.find(d => d[self._metric] == peak).elapsedBaseLine; return futurePoints.filter(d => d.elapsedBaseLine <= peakX) } else { return[]; } } // Create container for each country const countries = this.container.selectAll("g.countryLine") .data(data, d => d.country) .join("g") .attr("class", d => `countryLine ${d.country}`) .classed("highlighted", d => { const re = new RegExp(search, "i"); return d.highlight || (search && d.country.match(re)) }) .classed("fainted", d => { const anyHighlighted = data.find(d => { return isSelected(d) }) return anyHighlighted && !isSelected(d) }) .each(function(d) { const re = new RegExp(search, "i"); if( d.highlight || (search && d.country.match(re))) { this.parentNode.appendChild(this); } }) .on("click", function(d) { if (!d.highlight) { this.parentNode.appendChild(this); } d.highlight = !d.highlight; self.render(data); }) countries .call(getOldPathLength) const recoveredContainer = countries.selectAll("g.recoveredContainer") .data(d => [d]) .join("g") .attr("class",d => `recoveredContainer`) .attr("display",d => d.highlight && showActive ? true : "none") const growthFactorContainer = countries.selectAll("g.growthFactorContainer") .data(d => [d]) .join("g") .attr("class",d => `growthFactorContainer`) .attr("display",d => d.highlight && showGrowthFactor ? true : "none") const pathContainer = countries.selectAll("g.pathContainer") .data(d => [d]) .join("g") .attr("class",d => `pathContainer`) pathContainer .attr("stroke", d => this.colorScale(d.country)) const markContainer = countries.selectAll("g.markContainer") .data(d => [d]) .join("g") .attr("class",d => `markContainer`) .attr("fill",d => this.colorScale(d.country)) // Path line for each country pathContainer.selectAll("path.line") .data(d => [this.filterChina(d.items)]) .join("path") .attr("class",d => `line`) .attr("stroke", d => this.colorScale(d.country)) .attr("d",this.line) recoveredContainer.selectAll("path.recovered") .data(d => [this.filterChina(d.items)]) .join("path") .attr("class",`recovered`) .attr("d",this.recoveredAreaLinear) const maxActiveContainer = recoveredContainer.selectAll("g.maxActive") .data(d => [d.maxActivePoint]) .join("g") .attr("class",`maxActive`) maxActiveContainer.selectAll("line") .data(d => [d]) .join("line") .attr("x1",d => this.xScale(d.elapsedBaseLine)) .attr("x2",d => this.xScale(d.elapsedBaseLine)) .attr("y1",d => d.active_y) .attr("y2",this._height) maxActiveContainer.selectAll("text") .data(d => [d]) .join("text") .attr("transform",d => `translate(${this.xScale(d.elapsedBaseLine)},${(d.active_y + this._height)/2})rotate(-90)`) .attr("dy",-5) .attr("text-anchor","middle") .text(d => d3.format(",")(+d[this._metric]-d["total_recovered"])) countries .call(getPathLength) countries .call(setInitialPathDash) countries .call(animatePath) // MARKS const marks = markContainer.selectAll("circle.mark") .data(d => this.filterChina(d.items)) .join("circle") .attr("class",d => `mark ${d.country}`) .attr("cx",d => this.xScale(d.elapsedBaseLine)) .attr("cy",d => this.yScale(d[this._metric])) .attr("r",0) .attr("opacity",0.0) marks .transition() .duration(duration) .attr("cx",d => this.xScale(d.elapsedBaseLine)) .attr("cy",d => this.yScale(d[this._metric])) .attr("r",2) const futureMarks = countries.selectAll("path.projection") .data(d => d.highlight ? [projectedPoints(d)] : []) .join("path") .attr("class",d => `projection`) .attr("d",this.line) // GROWTH FACTOR const growthFactor = growthFactorContainer.selectAll("g.growthFactor") .data(d => this.filterChina(d.items)) .join("g") .attr("class",d => d.lastRecord ? `growthFactor lastRecord` : `growthFactor`) .attr("display",(d,i) => (d.growthFactorVisible || d.lastRecord) && (d.factor7Days_deaths > 0) ? true : "none") .attr("transform",d => `translate(${this.xScale(d.elapsedBaseLine)}, ${this.yScale(d[this._metric])})`) growthFactor.append("circle") .attr("cx", d => d.lastRecord ? 0 : -10) .attr("cy", d => d.lastRecord ? -30 : -13) .attr("r", d => d.lastRecord ? 15 :10) .attr("fill", "blue") growthFactor.append("text") .attr("text-anchor", "middle") .attr("dx", d => d.lastRecord ? 0 : -10) .attr("dy", d => d.lastRecord ? -25 :-10) .text(d => d3.format(".2s")(d.factor7Days_deaths)) // Add label container for each country const labels = countries.selectAll("g.label") .data(d => [d]) .join("g") .attr("class",d => `label ${d.country}`) countries.selectAll("g.label") .transition() .duration(duration) .attr("transform", d => { const lastPoint = this.filterChina(d.items)[this.filterChina(d.items).length-1] return `translate(${this.xScale(lastPoint.elapsedBaseLine)}, ${this.yScale(+lastPoint[this._metric])})` }) labels.selectAll("rect") .data(d => [d]) .join("rect") labels.selectAll("text") .data(d => [d]) .join("text") .text(d => `${d.country} ${_.last(d.items)[metric]}`) .attr("title", d => `${_.last(d.items)[metric]}`) .attr("dy", 3) .attr("dx", 12) .attr("font-size", 14) .attr("text-anchor", "start") .attr("fill", d => d.threshold >= 5000 ? "white" : "black") .call(getTextBox); // labels.selectAll("image") // .data(d => [d]) // .join("image") // .attr("x",-10) // .attr("y",-10) // .attr("height",20) // .attr("width",20) // .attr("href", d => `${flagUrl(d.country)}`) labels.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.5) //.style("fill", "#FFE6F0"); .style("fill", "white"); this.container.selectAll("line.ref.y") .attr("x1", 0) .attr("x2", this._width) .attr("y1", d => this.yScale(d)) .attr("y2", d => this.yScale(d)) this.container.selectAll("line.ref.x") .attr("y1", 0) .attr("y2", this._height) .attr("x1", d => this.xScale(d)) .attr("x2", d => this.xScale(d)) function setInitialPathDash(selection) { selection.each(function(d) { const oldPathLength = d.oldPathLength; const pathLength = d.pathLength; const pathSel = d3.select(this).select("path"); pathSel .attr("stroke-dasharray", pathLength + " " + pathLength) .attr("stroke-dashoffset", pathLength-oldPathLength) }) } function animatePath(selection) { selection.each(function(d) { const oldPathLength = d.oldPathLength; const pathLength = d.pathLength; const pathSel = d3.select(this).select("path"); pathSel .attr("stroke-dasharray", pathLength + " " + pathLength) .attr("stroke-dashoffset", pathLength-oldPathLength) .transition() .duration(duration) .attr("stroke-dashoffset", 0) }) } function getTextBox(selection) { selection.each(function(d) { d.bbox = this.getBBox(); }) } function getOldPathLength(selection) { selection.each(function (d) { d.oldPathLength = d3.select(this).select("path").node() && d3.select(this).select("path").node().getTotalLength() || 0; }) } function getPathLength(selection) { selection.each(function (d) { d.pathLength = d3.select(this).select("path").node() && d3.select(this).select("path").node().getTotalLength() || 0; }) } } filterChina(items) { return items.filter(d => { // We limit China records up to specified date return d.location !== "China" || (d.location == "China" && moment(d.date) < moment(chinaMaxDate)) }) } metric(_) { this._metric = _; return this; } }40:T1029,class NewCasesVis { constructor(el) { // debugger; this._data = []; this._margin = {left: 60, right:100, top:20, bottom: 40}; this._totalWidth = 300; this._totalHeight = 100; this.svgContainer = d3.select(el); this.startup(); } startup() { // debugger; this._width = this._totalWidth - this._margin.left - this._margin.right; this._height = this._totalHeight - this._margin.top - this._margin.bottom; this.xScale = d3.scaleLinear() .range([0,this._width]) this.yScale = d3.scaleLinear() .range([this._height,0]) this.colorScale = d3.scaleOrdinal(d3.schemeCategory10) this.yAxis = d3.axisLeft(this.yScale) .ticks(3) .tickFormat(d3.format(",")); this.xAxis = d3.axisBottom(this.xScale) .ticks(6); 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("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", 10) .attr("y", this._margin.bottom-12) .attr("class", "title x") .attr("dy", 5) .attr("transform",`translate(${this._width},${this._height})`) .style("text-anchor", "end") .text(`Últimos ${windowSize} días`); // text label for the y axis this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .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("Nuevos casos"); this.line = d3.line() .x((d, i) => this.xScale(i+1)) // set the x values for the line generator .y((d) => this.yScale(+d.new_cases)) // set the y values for the line generator .curve(d3.curveMonotoneX) // apply smoothing to the line this.lineTrend = d3.line() .x((d, i) => this.xScale(+d[0]+1)) // set the x values for the line generator .y((d) => this.yScale(+d[1])) // set the y values for the line generator .curve(d3.curveMonotoneX) // apply smoothing to the line } render(trendInfo) { debugger; const data = trendInfo.recentDays const self = this; // debugger; const maxCases = _.max(data.map(d=> +d.new_cases)); const minCases = _.min(data.map(d=> +d.new_cases)); // Update axis this.xScale.domain([1,data.length]) this.yScale.domain([minCases,maxCases]) this.container.select("g.y.axis") .call(this.yAxis) this.container.select("g.x.axis") .transition() .duration(duration) .call(this.xAxis) const points = this.container.selectAll("g.point") .data(data) .join("g") .attr("class", "point") .attr("transform",(d,i) => `translate(${this.xScale(i+1)}, ${this.yScale(d.new_cases)})`) const circles = points.selectAll("circle") .data(d => [d]) .join("circle") .attr("fill", "blue") .attr("r",2) const path = this.container.selectAll("path") .data([data]) .join("path") .attr("d",d => { // debugger; const out = this.line(d) return out; }) const pathTrend = this.container.selectAll("path.trend") .data([trendInfo.trend]) .join("path") .attr("class", "trend") .attr("d",d => { // debugger; const out = this.lineTrend(d) return out; }) } }41:T18f5,class NewWeeklyDeathsChartVis { constructor(el) { debugger; this._data = []; this._metric = "total_deaths"; this._margin = {left: 60, right:100, top:20, bottom: 40}; this._totalWidth = 400; this._totalHeight = 150; this.svgContainer = d3.select(el); this.startup(); } startup() { debugger; this._width = this._totalWidth - this._margin.left - this._margin.right; this._height = this._totalHeight - this._margin.top - this._margin.bottom; this.xScale = d3.scaleBand() .range([0,this._width]) this.yScale = d3.scaleLinear() .range([this._height,0]) this.colorScale = d3.scaleOrdinal(d3.schemeCategory10) this.yAxis = d3.axisLeft(this.yScale) .ticks(4) .tickFormat(d3.format(",")); this.xAxis = d3.axisBottom(this.xScale) .tickFormat(d => moment(d).format("DD/MM")); //.ticks(2); 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("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", 10) .attr("y", this._margin.bottom-12) .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", 10) .attr("class", "title y line1") .attr("transform",`rotate(-90)`) .attr("y", 0 - this._margin.left) .attr("x",0 - (this._height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text("Cambio en muertes diarias"); // text label for the y axis this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("class", "title y line2") .attr("transform",`rotate(-90)`) .attr("y", 0 - this._margin.left) .attr("x",0 - (this._height / 2)) .attr("dy", "2em") .style("text-anchor", "middle") .text("vs. 7 días anteriores"); this.line = d3.line() .x((d, i) => this.xScale(i+1)) // set the x values for the line generator .y((d) => this.yScale(+d.new_cases)) // set the y values for the line generator .curve(d3.curveMonotoneX) // apply smoothing to the line this.lineTrend = d3.line() .x((d, i) => this.xScale(+d[0]+1)) // set the x values for the line generator .y((d) => this.yScale(+d[1])) // set the y values for the line generator .curve(d3.curveMonotoneX) // apply smoothing to the line } render(trendInfo) { debugger; const self = this; function getMetric(d) { /* const metric = "new_deaths"; if (d[metric] && d.weekAgoRecord && d.weekAgoRecord.weekAgoRecord) { return (+d[metric] - d.weekAgoRecord[metric]) } else { return 0 } */ const metric =self._metric; if (d[metric] && d.weekAgoRecord && d.weekAgoRecord.weekAgoRecord) { return ((+d[metric] - d.weekAgoRecord[metric]) - (+d.weekAgoRecord[metric] - d.weekAgoRecord.weekAgoRecord[metric]))/7 } else { return 0 } } const data = trendInfo.recentDays debugger; const maxCases = _.max(data.map(d=> +getMetric(d))); const minCases = _.min(data.map(d=> +getMetric(d))) < 0 ? _.min(data.map(d=> +getMetric(d))) :0 ; const maxDate = _.max(data.map(d=> d.date)); const minDate = _.min(data.map(d=> d.date)); const days = moment(maxDate).diff(moment(minDate), 'days') const dateRange = _.range(0,days+1).map(d => { let date = moment(minDate); date.add(d,"days") let newDate = date.format("YYYY-MM-DD"); return newDate }); // Update axis this.xScale.domain(dateRange) //this.xScale.domain(data.map((d,i) => d.date)) this.yScale.domain([minCases,maxCases]) this.xAxis .tickValues(this.xScale.domain().filter(function(d,i){ return !(i%6)})) ; //.tickValues(this.xScale.domain().filter(function(d,i){ return !(i%10)}).map(d => moment(d).format("DD"))); data.forEach((d,i) => { d.x = this.xScale(d.date) d.y = this.yScale(+getMetric(d)) d.stage = +getMetric(d) < 0 ? "reducing" : i > 2 && +getMetric(d) < +getMetric(data[i-2]) ? "decreasing" : "increasing" }) this.container.select("g.y.axis") .call(this.yAxis) this.container.select("g.x.axis") .transition() .duration(duration) .call(this.xAxis) const points = this.container.selectAll("g.point") .data(data) .join("g") .attr("class", "point") .attr("transform",(d,i) => `translate(${d.x},0)`) const bars = points.selectAll("rect.changeBars") .data(d => [d]) .join("rect") .attr("class",d => `${d.stage} changeBars`) .attr("x", 0) .attr("y", d => +getMetric(d) > 0 ? d.y : this.yScale(0)) .attr("width", this.xScale.bandwidth()) .attr("height", d => Math.abs(this.yScale(0) - d.y)) const path = this.container.selectAll("path") .data([data]) .join("path") .attr("d",d => { debugger; const out = this.line(d) return out; }) const pathTrend = this.container.selectAll("path.trend") .data([trendInfo.trend]) .join("path") .attr("class", "trend") .attr("d",d => { debugger; const out = this.lineTrend(d) return out; }) } metric(_) { this._metric = _; return this; } }42:T16d4,class FactorWaveVis { constructor(el) { debugger; this._data = []; this._margin = {left: 60, right:100, top:20, bottom: 40}; this._totalWidth = 400; this._totalHeight = 200; this.svgContainer = d3.select(el); this.startup(); } startup() { debugger; this._width = this._totalWidth - this._margin.left - this._margin.right; this._height = this._totalHeight - this._margin.top - this._margin.bottom; this.xScale = d3.scaleTime() .range([0,this._width]) this.yScale = d3.scaleLinear() .range([this._height,0]) this.colorScale = d3.scaleOrdinal(d3.schemeCategory10) this.yAxis = d3.axisLeft(this.yScale) .ticks(3) .tickFormat(d3.format(",")); this.xAxis = d3.axisBottom(this.xScale) .tickFormat(d3.timeFormat("%d/%m")) .ticks(3); 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("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", 10) .attr("y", this._margin.bottom-12) .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", 10) .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("Factor de Crecimiento"); this.line = d3.line() .x((d, i) => this.xScale(i+1)) // set the x values for the line generator .y((d) => this.yScale(+d.new_cases)) // set the y values for the line generator .curve(d3.curveMonotoneX) // apply smoothing to the line this.lineTrend = d3.line() .x((d, i) => this.xScale(+d[0]+1)) // set the x values for the line generator .y((d) => this.yScale(+d[1])) // set the y values for the line generator .curve(d3.curveMonotoneX) // apply smoothing to the line } render(nodes) { const self = this; const flatted = _.flatten(nodes) const maxValue = d3.max(flatted.map(d => d.factor)); const maxDay = d3.max(flatted.map(d => moment(d.date))); const minDay = d3.min(flatted.map(d => moment(d.date))); _.reverse(nodes).forEach((d,i) => { const skip = nodes.length < 11 ? 1 : nodes.length < 20 ? 2 : nodes.length < 30 ? 3 : nodes.length < 40 ? 4 : nodes.length < 40 ? 4 : 8 d[7].noSkip = (i % skip == 0) || d[7].factor == maxValue }) this.xScale.domain([minDay,maxDay]) this.yScale.domain([1,maxValue]) this.container.select("g.y.axis") .call(this.yAxis) this.container.select("g.x.axis") .transition() .duration(duration) .call(this.xAxis) const referenceLines = this.container.selectAll("line.reference") .data(_.range(2,maxValue+1)) .join("line") .attr("class", "reference") .attr("x1", 0) .attr("x2", this._width) .attr("y1", this.yScale) .attr("y2", this.yScale) const lineGenerator = d3.line() .x((d,i) => this.xScale(d.date)) .y((d,i) => this.yScale(d.factor)) const envelopeGenerator = d3.line() .x((d,i) => { debugger; return this.xScale(d.date) }) .y((d,i) => this.yScale(d.factor)) const lines = this.container.selectAll("g.line") .data(nodes) .join("g") .attr("class","line") const line = lines.selectAll("path") .data(d => [d]) .join("path") .attr("d", lineGenerator) const miniMark = lines.selectAll("circle.mini") .data(d => d) .join("circle") .attr("class", "mini") .attr("cx", d => this.xScale(d.date)) .attr("cy", d => this.yScale(d.factor)) .attr("r", 1.5) const envelope = this.container.selectAll("path.envelope") .data([nodes.map(d => d[7])]) .join("path") .attr("class", "envelope") .attr("d", d => { debugger; return envelopeGenerator(d) }) const marks = this.container.selectAll("circle.mark") .data(nodes.map(d => d[7])) .join("circle") .attr("class", "mark") .attr("cx", d => this.xScale(d.date)) .attr("cy", d => this.yScale(d.factor)) .attr("r", 2) const markLabels = this.container.selectAll("g.markLabel") .data(nodes.map(d => d[7])) .join("g") .attr("class", "markLabel") .attr("display", d => d.noSkip ? true : "none") .attr("transform", (d,i) => `translate(${this.xScale(d.date)},${this.yScale(d.factor)})`) markLabels.selectAll("circle") .data(d => [d]) .join("circle") .attr("display", d => d.noSkip ? true : "none") .attr("cx", 0) .attr("cy", -10) .attr("r", 13) markLabels.selectAll("text") .data(d => [d]) .join("text") .attr("text-anchor", "middle") .attr("dx", 0) .attr("dy", -5) .text(d =>d3.format(".3s")( d.factor) ) } }43:T4f0,dataGroupedByCountry = { debugger; // Filter records only before the selected max date const _data = data.filter(d => { return moment(d.date) <= moment(referenceDate) }) //const reg = d3Regression.regressionExp() //const reg = d3Regression.regressionLog() const reg = d3Regression.regressionQuad() //const reg = d3Regression.regressionPoly() //.order(2) .x(d => +d.elapsedBaseLine) .y(d => +d[metric]) /* .filter(d => { return true; // We limit China records up to specified date //return d.location !== "China" || (d.location == "China" && moment(d.date) < moment(chinaMaxDate)) }) */ const newData = _.chain(_data) .groupBy(d => d.location) .map((items, location) => { addWeeklyFactor(items); // addRecovered(items); const recordsBaseLine = calculateElapsedDays(items).filter(e => e.elapsedBaseLine > 0); //const trendData = reg(recordsBaseLine); return ({ location: location, items: calculateElapsedDays(items).filter(e => e.elapsed >= 0), doublingInfo : calculateDoublingInfo(items), rateLastWeek : deathRateLastWeek(items), trendData: { //predict: trendData.predict } }) }) .value() return newData }44:T4f3,function calculateElapsedDays(items) { /* // Record format date: "2020-02-25" location: "Afghanistan" new_cases: "" new_deaths: "" total_cases: "1" total_deaths: "" */ let prevTotalCases = 0; let startDate = null; let dateBaseline = null; return _.chain(items) .sortBy(d => d.date) .each((d,i) => { startDate = i == 0 ? 0 : startDate; const totalCases = +d[metric]; // Identify date when cases where first reported if ((totalCases > 0 && prevTotalCases == 0)) { startDate = moment(d.date); } // Identify date when cases were above baseline (e.g. > 100) if ((totalCases >= +baseLine && !dateBaseline)) { dateBaseline = moment(d.date); } // Calculate days since cases where above baseLine if (dateBaseline) { d.elapsedBaseLine = moment(d.date).diff(dateBaseline, 'days') } else { d.elapsedBaseLine = null } // Calculate dates since cases where first reported if (startDate) { d.elapsed = moment(d.date).diff(startDate, 'days'); } else { d.elapsed = 0; } prevTotalCases = totalCases; }) .filter(d => limitDays ? d.elapsedBaseLine <= windowSize : true) .value() }45:T56d,function calculateDoublingInfo(items) { const metric_deaths = "total_deaths"; /* // Record format date: "2020-02-25" location: "Afghanistan" new_cases: "" new_deaths: "" total_cases: "1" total_deaths: "" */ const maxDate = _.last(items).date; const maxValue = + _.last(items)[doubling_metric]; const maxValue_deaths = + _.last(items)[metric_deaths]; let halfDate = null; let halfDays = null; let halfValue = null; let halfDate_deaths = null; let halfDays_deaths = null; let halfValue_deaths = null; _.chain(items) .sortBy(d => d.date) .reverse() .each((d,i) => { if ((+d[doubling_metric] < maxValue/2) && !halfDate) { halfDate = d.date; halfDays = i; halfValue = +d[doubling_metric]; } if ((+d[metric_deaths] < maxValue_deaths/2) && !halfDate_deaths) { halfDate_deaths = d.date; halfDays_deaths = i; halfValue_deaths = +d[metric_deaths]; } }) .value() return { total_cases: { doublingDays: halfDays, currentDate: maxDate, halfDate: halfDate, currentValue: maxValue, halfValue: halfValue, }, total_deaths: { doublingDays: halfDays_deaths, currentDate: maxDate, halfDate: halfDate_deaths, currentValue: maxValue_deaths, halfValue: halfValue_deaths } } }46:T7a3,data_ = { if (selectedRegion !== "TODOS") { var raw_data = raw_data_.filter(d => { return d.fecha_de_notificaci_n != '- -' && d.departamento == selectedRegion }) } else { var raw_data = raw_data_.filter(d => { return d.fecha_de_notificaci_n != '- -' }) } raw_data.forEach(d => { switch (d.departamento.substring(0,6)) { case "Barran": d.departamento = "Atlántico" break; case "Buenav": d.departamento = "Valle del Cauca" break; case "Cartag": d.departamento = "Bolívar" break; case "Santa ": d.departamento = "Magdalena" break; case "Archip": d.departamento = "San Andrés y Providencia" break; } }) raw_data.forEach(d => { if (groupByDpt) { d.location = d.departamento } else { d.location = d.ciudad_de_ubicaci_n } }) var new_cases = sql("select fecha_diagnostico as date,location,count(*) as new_cases from ? group by fecha_diagnostico,location order by fecha_diagnostico,location",[raw_data]) var new_deaths = sql("select fecha_de_muerte as date,location,count(*) as new_deaths from ? where fecha_de_muerte != '- -' group by fecha_de_muerte,location order by fecha_de_muerte,location",[raw_data]) var new_recovered = sql("select fecha_recuperado as date,location,count(*) as new_recovered from ? where fecha_recuperado != '- -' group by fecha_recuperado,location order by fecha_recuperado,location",[raw_data]) var new_candd = sql("select * from ? as t1 left join ? as t2 on (t1.date = t2.date and t1.location = t2.location) order by date,location",[new_cases, new_deaths]) var new_canddandr = sql("select * from ? as t1 left join ? as t2 on (t1.date = t2.date and t1.location = t2.location) order by date,location",[new_candd, new_recovered]) var filtrado = sql("select * from ? where date is not null",[new_canddandr]) return filtrado }47:T4ac,function checkbox(config = {}) { let { value: formValue, title, description, submit, options } = Array.isArray(config) ? {options: config} : config; options = options.map( o => (typeof o === "string" ? { value: o, label: o } : o) ); const form = input({ type: "checkbox", title, description, submit, getValue: input => { if (input.length) return Array.prototype.filter .call(input, i => i.checked) .map(i => i.value); return input.checked ? input.value : false; }, form: html` ` }); form.output.remove(); return form; }48:[{"id":"ca8f590f71be1131df092e8849182d5a428a3163f786988c540391a586fb0be63f549d152e6267f50fb633c6fcd21aa2d18a329169b8acdde56bca35636e3e94","href":"https://static.observableusercontent.com/files/ca8f590f71be1131df092e8849182d5a428a3163f786988c540391a586fb0be63f549d152e6267f50fb633c6fcd21aa2d18a329169b8acdde56bca35636e3e94","name":"Wave explanation.png","type":"image/png","lastModified":1588011286417.708,"size":440441}] 30:{"id":"cb839df9c0ac56f0","slug":"evolucion-de-covid-19-en-colombia","title":"Evolución de COVID-19 en las ciudades y departamentos de Colombia","thumbnail":"e5ce48512e2ae59b919a930395682c7bf4c9f13d0f34ca21c20b228f198affc6","access_level":"public","create_time":"$D2020-04-27T18:14:46.417Z","update_time":"$D2020-09-01T03:45:08.364Z","view_time":null,"first_public_time":"$D2020-04-28T07:38:21.235Z","has_unpublished_edits":null,"fork":{"id":"810f9a54ccdb5897","slug":"coronavirus-worldwide-evolution","title":"Coronavirus worldwide evolution","owner":{"id":"0843f5dc42ca68a0","login":"elaval","name":"Ernesto Laval"}},"stars":4,"starred":false,"owner":{"type":"team","id":"cb229b373d89c41a","login":"juancortiz","name":"","avatar_url":"https://avatars-next.observableusercontent.com/240f3730193b9937c72b5def193cc06eb4a83f5e767700626996d804489367b0","tier":"starter_2024"},"version":4615,"publish_version":4615,"role":null,"authored":false,"authors":[{"type":"individual","id":"bfeab4b26b603f6e","login":"juancortiz","name":"","avatar_url":"https://avatars-next.observableusercontent.com/240f3730193b9937c72b5def193cc06eb4a83f5e767700626996d804489367b0","tier":null}],"members":[{"type":"individual","id":"bfeab4b26b603f6e","login":"juancortiz","name":"","avatar_url":"https://avatars-next.observableusercontent.com/240f3730193b9937c72b5def193cc06eb4a83f5e767700626996d804489367b0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Evolución de COVID-19 en las ciudades y departamentos de Colombia","cells":[{"id":0,"value":"md`# Evolución de COVID-19 en las ciudades y departamentos de Colombia`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3012,"value":"{\n return html`\n

\n\n

v1.2 - 2020/06/30 | Los datos usados aquí se actualizan diariamente y de forma automática desde las fuentes en línea de Datos Abiertos del Gobierno de Colombia y consolidados por el Instituto Nacional de Salud.\nEste Notebook es una traducción y adaptación a Colombia del gran trabajo de @elaval en Coronavirus Worldwide Evolution.

\n \n

`\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2073,"value":"viewof metric = radio({\n title: 'Métrica',\n description: 'Seleccione la métrica',\n options: [\n { label: 'Casos totales confirmados', value: 'total_cases' },\n { label: 'Muertes totales', value: 'total_deaths' },\n ],\n value: 'total_cases'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4477,"value":" viewof groupByDpt = checkbox({\n options: [{\n value: true, \n label: `Agrupar por departamento`\n }]\n })\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"html`

Curva de crecimiento por ${labelGroupBy[2]} desde que se llegó a ${baseLine} ${metricLabel} y hasta el ${new Date(referenceDate).toLocaleString(\"es\", { year: 'numeric', month: 'long', day: 'numeric', timeZone:\"UTC\" })}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2797,"value":"viewof selectedRegion = select({\n title:\"Filtrar por departamento\",\n description: \"Se mostrará solamente el departamento seleccionado\",\n options: [\"TODOS\"].concat(regions),\n //options: _.concat([\"ALL\"],[]),\n multiple: false,\n value: \"\"\n}) \n// selectedRegion = \"ALL\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1177,"value":"viewof search = text({title: `Buscar ${labelGroupBy[2]}`, placeholder: `Nombre de ${labelGroupBy[2]}`, description: `Destacar ${labelGroupBy[1]} que coincidan con el texto ingresado (puede ingresar ${labelGroupBy[3]} separando con comas)
O haga clic en las curvas o nombres de ${labelGroupBy[1]} para destacar`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4561,"value":"// viewof primerosN = select({\n// title:`Mostrar primer${labelGroupBy[5]}`,\n// description: ``,\n// options: [10,20,50,\"TODOS\"],\n// multiple: false,\n// value: metric == \"total_deaths\" ? 1 : 20\n// })\nhtml``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2180,"value":"{\n if (limitDays) {\n return html`

Hasta ${windowSize} dias después que la ciudad alcanzó ${baseLine} ${metric == \"total_deaths\" ? \"muertes\" : \"casos\"}

`\n }\n else {\n return html`

Evolución de ${metric == \"total_deaths\" ? \"muertes por\" : \"casos de\"} COVID-19 hasta ${new Date(referenceDate).toLocaleString(\"es\", { year: 'numeric', month: 'long', day: 'numeric', timeZone:\"UTC\" })}

`\n }\n \n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"el2 = html`\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1851,"value":"viewof animateBtn = {\n const form = html`\n `;\n form.button.onclick = event => {\n event.preventDefault(); // Don’t submit the form.\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2458,"value":"viewof windowSize = number({placeholder: \"7\", title: `Ventana de tiempo (días)`, submit: false, value:7})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"\nviewof limitDays = checkbox({\n options: [{ value: \"toggle\", label: `Limitar a los primeros ${windowSize} dias después de llegar a ${baseLine} casos` }],\n value: false\n })\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3137,"value":"\n viewof showGrowthFactor = checkbox({\n options: [{\n value: \"toggle\", \n label: `Mostrar factor de crecimiento para ${labelGroupBy[1]} destacad${labelGroupBy[5]} (sólo para métrica de muertes totales)` ,\n disabled: metric == \"total_cases\"\n }],\n value: false,\n })\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2421,"value":"\n viewof showActive = checkbox({\n options: [{\n value: \"toggle\", \n label: `Mostrar área representando casos activos en ${labelGroupBy[3]} destacad${labelGroupBy[5]} (sólo para métrica de casos confirmados)` ,\n disabled: metric !== \"total_cases\"\n }],\n value: false,\n })\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"html`\n

\nNotas:\n
\n

Gráficas inspiradas en la gráfica creada por @jburnmurdoch y publicada en Finantial Times

\n\n\n \n

Progresión del crecimiento / decrecimiento de muertes

Los siguientes cuadros representan la evolución del factor de crecimiento de muertes semanal. Cada día calculamos el factor de crecimiento comparando las muertes de ese día con el mismo día de la semana pasada (hace 7 días).\n

\nEl factor de crecimiento semanal cambia todos los días (con suerte reduciendo su valor) y el objetivo es alcanzar el valor de 1.0 (cuando no habría nuevas muertes en una semana).\n

Factor de crecimiento: multiplicación de muertes en 7 días (para algun${labelGroupBy[5]} ${labelGroupBy[3]} en días recientes)

Cuántas veces han aumentado las muertes totales durante los últimos 7 días?

\nSi ${labelGroupBy[0]} tuvo 10 muertes hace 7 días y ahora tiene 25, este número será 2.5. Cuando este número llega a 1.0, quiere decir que en ${labelGroupBy[0]} no aumenta el número de muertes. La siguiente lista incluye ${labelGroupBy[3]} que tienen ${doublingMinValue[\"total_deaths\"]} o más muertes en total.

Número de días que tomó duplicar el total de ${doubling_metric == \"total_cases\" ? \"casos\" : \"muertes\"}

${labelGroupBy[3]} que tienen más de ${doublingMinValue[doubling_metric]} ${doubling_metric == \"total_cases\" ? \"casos\" : \"muertes\"} en total

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2568,"value":"viewof doubling_metric = radio({\n title: 'Métrica para tiempo de duplicación',\n description: 'Seleccione la métrica',\n options: [\n { label: 'Casos totales', value: 'total_cases' },\n { label: 'Muertes totales', value: 'total_deaths' },\n ],\n value: 'total_cases'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2224,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1828,"value":"html`

Tendencia de nuevos casos diarios durante los últimos ${windowSize} días

Según ventana de tiempo definida arriba. Para ${labelGroupBy[3]} que tienen más de 5 casos en total.

Estos cuadros fueron diseñados originalmente por @jburnmurdoch para @financialtimes\nen Twitter\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3754,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"viewof displayTable = checkbox({\n options: [{ value: \"toggle\", label: `Mostrar tabla con los casos actuales por ${labelGroupBy[2]}` }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"displayTable ? md`## Casos totales y nuevos el ${new Date(referenceDate).toLocaleString(\"es\", { month: 'long', day: 'numeric', timeZone:\"UTC\" })}` : md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"html`

Autor

Ernesto Laval (@elaval)

Traducción y adaptación para Colombia

Juan Carlos Ortiz (@juancortiz)

\n\n

Fuentes de información

Instituto Nacional de Salud - Gobierno de Colombia

Reporte Diario COVID-19 Colombia - https://www.ins.gov.co/Noticias/Paginas/Coronavirus.aspx

`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1402,"value":"md`## CSS Styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3746,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4257,"value":"md `style_bootstrap`\n// style_bootstrap","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1407,"value":"md`## Config Params`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3284,"value":"countryShortlist = {\n if (groupByDpt) {\n var list = [\"Bogotá D.C.\",\"Antioquia\",\"Atlántico\",\"Bolívar\",\"Valle del Cauca\",\"Santander\"]\n } else { \n var list = [\n \"Bogotá D.C.\",\n \"Cali\",\n \"Cartagena de Indias\",\n \"Barranquilla\",\n \"Medellín\",\n \"Soledad\"\n ]\n }\n return list\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4516,"value":"labelGroupBy = {\n if (groupByDpt) {\n return [\"el departamento\",\"los departamentos\",\"departamento\",\"departamentos\",\"o\",\"os\"] \n } else { \n return [\"la ciudad\",\"las ciudades\",\"ciudad\",\"ciudades\",\"a\",\"as\"]\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2996,"value":" viewof newRefDate = date({\n title: \"New ref date\", \n min: \"2019-12-31\",\n max: dataDate,\n value: \"2020-04-10\",\n description: \"Change the date if you want charts to be relative to a previous date\"\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3049,"value":"changeReferenceDate = {\n //mutable referenceDate = \"2020-04-14\"\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":929,"value":" viewof chinaMaxDate = date({\n title: \"Max date for China\", \n min: \"2019-12-31\",\n max: dataDate,\n value: \"2020-03-20\",\n description: \"Select the date for which you want to see the chart\"\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1497,"value":"dataSource = \"ecdc\"; \n//dataSource = \"jhu\"; \n\n/*\nviewof dataSource = radio({\n title: 'Data Source',\n description: 'Select the institution that provides the data',\n options: [\n { label: 'European Centre for Disease Prevention and Control (ECDC)', value: 'ecdc' },\n { label: 'World Health Organization (WHO)', value: 'who' },\n { label: 'Johns Hopkins University', value: 'jhu' },\n { label: 'JHU - China Regions', value: 'jhu-china' },\n ],\n value: 'ecdc'\n})\n*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1440,"value":"mutable referenceDate = dataDate","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2757,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2751,"value":"dataGroupedByCountry.map(d => {\n const name = standardCountryNames[d.location] || d.location;\n return [d.location, countryStandardInfo[name] && countryStandardInfo[name].name]\n}).filter(d => !d[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2787,"value":"subRegions = _.chain(countryStandardInfo)\n .map(d => d[\"sub-region\"])\n .uniq()\n .sortBy()\n .filter()\n .value()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2818,"value":"regions = _.chain(countryStandardInfo)\n .map(d => d[\"region\"])\n .uniq()\n .sortBy()\n .filter()\n .value()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2780,"value":"function isInSubRegion(countryName, subRegion) {\n const name = standardCountryNames[countryName] || countryName;\n return countryStandardInfo[name] && (countryStandardInfo[name][\"sub-region\"] == subRegion)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2823,"value":"function isInRegion(countryName, region) {\n const name = standardCountryNames[countryName] || countryName;\n return countryStandardInfo[name] && (countryStandardInfo[name][\"region\"] == region)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"height = width < 700 ? width*1.2 : 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3019,"value":"metricLabel = metric == \"total_deaths\" ? \"muertes\" : \"casos confirmados\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1411,"value":"md`## Animation aux`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":732,"value":"// Max number of days back for animation\nmax = 30;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":840,"value":"// Base trasition duration during animations \nduration = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2580,"value":"doublingMinValue = ({\n \"total_cases\": 10,\n \"total_deaths\" : 2,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"count = {\n animateBtn;\n let i = max-1;\n while (i >= 0) {\n yield Promises.tick(duration+500, i-- );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"updateRefDate = {\n animateBtn;\n count;\n mutable referenceDate = moment(dataDate).subtract(count, \"days\").format(\"YYYY-MM-DD\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1393,"value":"md`## Vis code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"render = {\n myLogVis.metric(metric).render(dataSinceBaseLine);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":744,"value":"myLogVis = {\n debugger;\n return new CoronaLogVis(el2)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1836,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3671,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3332,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3340,"value":"class WaveLayout {\n constructor() {\n this.metric = \"total_deaths\";\n }\n \n nodes(data) {\n const length = data.length;\n const nodes = [];\n \n _.each(_.range(0,data.length-7), i => {\n const base = data[i];\n const dailyData = []\n _.each(_.range(0,8), offset => {\n const comp = data[i+offset];\n const factor = comp[this.metric]/base[this.metric];\n dailyData.push({\n date:moment(comp.date),\n value: +comp[this.metric], \n factor:factor,\n relativeDay:+i+offset\n })\n })\n nodes.push(dailyData)\n })\n return nodes;\n \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1384,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"dataSinceBaseLine = _.chain(dataGroupedByCountry)\n.map(d => {\n return {\n country : d.location,\n items: d.items.filter(e => +e[metric] >= +baseLine),\n trendData: d.trendData\n }\n})\n.filter(d => d.items.length)\n.filter(d => d.country != \"Cases on an international conveyance Japan\" \n && d.country != \"International\"\n && d.country != \"World\"\n && d.country != \"Cruise Ship\"\n )\n.value()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4366,"value":"sql(\"select * from ? where location = 'Cajicá'\", [dataGroupedByCountry])\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1211,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1218,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2216,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3103,"value":"function addWeeklyFactor(items) {\n const metric_deaths = \"total_deaths\";\n\n const dateDict = {}\n \n items.forEach(d => dateDict[d.date] = d)\n \n items.forEach((d,i) => {\n const lastWeekDate = moment(d.date).subtract(7, \"days\").format(\"YYYY-MM-DD\");\n \n d.weekAgoRecord = dateDict[lastWeekDate]; \n \n d.factor7Days_deaths = d.weekAgoRecord && d.weekAgoRecord.total_deaths > 0 && d.total_deaths / d.weekAgoRecord.total_deaths;\n })\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2927,"value":"function deathRateLastWeek(items) {\n const metric_deaths = \"total_deaths\";\n /* \n // Record format\n date: \"2020-02-25\"\n location: \"Afghanistan\"\n new_cases: \"\"\n new_deaths: \"\"\n total_cases: \"1\"\n total_deaths: \"\"\n */\n const maxDate = _.last(items).date;\n const maxValue = + _.last(items)[metric];\n const maxValue_deaths = + _.last(items)[metric_deaths];\n \n const dateLastWeek = moment(maxDate).subtract(7, \"days\");\n const recordLastWeek = _.find(items,d => d.date == dateLastWeek.format(\"YYYY-MM-DD\"));\n \n const rate = recordLastWeek && maxValue_deaths / recordLastWeek.total_deaths\n return {\n now : maxDate,\n lastWeek: dateLastWeek.format(\"YYYY-MM-DD\"),\n valueNow: maxValue_deaths,\n valueLastWeek: recordLastWeek && +recordLastWeek.total_deaths,\n rate: rate\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2437,"value":"recoveredWindow = null\n// viewof recoveredWindow = number({\n// placeholder: \"14\", \n// title: \"Días después que los casos confirmados se consideran recuperados (para la estimación de casos activos)\", \n// submit: false, \n// value:14,\n// disabled: metric !== \"total_cases\"\n\n// })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2381,"value":"addRecovered = null\n// addRecovered = function(items) {\n// _.chain(items)\n// .sortBy(d => d.date)\n// //.reverse()\n// .each((d,i) => {\n// if (i > recoveredWindow) {\n// d.total_recovered = items[i-recoveredWindow].total_cases\n// } else {\n// d.total_recovered = 0\n// }\n// })\n// .value()\n \n// return items;\n\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1246,"value":"dataDate = _.maxBy(data_, d => moment(d.date)).date","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2188,"value":"_.maxBy(data_, d => moment(d.date)).date","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4139,"value":"sql(\"select min(date) as desde, max(date) as hasta from ?\", [data])[0]\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3623,"value":"DOM.download(new Blob([d3.tsvFormat(data), {type: \"text/tsv\"}]), \"data_covid_colombia.tsv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2138,"value":"data = {\n var sumcasesxloc = {}\n var sumdeathsxloc = {}\n var sumrecovxloc = {}\n var total = data_.map( r => {\n if (r.new_deaths === undefined) {\n r.new_deaths = 0\n }\n if (r.new_cases === undefined) {\n r.new_deaths = 0\n }\n if (r.new_recovered === undefined) {\n r.new_recovered = 0\n }\n if (sumcasesxloc[r.location]) {\n sumcasesxloc[r.location] += r.new_cases\n } else {\n sumcasesxloc[r.location] = r.new_cases\n }\n if (sumdeathsxloc[r.location]) {\n sumdeathsxloc[r.location] += r.new_deaths\n } else {\n sumdeathsxloc[r.location] = r.new_deaths\n }\n if (sumrecovxloc[r.location]) {\n sumrecovxloc[r.location] += r.new_recovered\n } else {\n sumrecovxloc[r.location] = r.new_recovered\n }\n r.total_cases = sumcasesxloc[r.location]\n r.total_deaths = sumdeathsxloc[r.location]\n r.total_recovered = sumrecovxloc[r.location]\n r.date = r.date.substr(0,10)\n return r\n })\n return total\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3896,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4450,"value":"valores_atencion = sql(\"select distinct atenci_n from ?\",[raw_data_])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4469,"value":"valores_fecha = sql(\"select distinct fecha_recuperado from ?\",[raw_data_])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4454,"value":"valores_estado = sql(\"select distinct estado from ?\",[raw_data_])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4484,"value":"valores_departamento = sql(\"select distinct departamento from ? order by departamento\",[raw_data_])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3894,"value":"raw_data_ = await d3.json(\"https://www.datos.gov.co/resource/gt2j-8ykr.json?$limit=1000000\") ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2013,"value":"data_world = null\n// data_world = {\n// let data;\n// switch(dataSource) {\n// case \"who\":\n// data = await d3.csv(\"https://covid.ourworldindata.org/data/full_data.csv\") ;\n// break;\n// default:\n// data = await d3.csv(\"https://covid.ourworldindata.org/data/ecdc/full_data.csv\")\n// }\n \n// return data\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2747,"value":"countryStandardInfo_old = {\n const countryData = await d3.csv(\"https://raw.githubusercontent.com/lukes/ISO-3166-Countries-with-Regional-Codes/master/all/all.csv\")\n //const countryData = []\n \n const dict = {};\n \n countryData.forEach(d => dict[d.name] = d)\n return dict\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4215,"value":"countryStandardInfo = {\n var ciudades = sql(\"select unique ciudad_de_ubicaci_n as name, departamento as region from ?\", [raw_data_])\n ciudades = ciudades.map(d => {\n switch (d.region.substring(0,6)) {\n case \"Barran\":\n d.region = \"Atlántico\"\n break;\n case \"Buenav\":\n d.region = \"Valle del Cauca\"\n break;\n case \"Cartag\":\n d.region = \"Bolívar\"\n break;\n case \"Santa \":\n d.region = \"Magdalena\"\n break;\n case \"Archip\":\n d.region = \"San Andrés y Providencia\"\n break;\n }\n return d\n })\n var dict = {}\n ciudades.forEach(d => dict[d.name] = d)\n return dict\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4196,"value":"divipola = {}\n// divipola = {\n// const divipola = await d3.json(\"https://www.datos.gov.co/resource/gdxc-w37w.json\")\n// const dict = {};\n// divipola.forEach(d => dict[d.cod_mpio] = d)\n// return dict\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1397,"value":"md`## Aux functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":966,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"function flagUrl(country) {\n \n const name = (countryNameMApping[country] || country).toLowerCase().split(\" \").join(\"-\")\n \n // return `https://cdn.countryflags.com/thumbs/${name}/flag-round-250.png`\n return `https://cdn.countryflags.com/thumbs/${name}/flag-round-250.png`\n\n}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1879,"value":"function flagUrlRect(country) {\n \n const name = (countryNameMApping[country] || country).toLowerCase().split(\" \").join(\"-\")\n \n return `https://cdn.countryflags.com/thumbs/united-states-of-america/flag-png-small.png`\n //https://cdn.countryflags.com/download/chile/flag-png-icon-32.png\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1387,"value":"md`## Code Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"import {style_bootstrap} from \"@elaval/utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"xlsx = require('https://bundle.run/xlsx@0.14.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1678,"value":"d3Regression = require.alias({\n \"d3-regression\": \"d3-regression@1\",\n})(\"d3-array\", \"d3-axis\", \"d3-regression\", \"d3-scale\", \"d3-shape\", \"d3-selection\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3890,"value":"sql = require(\"alasql\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"moment = require('moment/moment.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"import {input, autoSelect,text, select, date, radio, button, slider, number} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"ga = {\n const ga = await require(\"https://www.google-analytics.com/analytics.js\").catch(() => window.ga);\n ga(\"create\", \"UA-18407315-4\", \"auto\");\n ga(\"send\", \"pageview\", html``.pathname);\n return ga;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 31:"$30:body"