Published
Edited
Apr 15, 2020
1 star
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const opacity_weak = 0.15;
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
svg.append("g").call(grid);
function onMouseOver(selected) {
const country_code = d3.select(this).attr("class");
d3.selectAll(`.${country_code}`).attr("fill-opacity", 1).attr("stroke-opacity", 1);
}
function onMouseOut() {
const country_code = d3.select(this).attr("class");
d3.selectAll(`.${country_code}`).attr("fill-opacity", opacity_weak).attr("stroke-opacity", opacity_weak);
d3.selectAll(`text.${country_code}`).attr("fill-opacity", 0).attr("stroke-opacity", 0);
}
const country_codes = data.filter(d => d.deaths[d.deaths.length-1][1] > 5)
.map(d => d.country_code); //['USA', 'CHN', 'ITA', 'ESP'];
country_codes.forEach(function(country_code) {
svg.append("text").attr("class", `${country_code}`)
.text(data_by_country[country_code].country_name)
.attr("x", x(new Date()) - 5)
.attr("y", y(data_by_country[country_code][y_type][data_by_country["USA"][y_type].length - 1][1]) )
.style("text-anchor", "end")
.attr("font-size", 14)
.attr("fill", color(data_by_country[country_code].region))
.attr("fill-opacity", 0)
.on("mouseover", onMouseOver)
.on("mouseout", onMouseOut);
svg.append("g")
.append("circle").attr("class", `${country_code}`)
.attr("fill", d => color(code_to_region(country_code)))
.attr("fill-opacity", opacity_weak)
.attr("cx", x(new Date(last_date))).attr("cy", d => y(total_confirmed(country_code))).attr("r", 2);
svg.append("g")
.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", opacity_weak)
.attr("d", d => country_trajectory(d.country_code));
/*svg.append("g").append("path")
.attr("class", `${country_code}`)
.attr("stroke", "grey")
.attr("stroke-opacity", opacity_weak)
.attr("stroke-dasharray", 4)
.attr("d", d3.line()(
linearRegressor(
data_for_fit(country_code, y_type)
)));*/
});
return svg.node();
}
data.filter(d => d.deaths[d.deaths.length-1][1] > 2 )
function draw_trend(g, country_code) {
}
grid = g => g
.attr("stroke", "black")
.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));
function country_trajectory(country_code) {
const l = d3.line();
return l(dataOfCountry(country_code).filter(d => d[y_type] > 0.5).map(d => [x(d.date), y(d[y_type])]));
}
function dataOfCountry(country_code) {
const country_data = data.find(d => d.country_code === country_code);
return country_data['confirmed'].map(function(e, i) {
return {'date': new Date(e[0]),
'confirmed': d3.max([e[1], 0.01]),
'deaths': d3.max([country_data['deaths'][i][1], 0.01])};
});
}
d3.line()(exponentialRegression(data_for_fit("USA", "confirmed")).map(d => [xoff(d[0]), y(d[1])]))
exponentialRegression = d3.regressionExp()
.x(d => d3.timeDay.count(params.xmin, new Date(d[0])))
.y(d => d[1])
.domain([0, d3.timeDay.count(params.xmin, params.xmax)]);
linearRegressor = d3.regressionLinear()
.x(d => d[0])
.y(d => d[1])
.domain([x(new Date('2020-03-16')), x(new Date('2020-03-23'))]);
function code_to_name(country_code) {
return data.find(d => d.country_code === country_code).country_name;
}
data_by_country = data.reduce(function(map, obj) {
map[obj.country_code] = obj;
return map;
}, {});
total_confirmed('USA')
total_confirmed = function(country_code) {
const cntry_data = data_by_country[country_code];
return cntry_data['confirmed'][cntry_data['confirmed'].length - 1][1];
}
last_date = data[0]['confirmed'][data[0]['confirmed'].length - 1][0];
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
