Published
Edited
Jul 19, 2021
8 forks
Importers
154 stars
Fatality_chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
svg.append("g").call(grid);
svg.append("g").call(annotations);
svg.append("g").call(legends);
function onMouseOver(selected) {
d3.select("#p-circles").selectAll("circle").attr("fill-opacity", 0.2).attr("stroke-opacity", 0.2);
d3.select("#country_labels").selectAll("text").attr("fill-opacity", 0.2);
d3.select("#cfr_labels").selectAll("text").attr("fill-opacity", 0);
d3.select(".shade").attr("fill-opacity", 0.1);
const selected_circle = d3.select(this);
const country_code = selected_circle.attr("class");
const cfr_labels = (selected.deaths/selected.confirmed*100).toFixed(1);
selected_circle.attr("fill-opacity", 1.0);
const temp_path = svg.append("g").attr("id", "temp-path").style("pointer-events", "none")
.selectAll("path")
.data(data.filter(
d => d.country_code === country_code)
).join("path").attr("class", `${country_code}`)
.attr("stroke", d => color(d.region)).attr("fill", "none")
.attr("stroke-opacity", 1).attr("stroke-width", 2)
.attr("d", d => country_trajectory(d.country_code));
const temp_circles = svg.append("g").attr("id", "temp-circles").style("pointer-events", "none")
.selectAll("circle").data(dataOfCountry_new(country_code)).join("circle")
.attr("fill", selected_circle.attr("fill"))
.attr("fill-opacity", 1)
.attr("stroke", selected_circle.attr("fill")).attr("stroke-opacity", 1)
.attr("cx", d => x(d.confirmed)).attr("cy", d => y(d.deaths)).attr("r", 2);
const temp_label = svg.append("text").attr("id", "temp-label").style("pointer-events", "none")
.text(country_code_to_name(country_code) + ": " + cfr_labels + "%").attr("font-size", 50)
.style("text-anchor", "middle")
.attr("x", selected_circle.attr("cx") - 60).attr("y", selected_circle.attr("cy") - 50)
.attr("font-style", "bold")
.attr("font-family", "Helvetica, sans-serif");
}
function onMouseMove() {
}
function onMouseOut() {
d3.select("#p-circles").selectAll("circle").attr("fill-opacity", 0.5).attr("stroke-opacity", 0.5);
d3.select("#country_labels").selectAll("text").attr("fill-opacity", 1.0);
d3.select("#cfr_labels").selectAll("text").attr("fill-opacity", 0);
d3.select(this).attr("fill-opacity", 0.5);
d3.select(".shade").attr("fill-opacity", 0.2);
d3.select("#temp-circles").remove();
d3.select("#temp-label").remove();
d3.select("#temp-path").remove();
}
const country_labels = svg.append("g").attr("id", "country_labels").selectAll("text")
.data(dataAt(today).filter(d => d.population > 1e7), d => d.country)
.join("text");
const p_circles = svg.append("g").attr("id", "p-circles")
.selectAll("circle").data(dataAt(today), d => d.country).join("circle");
const c_circles = svg.append("g").attr("id", "c-circles")
.selectAll("circle").data(dataAt(today), d=>d.country).join("circle");
const d_circles = svg.append("g").attr("id", "d-circles")
.selectAll("circle").data(dataAt(today), d => d.country).join("circle");
const cfr_labels = svg.append("g").attr("id", "cfr_labels").selectAll("text")
.data(dataAt(today).filter(d => d.deaths > 5), d => d.country)
.join("text");
return Object.assign(svg.node(), {
update(data) {
if (radius_type == 'population') {
p_circles.data(data, d => d.country)
.attr("stroke", "black").attr("fill", d => color(d.region)).attr("fill-opacity", 0.5)
.attr("cx", d => x(d.confirmed)).attr("cy", d => y(d.deaths)).attr("r", d => radius(d.population))
.attr("class", d => `${d.country_code}`)
.on("mouseover", onMouseOver)
.on("mouseout", onMouseOut);
};
c_circles.data(data, d => d.country)
.attr("fill", "black").attr("fill-opacity", 0.5)
.attr("cx", d => x(d.confirmed)).attr("cy", d => y(d.deaths)).attr("r", d => radius(d.confirmed));
d_circles.data(data, d => d.country)
.attr("fill", "black").attr("fill-opacity", 0.75)
.attr("cx", d => x(d.confirmed)).attr("cy", d => y(d.deaths)).attr("r", d => radius(d.deaths));
country_labels.data(data, d => d.country)
.text(d => d.country)
.attr("font-size", 12)
.style("text-anchor", "middle")
.attr("x", d => x(d.confirmed))
.attr("y", d => y(d.deaths) - radius(d[radius_type]) - 2);
cfr_labels.data(data, d => d.country)
.attr("font-size", 9)
.attr("fill-opacity", 0)
.style("text-anchor", "start")
.text(d => 5)
.text(d => (d.deaths/d.confirmed*100).toFixed(1) + "%")
.attr("x", d => x(d.confirmed) + radius(d[radius_type]) + 2)
.attr("y", d => y(d.deaths));
}
});
}
legends = g => g
.call(g => g.append("g")
.append("rect") // rectangular background
.attr("fill", "white")
.attr("stroke", "lightgrey")
.attr("x", x(2)).attr("y", y(10e6))
.attr("width", x(200)-x(2)).attr("height", y(5e1)-y(20e3)))
.call(g => g.append("g")
.selectAll("circle")
.data(legend_circles)
.join("circle")
.attr("cx", d => d.cx).attr("cy", d => d.cy).attr("r", d => d.r)
.attr("fill", d => d.color)
.attr("fill-opacity", d => d.opacity)
.attr("stroke", d => d.stroke))
.call(g => g.append("g")
.selectAll("text")
.data(legend_labels)
.join("text")
.text(d => d.text)
.style("text-anchor", d => d.anchor)
.attr("font-size", d => d.size)
.attr("x", d => d.x).attr("y", d => d.y))
.call(g => g.append("g")
.selectAll("line")
.data(legend_lines)
.join("line")
.attr("stroke", "black")
.attr("x1", d => d.x1).attr("y1", d => d.y1).attr("x2", d => d.x2).attr("y2", d => d.y2));
legend_lines = ([
{x1: x(40), x2: x(15), y1: y(3.1e6), y2: y(10.5e5)},
{x1: x(16.5), x2: x(10), y1: y(3e5), y2: y(6.9e5)},
{x1: x(10), x2: x(8), y1: y(1e5), y2: y(8e5)},
]);
legend_labels = {
const cx = legend_base_params.cx;
const cy = legend_base_params.cy;
const r = legend_base_params.r;
const labels = ([
{text: "Country name", size: 12, anchor: "middle", x: cx, y: cy - r - 5},
{text: "Fatality rate", size: 10, anchor: "start", x: cx + r + 5, y: cy},
{text: "Population", size: 12, anchor: "start", x: x(40), y: y(3e6)},
{text: "Confirmed cases", size: 12, anchor: "start", x: x(18), y: y(2.5e5)},
{text: "Deaths", size: 12, anchor: "start", x: x(8), y: y(0.7e5)},
]);
return labels;
};
legend_circles = {
const cx = legend_base_params.cx;
const cy = legend_base_params.cy;
const r = legend_base_params.r;
const circles = ([
{cx: cx, cy: cy, r: r, color: color("East Asia & Pacific"), opacity: 0.5, stroke: "black"},
{cx: cx, cy: cy, r: r/2, color: "black", opacity: 0.5, stroke: "none"},
{cx: cx, cy: cy, r: r/5, color: "black", opacity: 0.75, stroke: "none"},
]);
return circles;
};
legend_base_params = ({cx: x(8), cy: y(8e5), r: (x(380)-x(2))/6});
annotations = g => g
.call(g => g.append("g") // Date
.append("text").text(dateOnlyFormat(currDateF))
.style("text-anchor", "end")
.attr("font-size", 70).attr("fill-opacity", 0.1)
.attr("font-style", "bold")
.attr("font-family", "Helvetica, sans-serif")
.attr("x", x(params.xmax)).attr("y", y(1)))
.call(g => g.append("g") // shade
.append("polygon").attr("class", "shade")
.attr("fill","black").attr("fill-opacity","0.2").attr("points", shade))
.call(fatality_lines).call(fatality_labels) // fatality lines and labels
.call(g => g.append("g") // Fatality rate label
.append("text").attr("stroke", "none").attr("fill", "darkred")
.attr("font-weight", "bold").attr("font-size", 18).style("text-anchor", "end")
.text("Fatality Rates").attr("x", x(params.xmax)).attr("y", y(params.ymax)-5))
/* .call(g => g.append("g")
.append("text").text("Likely under-tested or under stress ← → Likely better response")
.style("text-anchor", "middle")
.attr("font-size", 15).attr("fill-opacity", "0.3").attr("style","white-space:pre")
.attr("x", x(2.5e3)).attr("y", y(7e4))
.attr("transform", "rotate(" + (text_rotation_angle+90) + " " + x(2.5e3) + " " + y(7e4) +")"));
*/
fatality_labels = g => g
.attr("stroke", "none")
.attr("font-size", 12)
.attr("stroke-opacity", 0.4)
.call(g => g.append("g")
.selectAll("text")
.data(fatality_data)
.join("text")
.style("text-anchor", "end")
.attr("fill", d => d.color)
.text(d => d.name + " (" + (d.fatality*100).toFixed(1) + "%)" )
.attr("transform", d => "rotate(" + text_rotation_angle + " " + x(d.x) + " " + y(d.x*d.fatality) +")")
.attr("x", d => x(d.x))
.attr("y", d => y(d.x * d.fatality)));
fatality_lines = g => g
.attr("stroke-opacity", 0.3)
.call(g => g.append("g")
.selectAll("line")
.data(fatality_data)
.join("line")
.attr("stroke", d=> d.color)
.attr("x1", d => x(1.0/d.fatality))
.attr("x2", d => x(d3.min([params.xmax, params.ymax/d.fatality])))
.attr("y1", y(1.0))
.attr("y2", d => y(d3.min([params.xmax * d.fatality, params.ymax]))));
text_rotation_angle = - Math.atan( (y(1)-y(2))/(x(2)-x(1)) ) / radians;
grid = g => g
.attr("stroke", "currentColor")
.attr("stroke-opacity", 0.1)
.call(g => g.append("g")
.selectAll("line")
.data(x.ticks())
.join("line")
.attr("x1", d => 0.5 + x(d))
.attr("x2", d => 0.5 + x(d))
.attr("y1", params.margin.top)
.attr("y2", height - params.margin.bottom))
.call(g => g.append("g")
.selectAll("line")
.data(y.ticks())
.join("line")
.attr("y1", d => 0.5 + y(d))
.attr("y2", d => 0.5 + y(d))
.attr("x1", params.margin.left)
.attr("x2", width - params.margin.right));
xAxis = g => g
.attr("transform", `translate(0,${height - params.margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80, ","))
.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", width)
.attr("y", params.margin.bottom - 4)
.attr("fill", "currentColor")
.attr("text-anchor", "end")
//.text(`Confirmed cases up until ${timeFormat(d3.timeDay.offset(today, -delay_parameter))} →`));
.text(`Confirmed cases up until ${delay_parameter} day(s) ago →`));
yAxis = g => g
.attr("transform", `translate(${params.margin.left},0)`)
.call(d3.axisLeft(y).ticks(height/80, ","))
.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", -params.margin.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text("↑ Number of deaths"))
color = d3.scaleOrdinal(data.map(d => d.region), ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#17becf"])
radius = {
const factor = 15;
if (radius_type == 'population') {
return d3.scaleSqrt([1, max_pop], [1, width / factor])
} else if (radius_type == 'confirmed') {
return d3.scaleSqrt([1, max_confirmed], [1, width / factor])
} else {
return d3.scaleSqrt([1, max_confirmed_fraction], [1, width / factor])
}
}
y = d3.scaleLog([params.ymin, params.ymax], [height - params.margin.bottom, params.margin.top])
x = d3.scaleLog([params.xmin, params.xmax], [params.margin.left, width - params.margin.right])
width = 800;
height = 550;
params = ({
margin: ({top: 20, right: 35, bottom: 35, left: 66}),
xmin: 1,
xmax: 1e9,
ymin: 1,
ymax: 1e8,
});
startDate = d3.timeDay(new Date(2019, 11, 31))
formatDate = d3.timeFormat("%Y-%m-%d")
function country_code_to_name(country_code) {
const country_data = data.find(d => d.country_code === country_code);
return country_data.country_name;
}
function country_trajectory(country_code) {
const l = d3.line();
let countryData = dataOfCountry(country_code);
let trajectoryData = [];
for (let i = 0; i < countryData.length; i++) {
if (i < delay_parameter) {
trajectoryData.push([x(0.01), y(countryData[i].deaths)])} else {
trajectoryData.push([x(countryData[i - delay_parameter].confirmed), y(countryData[i].deaths)])
}
}
return l(trajectoryData.filter(d => d[0] > x(0.5) && d[1] < y(0.5)));
}
function dataOfCountry(country_code) {
const country_data = data.find(d => d.country_code === country_code);
return country_data['confirmed'].map(function(e, i) {
return {'country_code': country_code,
'date': new Date(e[0]),
'confirmed': d3.max([e[1], 0.01]),
'deaths': d3.max([country_data['deaths'][i][1], 0.01])};
});
}
function dataOfCountry_new(country_code) {
const country_data = data.find(d => d.country_code === country_code);
return country_data['deaths'].map(function(e, i) {
return {'country_code': country_code,
'date': new Date(e[0]),
'confirmed': dataOfCountry_confirmed_calculation(country_code)[i],
'deaths': d3.max([e[1],0.01])};
});
}
function dataOfCountry_confirmed_calculation(country_code) {
const country_data_confirmed = data.find(d => d.country_code === country_code).confirmed;
let confirmed_data = [];
for (let i = 0; i < country_data_confirmed.length; i++) {
if (i < delay_parameter) {confirmed_data.push(0.01)} else {
confirmed_data.push(country_data_confirmed[i - delay_parameter][1])
}
}
return confirmed_data;
}
function dataAt(date) {
return data.map(d => ({
country_code: d.country_code,
country: d.country_name,
population: d.population,
region: d.region,
confirmed: valueAtForConfirmed(d.confirmed, date),
deaths: valueAt(d.deaths, date),
}));
}
dataAt(today)
function valueAt(values, date) {
const i = bisectDate(values, date, 0, values.length - 1);
const a = values[i];
if (a[1] > 0) {return a[1]} else {return 0.01};
}
function valueAtForConfirmed (values, date) {
const i = bisectDate(values, date, 0, values.length - 1);
if (i < delay_parameter) {return 0.01} else {return values[i - delay_parameter][1]}
}
bisectDate = d3.bisector(([date]) => parseTime(date)).left
dateOnlyFormat = d3.timeFormat("%b %d %Y");
timeFormat = d3.timeFormat("%Y-%m-%d");
parseTime = d3.timeParse("%Y-%m-%d");
radians = 0.0174532925;
shade = `${x(1.0/0.04)},${y(1.0)} ${x(1.0/0.01)},${y(1)} ${x(params.xmax)},${y(params.xmax*0.01)} ${x(params.xmax)},${y(params.xmax*0.04)}`;
fatality_data = ([
{name: 'Smallpox (malignant)', fatality: 0.95, color: "red", x: params.ymax/0.95 /1.5},
{name: "Bubonic plague", fatality: 0.55, color: "red", x: params.ymax/0.55 /1.5},
{name: "SARS", fatality: 0.11, color: "red", x: params.xmax/2},
{name: "", fatality: 0.04, color: "black", x: params.xmax},
{name: "Spanish (1918) flu", fatality: 0.07, color: "red", x:params.xmax},
{name: "", fatality: 0.01, color: "black", x: params.xmax},
{name: "Influenza A (typical)", fatality: 0.001, color: "red", x:params.xmax},
{name: "Minimum observed (10+ deaths)", fatality: min_fatality, color: "black", x:params.xmax},
]);
min_fatality = d3.min(dataAt(new Date).filter(d => d.deaths > 10), d => (d.deaths / d.confirmed));
max_confirmed = d3.max(dataAt(new Date), d => d.confirmed);
max_confirmed_fraction = d3.max(dataAt(new Date).map( d => d.confirmed / d.population))
max_pop = d3.max(data, d => d.population);
today = all_dates[all_dates.length - 1];
all_dates = data[0]['confirmed'].map(x => parseTime(x[0]));
data = data_raw_region_null_deleted.map(function(d) {
d.confirmed_fraction = d.confirmed.map(x => [x[0], x[1] / d.population]);
return d;
})
data_raw_region_null_deleted = data_raw.filter(d => d.region !== null)
// The updated data from OWID included Continent data as country data. Need to exclude these before data processing.
data_raw = d3.json("https://raw.githubusercontent.com/covid19-data/covid19-data/master/output/cntry_stat_owid.json")
import { rangeSlider as rangeSlider } from '@mootari/range-slider'
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.