31:T483,viewof baseLine = { let options= [ { label: `50 ${metricLabel}`, value: 50 }, { label: `100 ${metricLabel}`, value: 100 }, { label: `200 ${metricLabel}`, value: 200 }, { label: `500 ${metricLabel}`, value: 500 }, { label: `1,000 ${metricLabel}`, value: 1000 }, { label: `5,000 ${metricLabel}`, value: 5000 }, { label: `10,000 ${metricLabel}`, value: 10000 }, { label: `100,000 ${metricLabel}`, value: 100000 }, { label: `500,000 ${metricLabel}`, value: 500000 }, { label: `1,000,000 ${metricLabel}`, value: 1000000 }, ]; if (metric == "total_deaths" || metric == "newDeaths7Days") { options = _.concat([{ label: `1 ${metricLabel}`, value: 1 }, { label: `10 ${metricLabel}`, value: 10 }, { label: `20 ${metricLabel}`, value: 20 }], options); } return radio({ title: `Base line (number of ${metricLabel})`, description: `Select the number of ${metricLabel} to use as a common reference (days will be counted since the country reached that number of ${metricLabel})`, options: options, value: metric == "total_deaths" ? 10000 : 100000 }) }32:T644,html`

Growth pace indicators

The coronavirus outbreak has a type of growth that many call "exponential" (not completely exponential, but close to exponential on early stages)

This means that the growth is not additive (we don't add a fix increase each period of time) but multiplicative (each period of time we multiply the previous number by a certain factor)

The growth factor is sometimes presented as a metric of the daily increase (new cases today / total confirmed cases or new cases today / new cases yesterday). This figures (e.g. 8%) might be helpful, but I see 2 main challenges:

Some countries show important fluctuations in the report of daily new cases (variations that might respond more to testing constrains than to the outbreak growth itself
For many of us it is hard to interpret the meaning of that figure (what does it actually mean that the expansion today is 8% and 2 days ago it was 10%)

I prefer to use 2 metrics that communicate the growth pace (growth expansion) that might have meaning that is easier to understand to non specialists. These are numbere that might be associated to a longer period (eg a week) or to a standar factor (eg. doubling):

How many times the metric (deaths or confirmed cases) grew last 7 days
How many days it took to double the metric

Both metrics are associated to the same concept: the rate at which the outbreak numbers are being multiplied during a period of time.

`33:Td8f,{ //let data =dataGroupedByCountry; const data = _.chain(dataGroupedByCountry) .filter(d => !applyShortlist || 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) > 50 && d.location != "World") }) .filter(d => !applyShortlist || 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)}

${moment(d.rateLastWeek.now).format("DD MMM")}: ${d3.format(",")(d.rateLastWeek.valueNow)}

${moment(d.rateLastWeek.lastWeek).format("DD MMM")}: ${d3.format(",")(d.rateLastWeek.valueLastWeek)}

` const visEl = d3.select(el).select("div.vis svg"); const visObj = new FactorWaveVis(visEl.node()); const recentNodes = _.slice(nodes, nodes.length-28, nodes.length) visObj.render(recentNodes) //visObj.render(nodes) return el }).value()} ` return out } 34:T9b1,{ 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(".1f")(d.factor7Days_deaths)}

${moment(d.date).format("DD MMM")}: ${d3.format(",")(d.total_deaths)}

${moment(d.weekAgoRecord.date).format("DD MMM")}: ${d3.format(",")(d.weekAgoRecord.total_deaths)}

`).join("")}

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

` return out }35:Tafc,{ const groupDescriptions = { 0 : "Countries that have incresed less than 1.1 times the number of deaths during last 7 days", 1 : "Countries that have incresed between 1.1 and 1.4 times the number of deaths during last 7 days", 2 : "Countries that have incresed more than 1.4 times the number of deaths during last 7 days", } const countryGroups = _.chain(dataGroupedByCountry) .filter(d => d.rateLastWeek.rate && d.rateLastWeek.valueLastWeek && d.rateLastWeek.valueNow >= doublingMinValue[doubling_metric] && d.location !== "World" ) .groupBy(d => d.rateLastWeek.rate < 1.1 ? 0 : d.rateLastWeek.rate < 1.4 ? 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(".1f")(d.rateLastWeek.rate)}

${moment(d.rateLastWeek.now).format("DD MMM")}: ${d3.format(",")(d.rateLastWeek.valueNow)}

${moment(d.rateLastWeek.lastWeek).format("DD MMM")}: ${d3.format(",")(d.rateLastWeek.valueLastWeek)}

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

`).join("")} ` return out }36:Tb9b,{ 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 ? "days" :"day"}

