2d:null 2e:["$","title",null,{"children":"Projections of Total Deaths Due to COVID-19 - in the Spring of 2020 | Marko Lalovic | Observable"}] 33:T704,html`

`34:T130d,{ let caption = html``; if (language === 'en') { return html`

Projections of total deaths from COVID-19. Click on the legend to select or deselect a country.

Source: IHME

` } else if (language === 'es') { return html`

Proyecciones del total de muertes por COVID-19. Haga clic en la leyenda para seleccionar o anular

la selección de un país. Fuente: IHME

` } else { return html`

COVID-19的总死亡人数预测。单击图例以选择或取消选择国家。

资源: IHME

` } }35:Tcb1,chart = { let svg = d3.select('svg.projections'); // state let selectedColorValues = ['United States', 'Brazil', 'Italy']; let selectedCountries = ['United States', 'Brazil', 'Italy']; function removeItemOnce(arr, value) { var index = arr.indexOf(value); if (index > -1) { arr.splice(index, 1); } return arr; } function onClick(cname) { if (selectedColorValues.includes(cname) // at least one has to be selected && selectedColorValues.length > 1) { removeItemOnce(selectedColorValues, cname); selectedCountries.splice(0, selectedCountries.length); } else { selectedCountries.splice(0, selectedCountries.length); selectedCountries.push(cname); selectedColorValues.push(cname); } render(); } const projectionsTitle = { 'en': 'Projections of Total Deaths Over Time by Country', 'es': 'Proyecciones de muertes totales a lo largo del tiempo por país', 'zh': '各个国家随时间推移的总死亡人数预测' }; const projectionsXAxisLabel = { 'en': '', 'es': '', 'zh': '' }; const projectionsYAxisLabel = { 'en': 'Total deaths (per 100,000)', 'es': 'Muertes totales (por 100,000)', 'zh': '死亡总数 (每十万人口)' }; const render = () => { // projections line chart let lineChartG = svg.selectAll('g.line-chart').data([null]); lineChartG = lineChartG .enter() .append('g') .attr('class', 'line-chart') .merge(lineChartG); // select country legend let colorLegendG = svg.selectAll('g.country-legend').data([null]); colorLegendG = colorLegendG .enter() .append('g') .attr('class', 'country-legend') .merge(colorLegendG); const width = +svg.attr('width'); const height = +svg.attr('height'); const parseTime = d3.timeParse('%Y-%m-%d') const yValue = d => +d.totdea_mean; const xValue = d => parseTime(d.date); const colorValue = d => d.country; // for nested use to sort const lastYValue = d => yValue(d.values[d.values.length - 1]); const nested = d3.nest() .key(colorValue) .entries(data) .sort((a, b) => d3.descending(lastYValue(a), lastYValue(b)) ); const colorScale = d3.scaleOrdinal(d3.schemeCategory10); colorScale.domain(nested.map(d => d.key)); const margin = { top: 55, right: 200, bottom: 50, left: 100 }; lineChartG.call(lineChart, { colorScale, colorValue: d => d.key, // instead of colorValue(d) when using nested! yValue: yValue, title: projectionsTitle[language], xValue: xValue, xAxisLabel: projectionsXAxisLabel[language], yAxisLabel: projectionsYAxisLabel[language], margin: margin, width, height, data, nested, selectedColorValues, selectedCountries }); colorLegendG .attr('transform', `translate(800, 45)`) .call(colorLegendProjections, { colorScale, circleRadius: 11, spacing: 30, textOffset: 15, onClick, selectedColorValues, language }); } return Object.assign(svg.node(), {render}); }36:T1c0b,lineChart = (selection, props) => { const { colorValue, colorScale, yValue, title, xValue, xAxisLabel, yAxisLabel, margin, width, height, data, nested, selectedColorValues, selectedCountries, } = props; const splitIndexes = { 'Brazil': 91, 'Egypt': 92, 'France': 91, 'Germany': 92, 'Italy': 92, 'Japan': 91, 'Philippines': 92, 'Turkey': 92, 'United Kingdom': 92, 'United States': 96}; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; function numberFormat(number) { if (number > 10000) { return d3.format('.3s')(number).replace('G', 'B'); } else { return number; } } // filter data for x and y scales function isSelected(name) { return selectedColorValues.includes(name); } const xScale = d3.scaleTime() .domain(d3.extent(data.filter( d => isSelected(d.country) ), xValue)) .range([0, innerWidth]) .nice(); const yScale = d3.scaleLinear() .domain(d3.extent(data.filter( d => isSelected(d.country) ), yValue)) .range([innerHeight, 0]) .nice(); const g = selection.selectAll('.container').data([null]); const gEnter = g.enter() .append('g') .attr('class', 'container'); gEnter.merge(g) .attr('transform', `translate(${margin.left},${margin.top})`); const xAxis = d3.axisBottom(xScale) .ticks(5) .tickFormat(d3.timeFormat('%b %d')) .tickSize(-innerHeight) .tickPadding(15); const yAxis = d3.axisLeft(yScale) .tickSize(-innerWidth) .tickFormat(numberFormat) .tickPadding(10); const yAxisGEnter = gEnter .append('g') .attr('class', 'y-axis'); const yAxisG = g.select('.y-axis'); yAxisGEnter .merge(yAxisG) .call(yAxis) .selectAll('.domain').remove(); yAxisGEnter .append('text') .attr('class', 'axis-label') .attr('y', -60) .attr('fill', 'black') .attr('transform', `rotate(-90)`) .attr('text-anchor', 'middle') .merge(yAxisG.select('.axis-label')) .attr('x', -innerHeight / 2) .text(yAxisLabel); const xAxisGEnter = gEnter .append('g') .attr('class', 'x-axis'); const xAxisG = g.select('.x-axis'); xAxisGEnter .merge(xAxisG) .call(xAxis) .attr('transform', `translate(0,${innerHeight})`) .select('.domain').remove(); xAxisGEnter .append('text') .attr('class', 'axis-label') .attr('y', 80) .attr('fill', 'black') .merge(xAxisG.select('.axis-label')) .attr('x', innerWidth / 2) .text(xAxisLabel); const lineGenerator = d3.line() .x(d => xScale(xValue(d))) .y(d => yScale(yValue(d))) .curve(d3.curveBasis); function generatePaths(d) { return lineGenerator(d.values); } function getRange(dataCountry, type) { if (type === 'continuous') { return d3.range(0, splitIndexes[dataCountry.key]) } else { return d3.range(splitIndexes[dataCountry.key] + 1, dataCountry.values.length) } } function getIndexes(nested, type) { const allIndexes = d3.range(10); let indexes = []; if (type === 'selected') { allIndexes.forEach(i => { const country = nested[i].key; if (selectedCountries.includes(country)) { indexes.push(i); } }); } else if (type === 'dashed') { allIndexes.forEach(i => { const country = nested[i].key; if (selectedColorValues.includes(country) && !selectedCountries.includes(country)) { indexes.push(i); } }); } else { allIndexes.forEach(i => { const country = nested[i].key; if (selectedColorValues.includes(country)) { indexes.push(i); } }); } return indexes; } function melt(nested, type) { const data = []; let filterRange = []; let allCountries = []; // TODO: show only paths from selectedColorValues! // filter on selectedColorValues allCountries = getIndexes(nested, type); allCountries.forEach(i => { const values = nested[i].values const filtered = []; filterRange = getRange(nested[i], type) filterRange.forEach(j => { filtered.push(values[j]); }); const row = { key: nested[i].key, values: filtered } data.push(row); }); return data; }; const linePathsCont = g.merge(gEnter) .selectAll('.continuous').data(melt(nested, 'continuous')); const linePathsContEnter = linePathsCont .enter().append('path') .attr('class', 'continuous'); const linePathsContUpdate = linePathsContEnter.merge(linePathsCont); linePathsContUpdate.attr('d', generatePaths) .attr('stroke', d => colorScale(d.key)) .attr('opacity', d => selectedColorValues.includes(colorValue(d)) ? 1 : 0.1 ); linePathsCont.exit().remove(); const linePathsSelected = g.merge(gEnter) .selectAll('.dashed').data(melt(nested, 'selected')); const linePathsSelectedEnter = linePathsSelected .enter().append('path') .attr('class', 'dashed'); const linePathsSelectedUpdate = linePathsSelectedEnter.merge(linePathsSelected); if (melt(nested, 'selected').length > 0) { linePathsSelectedUpdate.attr('d', generatePaths) .attr('stroke', d => colorScale(d.key)) .attr('opacity', d => selectedColorValues.includes(colorValue(d)) ? 1 : 0.1 ); let totalLength = linePathsSelectedUpdate.node().getTotalLength(); // solution from: https://www.visualcinnamon.com/2016/01/animating-dashed-line-d3 const dashing = "6, 6"; let dashLength = dashing .split(/[\s,]/) .map(function (a) { return parseFloat(a) || 0 }) .reduce(function (a, b) { return a + b }); let dashCount = Math.ceil( totalLength / dashLength ); let newDashes = new Array(dashCount).join( dashing + " " ); let dashArray = newDashes + " 0, " + totalLength; linePathsSelectedUpdate .attr('stroke-dashoffset', totalLength) .attr('stroke-dasharray', dashArray) .transition().duration(500).ease(d3.easeLinear) .attr('stroke-dashoffset', 0); linePathsSelected.exit().remove(); } else { linePathsSelected.exit().remove(); } const linePathsDashed = g.merge(gEnter) .selectAll('.alldashed').data(melt(nested, 'dashed')); const linePathsDashedEnter = linePathsDashed .enter().append('path') .attr('class', 'alldashed'); const linePathsDashedUpdate = linePathsDashedEnter.merge(linePathsDashed); if (melt(nested, 'dashed').length > 0) { linePathsDashedUpdate .attr('d', generatePaths) .attr('stroke', d => colorScale(d.key)) .attr('opacity', d => selectedColorValues.includes(colorValue(d)) ? 1 : 0.1 ); } linePathsDashed.exit().remove(); gEnter .append('text') .attr('class', 'title') .attr('x', -100) .attr('y', -30) .merge(g.select('.title')) .text(title); }37:T7f2,colorLegendProjections = (selection, props) => { const { colorScale, circleRadius, spacing, textOffset, onClick, selectedColorValues, language } = props; const enToZh = {'Brazil': '巴西', 'Japan': '日本', 'Egypt': '埃及', 'France': '法国', 'Germany': '德国', 'Italy': '意大利', 'Philippines': '菲律宾', 'Turkey': '火鸡', 'United Kingdom': '英国', 'United States': '美国'}; const enToEs = {'Brazil': 'Brasil', 'Japan': 'Japón', 'Egypt': 'Egipto', 'France': 'Francia', 'Germany': 'Alemania', 'Italy': 'Italia', 'Philippines': 'Filipinas', 'Turkey': 'Turquía', 'United Kingdom': 'Reino Unido', 'United States': 'Estados Unidos'}; function getText(d) { switch(language) { case 'en': return d; break; case 'es': return enToEs[d]; break; case 'zh': return enToZh[d]; break; default: console.log(d); } } const groups = selection.selectAll('g') .data(colorScale.domain()); const groupsEnter = groups .enter().append('g') .attr('class', 'tick-colorlegend') .attr('opacity', 0.8); groupsEnter .merge(groups) .attr('transform', (d, i) => `translate(0, ${i * spacing})` ) .attr('opacity', d => selectedColorValues.includes(d) ? 1 : 0.25 ) .on('click', d => onClick(d)); groups.exit().remove(); groupsEnter.append('circle') .merge(groups.select('circle')) .attr('r', circleRadius) .attr('fill', colorScale); groupsEnter.append('text') .merge(groups.select('text')) .text(getText) .attr('dy', '0.32em') .attr('x', textOffset); }38:[] 31:{"id":"5d1ede2283f85b3e","slug":"covid-calculator-deaths-projections","title":"Projections of Total Deaths Due to COVID-19 - in the Spring of 2020","thumbnail":"c4f525d9c134fa537e3101e6fef38e307bc12630b7a0924d89205cfdaf32dc10","access_level":"public","create_time":"$D2020-06-11T16:37:39.216Z","update_time":"$D2021-10-11T16:07:19.114Z","view_time":null,"first_public_time":"$D2020-06-11T17:24:33.579Z","has_unpublished_edits":null,"fork":{"id":"b7e3fcc7082c0c6e","slug":"covid-calculator-poverty-projections","title":"Projections of Extreme Poverty Due to COVID-19 - in the Spring of 2020","owner":{"id":"1d1a2582caf5fc60","login":"markolalovic","name":"Marko Lalovic"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1d1a2582caf5fc60","login":"markolalovic","name":"Marko Lalovic","avatar_url":"https://avatars-next.observableusercontent.com/16070004cabbc8527717f526f34d2f607b4d0d67a7bdabfe1fcce1b23904a308","tier":"starter_2024"},"version":278,"publish_version":278,"role":null,"authored":false,"authors":[{"type":"individual","id":"070c06762986c2d4","login":"markolalovic","name":"Marko Lalovic","avatar_url":"https://avatars-next.observableusercontent.com/16070004cabbc8527717f526f34d2f607b4d0d67a7bdabfe1fcce1b23904a308","tier":null}],"members":[{"type":"individual","id":"070c06762986c2d4","login":"markolalovic","name":"Marko Lalovic","avatar_url":"https://avatars-next.observableusercontent.com/16070004cabbc8527717f526f34d2f607b4d0d67a7bdabfe1fcce1b23904a308","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"4759977c792f8dfd","slug":"calculus-of-covid-19","title":"COVID-19 Viz","owner":{"id":"1d1a2582caf5fc60","login":"markolalovic","name":"Marko Lalovic"}},"type":"notebook","body":{"title":"Projections of Total Deaths Due to COVID-19 - in the Spring of 2020","cells":[{"id":0,"value":"md`# Projections of Total Deaths Due to COVID-19 - in the Spring of 2020`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"viewof language = compareOptions()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"md`# About\nThis is part of visualizations I made back in the spring of 2020 to explore and analyze the potential impacts of COVID-19. More visualizations in a visual tool are accessible here: [https://markolalovic.com/covid-calc/](https://markolalovic.com/covid-calc/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`# Imports and Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"md`Expend the cells for source code.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"chart.render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"compareOptions = () => {\n const buttons = html`\n \n `\n buttons.value = 'en';\n\n buttons.en.onclick = event => {\n buttons.value = 'en';\n event.preventDefault();\n buttons.dispatchEvent(new CustomEvent(\"input\")); \n }\n buttons.zh.onclick = event => {\n buttons.value = 'zh';\n event.preventDefault();\n buttons.dispatchEvent(new CustomEvent(\"input\")); \n }\n buttons.es.onclick = event => {\n buttons.value = 'es';\n event.preventDefault();\n buttons.dispatchEvent(new CustomEvent(\"input\")); \n } \n \n return buttons\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"md`# Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"data = d3.csv('https://gist.githubusercontent.com/markolalovic/3778bb4bb1f85d312653354bd6ea5a9a/raw/2aac40edac65e4ecb6ebc2d559b886210a4dfc6e/projections.csv')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 32:"$31:body"