${moment(d.doublingInfo[doubling_metric].currentDate).format("DD MMM")}: ${d3.format(",")(d.doublingInfo[doubling_metric].currentValue)}

${moment(d.doublingInfo[doubling_metric].halfDate).format("DD MMM")}: ${d3.format(",")(d.doublingInfo[doubling_metric].halfValue)}

` return el }).value()}

` /* doublingDays: halfDays, currentDate: maxDate, halfDate: halfDate, currentValue: maxValue, halfValue: halfValue */ return out }37:T548,{ //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) > 300 && 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 }38:T40f,{ 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 newCasesTrend = growthRate(dataChile); const out = html`

Chile (datos actualizados)

${"Chile"}

` const visEl = d3.select(out).select("div.vis svg"); const visObj = new NewCasesVis(visEl.node()); visObj.render(newCasesTrend) return out }39:T43f, { const windowSize = 31; 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 newCasesTrend = growthRate(data.filter(d => d.location=="Chile")); const out = html`

Chile (datos actualizados)

${"Chile"}

` const visEl = d3.select(out).select("div.vis svg"); const visObj = new NewWeeklyDeathsChartVis(visEl.node()); visObj.render(newCasesTrend) return out }3a:T4a1,html`

Increase of average number of new daily deaths compared to same day the week before

Everyday we have an increase of deaths. This number keeps ioncreasing at a certain pace (the groeth of the growth). We calculate this pace as the difference between new deaths on a specific data and thas number on the same day from the previous week.

This number (how many new daily deaths have increasde compared to prev week) could be increasing at an acelerated pace (a positive number that grows everyday), at an decelerated way (a positive number that is reduced everyday) or could be decreasing (every day we have fewer nuew deaths).

The ultimate goal is to reduce the new daily deaths until we reach 0

These charts show the growth of the growth for each day.

	Acelerating
	Decelerating
	Reducing

`3b:T56a,{ 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) > 300 && 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 }3c:T6d3,html`

Notes:

Our default data source is obtained from ourworldindata.org. Since March 19 their data is sourced from the European Centre for Disease Prevention and Control (ECDC).

Until 18 March 2020 their data was sourced from the World Health Organization (WHO). Unfortunately, in the publication of WHO data on 18th March – Situation Report 58 – they shifted the reporting cutoff time from 0900 CET to 0000 CET. This means that comparability is compromised because there is an overlap between the last two WHO data publications (Situation Reports 57 and 58).

For China, we only display data until ${moment(chinaMaxDate).format("DD MMM YYYY")}, to avoid distortions on the chart (China was substantially more days than the rest of the country since they started community transmission). This should not affect how we observe the "shape" of the curve for China, since they present an asymptotic curve at approx. 80.000 confirmed cases since the begining of March

(In Spanish info relative to Chile)
Los reportes internacionales de la ECDC informan diariamente los casos de Chile antes de que el Ministerio de Salud haya publicado los datos actualizados para el día anterior. Por esta razón, para Chile, se reemplazan los datos de la ECDC por datos actualizados de Chile al momento en que los nuevos datos sean publicados por el Ministerio de Salud.

Chart inspired by a log chart created by @jburnmurdoch and published on the Finantial Times

`3d:T54b,{ 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()}

Flag	Country	Total Cases	New Cases	Total Deaths
	${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 }3e:T77e,html`

Author

Ernesto Laval (@elaval)

Data sources

European Centre for Disease Prevention and Control (ECDC)

World Health Organization (WHO)

Johns Hopkins University (JHU)

` 3f:T457,html``40:T6ad,// Mapping needed to identify associated flag reference when needed countryNameMApping = ({ "Chile v2": "Chile", "Chile v3": "Chile", "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", })41: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", })42:T427e,class CoronaLogVis { constructor(el) { debugger; this._data = []; this._margin = {left: 80, right:100, 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(`Days since the country reached ${baseLine} ${metricDescription[metric]}`); // 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(`Number of ${metricDescription[metric]} (log scale)`); 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(`Number of ${metricDescription[metric]} (linear scale)`); } else { this.container.select("text.title.y") .text(`Number of ${metricDescription[metric]} (log scale)`); } 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("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) 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)) .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.8) //.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; } }43:T1014,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(`Recent ${windowSize} days`); // 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("New cases"); 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; }) } }44:T18e8,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(`Date`); // 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("Change in daily deaths"); // 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 days ago"); 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; } }45:T16e8,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(`Date`); // 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("Growth Factor"); 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("font-size", "10") .attr("dx", 0) .attr("dy", -5) .text(d =>d3.format(".3s")( d.factor) ) } }46:T82d,{ const multirowData = [] const data = dataGroupedByCountry.filter(d => d.location == "Chile")[0].items.forEach(d => { const baseRecord = { date: d.date, location: d.location, } const thisWeekRecord = _.clone(baseRecord); thisWeekRecord.relativeTime = "thisWeek"; thisWeekRecord.total_cases = d.total_cases; thisWeekRecord.activos14 = d.total_cases - (d.weekAgoRecord && d.weekAgoRecord.weekAgoRecord && d.weekAgoRecord.weekAgoRecord.total_cases); thisWeekRecord.activos21 = d.total_cases - (d.weekAgoRecord && d.weekAgoRecord.weekAgoRecord && d.weekAgoRecord.weekAgoRecord.weekAgoRecord && d.weekAgoRecord.weekAgoRecord.weekAgoRecord.total_cases); thisWeekRecord.total_deaths = d.total_deaths; multirowData.push(thisWeekRecord); const weekAgo1 = _.clone(baseRecord); weekAgo1.relativeTime = "1weekAgo"; weekAgo1.total_cases = d.weekAgoRecord && d.weekAgoRecord.total_cases; weekAgo1.total_deaths = d.weekAgoRecord && d.weekAgoRecord.total_deaths; multirowData.push(weekAgo1); const weekAgo2 = _.clone(baseRecord); weekAgo2.relativeTime = "2weekAgo"; weekAgo2.total_cases = d.weekAgoRecord && d.weekAgoRecord.weekAgoRecord && d.weekAgoRecord.weekAgoRecord.total_cases; weekAgo2.total_deaths = d.weekAgoRecord && d.weekAgoRecord.weekAgoRecord && d.weekAgoRecord.weekAgoRecord.total_deaths; multirowData.push(weekAgo2); const weekAgo3 = _.clone(baseRecord); weekAgo3.relativeTime = "3weekAgo"; weekAgo3.total_cases = d.weekAgoRecord && d.weekAgoRecord.weekAgoRecord && d.weekAgoRecord.weekAgoRecord.weekAgoRecord && d.weekAgoRecord.weekAgoRecord.weekAgoRecord.total_cases; weekAgo3.total_deaths = d.weekAgoRecord && d.weekAgoRecord.weekAgoRecord && d.weekAgoRecord.weekAgoRecord.weekAgoRecord && d.weekAgoRecord.weekAgoRecord.weekAgoRecord.total_deaths; multirowData.push(weekAgo3); }) return DOM.download(new Blob([d3.tsvFormat(multirowData), {type: "text/tsv"}]), "data_chile.tsv") }47:T53e,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); if (location == "Chilev2") { debugger; } 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 } }) }) .sortBy(d => d.location) .value() return newData }48: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() }49:T552,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)[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[metric] < maxValue/2) && !halfDate) { halfDate = d.date; halfDays = i; halfValue = +d[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 } } }4a:T49d,function addWeeklyFactor(items) { const metric_deaths = "total_deaths"; const dateDict = {} items.forEach(d => dateDict[d.date] = d) items.forEach((d,i) => { const lastWeekDate = moment(d.date).subtract(7, "days").format("YYYY-MM-DD"); d.weekAgoRecord = dateDict[lastWeekDate]; d.factor7Days_deaths = d.weekAgoRecord && d.weekAgoRecord.total_deaths > 0 && d.total_deaths / d.weekAgoRecord.total_deaths; }) items.forEach((d,i) => { const casesToday = d.total_cases; const deathsToday = d.total_deaths; const cases2WeeksAgo = d.weekAgoRecord && d.weekAgoRecord.weekAgoRecord && d.weekAgoRecord.weekAgoRecord.total_cases; const deaths1WeekAgo = d.weekAgoRecord && d.weekAgoRecord.total_deaths; const deaths2WeeksAgo = d.weekAgoRecord && d.weekAgoRecord.weekAgoRecord && d.weekAgoRecord.weekAgoRecord.total_deaths; d.newCases14Days = cases2WeeksAgo && casesToday && casesToday - cases2WeeksAgo || null d.newDeaths7Days = deaths1WeekAgo && deathsToday && deathsToday - deaths1WeekAgo || 0 d.newDeaths14Days = deaths2WeeksAgo && deathsToday && deathsToday - deaths2WeeksAgo || null }) }4b:T404,dataChile_MinCienciaMenos553 = { const data = await d3.csv("https://raw.githubusercontent.com/MinCiencia/Datos-COVID19/master/output/producto5/TotalesNacionales_std.csv"); const attributeMap = { "Casos nuevos con sintomas" : "new_cases_symptomatic", "Casos totales" : "total_cases", "Casos recuperados" : "recovered_cases", "Fallecidos" : "total_deaths", "Casos activos" : "total_active", "Casos nuevos sin sintomas" : "new_cases_asymptomatic", "Casos nuevos totales" : "new_cases", } const out = _.chain(data) .groupBy(d => d["Fecha"]) .map((items, key) => { const record = {}; record["date"] = moment(key, "YYYY-MM-DD").format("YYYY-MM-DD"); record["location"] = "Chile"; items.forEach(d => { const attribute = attributeMap[d["Dato"]] || null; record[attribute] = d["Total"] }) if (record["date"] >= "2020-06-07") { record["total_deaths"] = +record["total_deaths"]-553 } return record; }) .value() return out }4c:T49e,function standarizeJHURawChina(data) { const exclude = [ "Confirmed", "Deaths", "Unspecified*", ] const dates = _.chain(data[0]).map((d,key) => key).filter(d => moment(d).isValid()).value() const groupedData = _.chain(data) .filter(d => d["Country/Region"] == "China" && d["Province/States"]) .filter(d => !_.find(exclude, e => e == d["Province/States"]) || !d["Province/States"]) .groupBy(d => d["Province/States"] ? `${d["Country/Region"]}-${d["Province/States"]}` : d["Country/Region"]) .map((items, key) => { const accumValues = {}; dates.forEach(d => accumValues[d] = 0); items.forEach(item => { dates.forEach(d => accumValues[d] = accumValues[d] + +item[d]) }) return ({ location: key, items: accumValues }) }) .value() const newData = groupedData.map(d => { return _.map(d.items, (value, key) => ({ location: d.location, date : moment(key,"M-D-YY").format("YYYY-MM-DD"), total_cases : value, new_cases: value-d.items[moment(key,"M/D/YY").subtract(1, "day").format("M/D/YY")] || 0 })) }) return _.flatten(newData) }4d: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; }4e:[{"id":"067569946a67f7e7b9a4549e2f9414a8ad5ac5001d92940bd2444c94cd8c5ef108e7b216090bd4f16bdb813c5132e7bb22bee114130bcbfca4525ebeafdfb0fd","href":"https://static.observableusercontent.com/files/067569946a67f7e7b9a4549e2f9414a8ad5ac5001d92940bd2444c94cd8c5ef108e7b216090bd4f16bdb813c5132e7bb22bee114130bcbfca4525ebeafdfb0fd","name":"COVID-19-geographic-disbtribution-worldwide-2020-03-14.xls","type":"application/x-msi","lastModified":1584230903758.157,"size":588288},{"id":"e401c02d7794159d59f0858c0d254b1cefca41949335a0b0dce5f83a4856b7dff8246ba2a6e792debaba5fbe8a6eed705d5c7e8559eaf8eb8865681c2f5b435f","href":"https://static.observableusercontent.com/files/e401c02d7794159d59f0858c0d254b1cefca41949335a0b0dce5f83a4856b7dff8246ba2a6e792debaba5fbe8a6eed705d5c7e8559eaf8eb8865681c2f5b435f","name":"COVID-19-geographic-disbtribution-worldwide-2020-03-14.txt","type":"text/plain","lastModified":1584231937622.811,"size":176930},{"id":"ca8f590f71be1131df092e8849182d5a428a3163f786988c540391a586fb0be63f549d152e6267f50fb633c6fcd21aa2d18a329169b8acdde56bca35636e3e94","href":"https://static.observableusercontent.com/files/ca8f590f71be1131df092e8849182d5a428a3163f786988c540391a586fb0be63f549d152e6267f50fb633c6fcd21aa2d18a329169b8acdde56bca35636e3e94","name":"Wave explanation.png","type":"image/png","lastModified":1586968969676.757,"size":440441},{"id":"909e6f0a110fdd7371fa733ce769d1af3a2568841b498bb045e5c456bb4e6fd664de282adf98740697b91c96a074d7a89436a593d712b3150b868453ee3d6f37","href":"https://static.observableusercontent.com/files/909e6f0a110fdd7371fa733ce769d1af3a2568841b498bb045e5c456bb4e6fd664de282adf98740697b91c96a074d7a89436a593d712b3150b868453ee3d6f37","name":"PuertoRico.png","type":"image/png","lastModified":1588628907039.566,"size":25466}] 2f:{"title":"Coronavirus worldwide evolution","cells":[{"id":0,"value":"md`# Coronavirus worldwide evolution`","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"html`

Growth curve per country since the country reached ${baseLine} ${metricLabel} until ${moment(referenceDate).format(\"DD MMM YYYY\")}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3012,"value":"{\n return html``\n /*\n return html`\n

\n\n

\nWARNING: GITHUB has been having issues recently. We might not be able to retreive some of the data used in our reports\n \n

`\n*/\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2073,"value":"viewof metric = radio({\n title: 'Metric',\n description: 'Select the target metric',\n options: [\n { label: 'Total confirmed cases', value: 'total_cases' },\n { label: 'New cases last 14 days', value: 'newCases14Days' },\n { label: 'Total deaths', value: 'total_deaths' },\n { label: 'New deathslast 7 days', value: 'newDeaths7Days' },\n ],\n value: 'total_deaths'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":886,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2797,"value":"viewof selectedRegion = select({\n title:\"Highlight a world region\",\n description: \"All countries in the region will be highlighted\",\n options: _.concat([\"ALL\"],regions),\n //options: _.concat([\"ALL\"],[]),\n multiple: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1177,"value":"viewof search = text({title: \"Search country\", placeholder: \"Country name\", description: \"Highlight countries that match the given name (you can specify multiple countries separated by a comma)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2180,"value":"{\n if (limitDays) {\n return html`

Up to ${windowSize} days aftter countries reached ${baseLine} ${metricDescription[metric]}

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

Evolution of COVID-19 ${metricDescription[metric]} until ${moment(referenceDate).format(\"DD MMM YYYY\")}

`\n }\n \n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"el2 = html`\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1271,"value":"html`\n

Author: @elaval

Data sources:
${\n dataSource == \"who\" ? \"WHO via Our World in Data https://ourworldindata.org/coronavirus-source-data\"\n : dataSource == \"ecdc\" ? \"ECDC via Our World in Data https://ourworldindata.org/coronavirus-source-data
Ministerio de Salud de Chile\" \n\n : \"Johns Hopkins University (JHU)\"}

`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":937,"value":"\nviewof limitDays = checkbox({\n options: [{ value: \"toggle\", label: `Limit on only first ${windowSize} days after reaching ${baseLine} cases` }],\n value: false\n })\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2458,"value":"viewof windowSize = number({placeholder: \"7\", title: `Time window (number of days after reaching ${baseLine} cases`, submit: false, value:7})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3137,"value":"\n viewof showGrowthFactor = checkbox({\n options: [{\n value: \"toggle\", \n label: `Show growth factor on highlighted countries (only for total deaths)` ,\n disabled: metric == \"total_cases\"\n }],\n value: false,\n })\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2421,"value":"\n viewof showActive = checkbox({\n options: [{\n value: \"toggle\", \n label: `Show area representing active cases on highlighted countries (only for confirmed cases metric)` ,\n disabled: metric !== \"total_cases\"\n }],\n value: false,\n })\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2437,"value":"viewof recoveredWindow = number({\n placeholder: \"14\", \n title: \"Days after confirmed cases are considered recovered (for estimation of active cases)\", \n submit: false, \n value:14,\n //disabled: false && metric !== \"total_cases\"\n\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3057,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2568,"value":"viewof doubling_metric = radio({\n title: 'Metric for growth indicator information',\n description: 'Select the target metric',\n options: [\n { label: 'Total cases', value: 'total_cases' },\n { label: 'Total deaths', value: 'total_deaths' },\n ],\n value: 'total_deaths'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3589,"value":"html`

Growth Wave

The following charts represent the evolution of the weekly growth factor. Each day we calculate the growth factor comparing deaths taht day with the same day last week (7 days ago).\n

\nThe weekly growth factor changes everyday (hopefully reducing its value) and the target is to reach the value of 1.0 (when there would be no new deaths in a week).\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3284,"value":"countryShortlist = [\n \"Chile\",\n \"Chile v2\",\n \"Chile v3\",\n //\"Australia\",\n \"Argentina\",\n \"Brazil\",\n \"Canada\",\n\n //\"China\",\n \"Colombia\",\n \"Ecuador\",\n \"Germany\",\n \"India\",\n \"Italy\",\n \"Mexico\",\n \"Panama\",\n \"Peru\",\n \"Spain\",\n \"United States\",\n \"South Korea\"\n]\n\n/*countryShortlist = [\n \"Argentina\",\n \"Brazil\",\n //\"Canada\",\n \"Chile\",\n //\"China\",\n \"Colombia\",\n \"Ecuador\",\n //\"Germany\",\n //\"India\",\n //\"Italy\",\n \"Mexico\",\n \"Panama\",\n \"Peru\",\n //\"Spain\",\n //\"United States\",\n //\"South Korea\"\n]\n/*\ncountryShortlist = [\n \"Australia\",\n \"New Zealand\",\n \"Chile\",\n]\n*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":4139,"value":"{\n //mutable referenceDate = \"2020-06-12\"\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3963,"value":"\n viewof applyShortlist = checkbox({\n options: [{\n value: \"toggle\", \n label: `Apply shortlist` ,\n disabled: false\n }],\n value: false,\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3451,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":3320,"value":"html`

Growth factor: multiplication of deaths in 7 days (for a selection of countries on recent days)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3250,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2982,"value":"html`

How many times total deaths have increased during last 7 days

\nIf a country had 100 deaths 7 days ago, and now has 250, this number will be 2.5
\nWhen this number reaches 1.0, the country is not increasing the number of deaths

\n\nFollowing list includes countries that have more than ${doublingMinValue[doubling_metric]} total ${doubling_metric == \"total_cases\" ? \"cases\" : \"deaths\"}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2945,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2285,"value":"html`

Number of days it took to double total ${doubling_metric == \"total_cases\" ? \"cases\" : \"deaths\"}

Countries that have more than ${doublingMinValue[doubling_metric]} total ${doubling_metric == \"total_cases\" ? \"cases\" : \"deaths\"}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2224,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1828,"value":"html`

Trend of new daily cases during the last ${windowSize} days

Countries that have more than 300 total cases

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1696,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2128,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":3673,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":3797,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":3825,"value":"html`\n

These charts where originally created by @jburnmurdoch for @financialtimes\non twitter\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3754,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":3746,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":752,"value":"viewof displayTable = checkbox({\n options: [{ value: \"toggle\", label: \"Display table with current cases by country\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":583,"value":"displayTable ? md`## Total and new cases on ${moment(referenceDate).format(\"DD MMM YYYY\")}` : md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1402,"value":"md`## CSS Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"style_bootstrap","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1407,"value":"md`## Config Params`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":3049,"value":"changeReferenceDate = {\n //mutable referenceDate = \"2020-04-14\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":929,"value":" viewof chinaMaxDate = date({\n title: \"Max date for China\", \n min: \"2019-12-31\",\n max: dataDate,\n value: \"2020-04-15\",\n description: \"Select the date for which you want to see the chart\"\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":3912,"value":"metricDescription = ({\n \"total_cases\" : \"confirmed cases\",\n \"total_deaths\": \"deaths\",\n \"newCases14Days\": \"new cases in 14 days\",\n \"newDeaths7Days\": \"new deaths in 7 days\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1440,"value":"mutable referenceDate = dataDate","pinned":true,"hidden":false,"mode":"ojs"},{"id":647,"value":"$40","pinned":false,"hidden":false,"mode":"ojs"},{"id":2757,"value":"$41","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":140,"value":"height = width < 700 ? width *1.2 : 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":3019,"value":"metricLabel = metric == \"total_deaths\" ? \"deaths\" : \"confirmed cases\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3619,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1411,"value":"md`## Animation aux`","pinned":false,"hidden":false,"mode":"ojs"},{"id":732,"value":"// Max number of days back for animation\nmax = 30;","pinned":false,"hidden":false,"mode":"ojs"},{"id":840,"value":"// Base trasition duration during animations \nduration = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":2580,"value":"doublingMinValue = ({\n \"total_cases\": 300,\n \"total_deaths\" : 10,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":1393,"value":"md`## Vis code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"render = {\n myLogVis.metric(metric).render(dataSinceBaseLine);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":744,"value":"myLogVis = {\n debugger;\n return new CoronaLogVis(el2)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"$42","pinned":false,"hidden":false,"mode":"ojs"},{"id":1836,"value":"$43","pinned":false,"hidden":false,"mode":"ojs"},{"id":3671,"value":"$44","pinned":false,"hidden":false,"mode":"ojs"},{"id":3332,"value":"$45","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1384,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4120,"value":"dataSinceBaseLine.filter(d => d.location ==\"Cñplohilev2\")","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":3625,"value":"$46","pinned":false,"hidden":false,"mode":"ojs"},{"id":3877,"value":"dataGroupedByCountry.filter(d => d.location==\"Uruguay\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":3879,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1211,"value":"$47","pinned":false,"hidden":false,"mode":"ojs"},{"id":1218,"value":"$48","pinned":false,"hidden":false,"mode":"ojs"},{"id":2216,"value":"$49","pinned":false,"hidden":false,"mode":"ojs"},{"id":3103,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":2381,"value":"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"},{"id":3909,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1246,"value":"dataDate = _.maxBy(data_, d => moment(d.date)).date","pinned":false,"hidden":false,"mode":"ojs"},{"id":2188,"value":"_.maxBy(data_, d => moment(d.date)).date","pinned":false,"hidden":false,"mode":"ojs"},{"id":3600,"value":"data.filter(d => d.location==\"Chile\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":4130,"value":"_.last(data.filter(d => d.location==\"Chile v2\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3623,"value":"DOM.download(new Blob([d3.tsvFormat(data), {type: \"text/tsv\"}]), \"data_covid_world.tsv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2138,"value":"data = {\n //return data_\n \n return _.concat(\n data_\n .filter(d => d.location !== \"Chile\" \n && d.location !== \"International\" \n //), dataChile, dataChileV2, dataChileV3)\n ), dataChile)\n \n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2176,"value":"data_.filter(d=> d.location ==\"ChileV2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2013,"value":"data_ = {\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 case \"jhu\":\n const dataDeathsJHraw = await d3.csv(\"https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/who_covid_19_situation_reports/who_covid_19_sit_rep_time_series/who_covid_19_sit_rep_time_series.csv\");\n data = standarizeJHURaw(dataDeathsJHraw)\n break;\n case \"jhu-china\":\n const dataDeathsJHrawChina = await d3.csv(\"https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/who_covid_19_situation_reports/who_covid_19_sit_rep_time_series/who_covid_19_sit_rep_time_series.csv\");\n data = standarizeJHURawChina(dataDeathsJHrawChina)\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"},{"id":3880,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":4101,"value":"dataChileV2 = {\n const data = dataChile_MinCiencia.map(d => {\n const record = _.cloneDeep(d);\n record.location = `${record.location} v2`\n record.total_deaths = dataFallecidosChile[record.date];\n return record;\n })\n \n \n return data;\n \n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":3993,"value":"dataChile = dataChile_MinCiencia\n//dataChile = dataChile_MinCienciaMenos553","pinned":true,"hidden":false,"mode":"ojs"},{"id":4135,"value":"dataFallecidosChile = {\n \n const dict = {};\n \n let accum = 0;\n _.chain(dataChile)\n .map(d => d.date)\n .each(d => {\n accum += +dataNuevosFallecidosChile[d] || 0;\n dict[d] = accum;\n })\n .value()\n \n return dict\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4087,"value":"dataNuevosFallecidosChile = {\n \n const dict = {};\n const data = await d3.csv(\"https://raw.githubusercontent.com/MinCiencia/Datos-COVID19/master/output/producto37/Defunciones_std.csv\");\n \n const ultimaPublicacion = _.chain(data).map(d => d.Publicacion).uniq().sortBy().last().value();\n data.filter(d => d.Publicacion == ultimaPublicacion).forEach(d => {\n dict[d.Fecha] = +d.Total\n })\n \n return dict\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4156,"value":"dataChileV3 = {\n const data = dataChile_MinCienciaMenos553.map(d => {\n const record = _.cloneDeep(d);\n record.location = `${record.location} v3`\n return record;\n })\n \n \n return data;\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4149,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs"},{"id":3992,"value":"dataChile_MinCiencia = {\n const data = await d3.csv(\"https://raw.githubusercontent.com/MinCiencia/Datos-COVID19/master/output/producto5/TotalesNacionales_std.csv\");\n \n const attributeMap = {\n \"Casos nuevos con sintomas\" : \"new_cases_symptomatic\",\n \"Casos totales\" : \"total_cases\",\n \"Casos recuperados\" : \"recovered_cases\",\n \"Fallecidos\" : \"total_deaths\",\n \"Casos activos\" : \"total_active\",\n \"Casos nuevos sin sintomas\" : \"new_cases_asymptomatic\",\n \"Casos nuevos totales\" : \"new_cases\",\n }\n \n const out = _.chain(data)\n .groupBy(d => d[\"Fecha\"])\n .map((items, key) => {\n const record = {};\n record[\"date\"] = moment(key, \"YYYY-MM-DD\").format(\"YYYY-MM-DD\");\n record[\"location\"] = \"Chile\";\n \n items.forEach(d => {\n const attribute = attributeMap[d[\"Dato\"]] || null;\n record[attribute] = d[\"Total\"]\n })\n\n return record;\n })\n .value()\n \n return out\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2124,"value":"dataChile_adhoc = d3.tsv(\"https://raw.githubusercontent.com/elaval/Coronavirus/master/coronavirus_data_chile.tsv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3955,"value":"dataCuarentenas = {\n const dataRaw = await d3.json(\"https://services1.arcgis.com/LsoiDXzijohT7g97/arcgis/rest/services/COVID19ChileAcciones/FeatureServer/1/query?where=1%3D1&outFields=OBJECTID,CuarentenaID,Nombre,Estado,Alcance,FInicio,FTermino,Cut_Com&returnGeometry=false&outSR=4326&f=json\");\n return dataRaw.features.map(d => {\n const record = d.attributes;\n return {\n comuna: record.Nombre,\n desde: moment(record.FInicio).format(\"YYYY-MM-DD\"),\n hasta: moment(record.FTermino).format(\"YYYY-MM-DD\"),\n cut: record.Cut_Com\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2552,"value":"//d3.csv(\"https://chilecracia.org/826acc1f-03bc-4e75-b724-41f0e8e25ea4\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2747,"value":"countryStandardInfo = {\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"},{"id":2337,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs"},{"id":2019,"value":"function standarizeJHURaw(data) {\n const dates = _.chain(data[0]).map((d,key) => key).filter(d => moment(d).isValid()).value()\n const groupedData = _.chain(data)\n //.filter(d => d[\"Country/Region\"] == \"China\")\n .groupBy(d => d[\"Country/Region\"])\n .map((items, key) => {\n const accumValues = {};\n dates.forEach(d => accumValues[d] = 0);\n \n items.forEach(item => {\n dates.forEach(d => accumValues[d] = accumValues[d] + +item[d])\n })\n return ({\n location: key,\n items: accumValues\n })\n })\n .value()\n \n const newData = groupedData.map(d => {\n return _.map(d.items, (value, key) => ({\n location: d.location,\n date : moment(key,\"M-D-YY\").format(\"YYYY-MM-DD\"),\n total_cases : value,\n new_cases: value-d.items[moment(key,\"M/D/YY\").subtract(1, \"day\").format(\"M/D/YY\")] || 0\n }))\n\n })\n \n \n return _.flatten(newData)\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1397,"value":"md`## Aux functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":966,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs"},{"id":3936,"value":"adHocFlags = ({\n \"Puerto Rico\" : await FileAttachment(\"PuertoRico.png\").url()\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"function flagUrl(country) {\n \n if (adHocFlags[country]) {\n return adHocFlags[country]\n } else {\n const name = (countryNameMApping[country] || country).toLowerCase().split(\" \").join(\"-\")\n \n return `https://cdn.countryflags.com/thumbs/${name}/flag-round-250.png`\n }\n \n\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1387,"value":"md`## Code Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"import {style_bootstrap} from \"@elaval/utils\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"xlsx = require('https://bundle.run/xlsx@0.14.1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":7,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"moment = require('moment@2.24.0/moment.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"import {input, autoSelect,text, select, date, radio, button, slider, number} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"ga = {\n const ga = await require(\"https://www.google-analytics.com/analytics.js\").catch(() => window.ga);\n ga(\"create\", \"UA-143020946-8\", \"auto\");\n ga(\"send\", \"pageview\", html``.pathname);\n return ga;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W4e","stdlib":"1","titling":"auto"}