Published
Edited
Jul 19, 2021
10 forks
Importers
38 stars
Try to impeach this? Challenge accepted!Observable & creative codingBar Chart Race, COVID-19 outbreak Worldwide to 24th March 2020COVID-19 Curves (U.S.)Historical Illinois COVID-19 ZIP code dataCoronavirus worldwide evolutionElectoral College Decision TreeMost favorited Hacker News posts of all time
COVID-19 Confirmed vs. New cases
md`A recreation of the visualization by [Aatish Bhatia](https://aatishb.com/covidtrends/) & [minutephysics](https://www.youtube.com/watch?v=54XLXg4fYsc).
- Data: https://github.com/covid19-data/covid19-data`
md`## Visualization`
viewof yTypeT = radio({
title: 'Show',
options: [
{label: "Confirmed cases", value: 'confirmed' },
{label: "Deaths", value: 'deaths'}
],
value: 'confirmed'
});
viewof selectedRegionsT = checkbox({
title: "World regions",
options: ["Europe & Central Asia", "North America", "US States", "East Asia & Pacific", "South Asia", "Sub-Saharan Africa", "Middle East & North Africa", "Latin America & Caribbean"],
value: ["Europe & Central Asia", "East Asia & Pacific", "North America", 'South Asia'],
})
viewof timeSliderT = rangeSlider({
min: 0,
max: d3.timeDay.count(startDate, all_dates[all_dates.length - 1]),
step: 1,
format: date => formatDate(d3.timeDay.offset(startDate, date)),
title: 'Adjust the date range as you need.'
})
viewof labelMyCountry = select({
title: "Label your country or area",
description: "You need to first make sure that the region your country / area resides is checked above.",
options: countryNameList,
value: "United States",
})
viewof playSpeedT = {
const phrases = [
'Very slow.',
'Slow.',
'Medium.',
'Fast.',
'Very fast.',
];
const s = slider({
value: 3, min: 0, max: 4, step: 1,
display: v => phrases[v],
title: 'Adjust the play speed',
});
s.input.style.width = "50%";
return s;
}
currDateT
viewof currDateT = Scrubber(d3.timeDays(d3.timeDay.offset(startDate, timeSliderT[0]), d3.timeDay.offset(startDate, timeSliderT[1] + 1)), {
autoplay: true,
loop: false,
alternate: false,
initial: 0,
format: date => date.toLocaleString("ko-KO", {year: "numeric", month: "numeric", day: "numeric"}),
delay: 500 - playSpeedT * 100,
})
Tchart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, params.width, params.height]);
draw_axes(svg);
draw_trajectories(svg);
draw_date(svg);
svg.append("text").attr("id", "fullname");
return svg.node();
}
Tswatch = swatches({
color: color
});
function onMouseOver(selected) {
const country_code = d3.select(this).attr("class");
d3.selectAll(`.${country_code}`).attr("fill-opacity", 1).attr("stroke-opacity", 1).attr("stroke-width", 3)
.attr("r", 5);
//d3.selectAll(`.${countryHighlightCode}`).attr("fill-opacity", 1).attr("stroke-opacity", 1).attr("stroke-width", 3).attr("r", 5);
//const country_circle = d3.select(`circle.${country_code}`);
//const label_x = country_circle.attr("cx");
//const label_y = country_circle.attr("cy");
d3.select("#fullname").text(code_to_name(country_code))
.style("text-anchor", "start")
.attr("font-size", 50).attr("fill-opacity", 0.1).attr("fill", "black")
.attr("font-style", "bold")
.attr("font-family", "Helvetica, sans-serif")
.attr("x", x(15)).attr("y", y(1e5));
}
function onMouseOut() {
const country_code = d3.select(this).attr("class");
d3.selectAll(`.${country_code}`)
.attr("fill-opacity", params.opac_weak).attr("stroke-opacity", params.opac_weak).attr("stroke-width", 1)
.attr("r", 3);
d3.select("#fullname").attr("fill-opacity", 0);
}
function draw_date(svg) {
svg.append("g") // Date
.append("text").text(d3.timeFormat("%b %d %Y")(currDateT))
.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(params.ymin));
}
function draw_axes(svg) {
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
svg.append("g").call(grid);
}
function draw_trajectories(svg) {
svg.append("g").selectAll("path").data(viz_data).join("path")
.attr("class", d => `${d.country_code}`)
.attr("stroke", d => color(d.region)).attr("fill", "none")
.attr("stroke-opacity", params.opac_weak)
.attr("d", d => get_path(d[yTypeT]))
.on("mouseover", onMouseOver).on("mouseout", onMouseOut);
svg.append("g").selectAll("circle").data(viz_data).join("circle")
.attr("class", d => `${d.country_code}`)
.attr("fill", d => color(d.region)).attr("fill-opacity", params.opac_weak)
.attr("cx", d => x(d[yTypeT][d[yTypeT].length-1][1]))
.attr("cy", d => y(d[yTypeT][d[yTypeT].length-1][2]))
.attr("r", 3)
.on("mouseover", onMouseOver).on("mouseout", onMouseOut);
const countries_to_label = ['USA', 'ITA','CHN', 'KOR', 'IRN', 'SGP', 'GBR',
'JPN', "CA", "NY", "NJ", "IN", 'ESP', 'IND', 'FRA',
'RUS', 'MEX', 'BRA', 'CAN', 'IRN', 'TUR',
'KAZ', 'NLD', 'PAK', 'PHL', 'FIN', 'AUS', 'MMR', 'THA',
name_to_code(labelMyCountry),
]
svg.append("g").selectAll("text")
.data(viz_data.filter(d => countries_to_label.includes(d.country_code))).join("text")
.text(d => d.country_name)
.attr("class", d => d.country_code)
.attr("fill", d => color(d.region)).attr("fill-opacity", params.opac_weak)
.attr("x", d => x(d[yTypeT][d[yTypeT].length-1][1]))
.attr("y",d => y(d[yTypeT][d[yTypeT].length-1][2]))
.on("mouseover", onMouseOver).on("mouseout", onMouseOut);
}
function get_path(d) {
const l = d3.line();
return l( d.filter(d => (d[1] > 10 && d[2] > 10)).map(d => [x(d[1]), y(d[2])]))
}
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", params.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", params.width - params.margin.right));
yAxis = g => g
.attr("transform", `translate(${params.margin.left},0)`)
.call(d3.axisLeft(y).ticks(params.height/90, ","))
.call(g => g.append("text")
.attr("font-size", 16)
.attr("x", -params.margin.left)
.attr("y", params.margin.top - 14)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text(`↑ New ${yTypeT} (past week)`))
y = d3.scaleLog([params.ymin, params.ymax], [params.height - params.margin.bottom, params.margin.top])
xAxis = g => g
.attr("transform", `translate(0,${params.height - params.margin.bottom})`)
.call(d3.axisBottom(x).ticks(params.width / 80, ","))
.call(g => g.append("text")
.attr("font-size", 15)
.attr("x", params.width)
.attr("y", params.margin.bottom - 4)
.attr("fill", "currentColor")
.attr("text-anchor", "end")
.text(`Total ${yTypeT} →`))
x = d3.scaleLog([params.xmin, params.xmax], [params.margin.left, params.width - params.margin.right])
color = d3.scaleOrdinal(cntry_data.filter(d => d.country_code != 'OWID_WRL').concat(us_state_data).map(d => d.region), ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#17becf"])
// "#17becf", "#00cc66", '#ff3300', '#ff0066', 'black', "#8c564b", "#9467bd", 'brown'
//#d627728, #ff0066, #ff7f0e
params = ({
width: 800,
height: 500,
opac_weak: 0.5,
margin: ({top: 25, right: 35, bottom: 35, left: 60}),
xmin: 10,
xmax: 1e8,
ymin: 10,
ymax: 1e7,
});
startDate = d3.timeDay(new Date(2020, 0, 22))
endDate = all_dates[all_dates.length - 1]
formatDate = d3.timeFormat("%Y-%m-%d")
function code_to_name(country_code) {
return data.find(d => d.country_code === country_code).country_name;
}
function name_to_code(country_name) {
return data.find(d => d.country_name === country_name).country_code;
}
parseTime = d3.timeParse("%Y-%m-%d");
all_dates = data[0]['confirmed'].map(x => parseTime(x[0]));
viz_data = data.map(function(d) {
return {
'country_code': d.country_code,
'country_name': d.country_name,
'population': d.population,
'region': d.region,
'confirmed': d.confirmed.filter(d => new Date(d[0]) < currDateT),
'deaths': d.deaths.filter(d => new Date(d[0]) < currDateT),
}
})
last_index = data[0].confirmed.length - 1
countryNameList = {
let list = [];
for (let i = 0; i < data.length; i++) {
list.push(data[i].country_name)
}
return list;
}
data = cntry_data.concat(us_state_data).filter(d => selectedRegionsT.includes(d.region)).map(d => {
d.confirmed = add_past_week_number(d.confirmed);
d.deaths = add_past_week_number(d.deaths);
return d;
})
function add_past_week_number(a) {
var new_array = [[a[0][0], a[0][1], a[0][1]]];
var curr_sum = 0;
var min_idx = 0;
for (var i = 1; i < a.length; i++) {
min_idx = d3.max([0, i-7]);
if (min_idx != 0) {
curr_sum = a[i][1] - a[min_idx][1];
} else {
curr_sum = a[i][1];
}
new_array.push([ a[i][0], a[i][1], curr_sum ])
}
return new_array;
}
function ts_diff(a) {
var new_array = [];
new_array.push([a[0][0], a[0][1]]);
for (var i = 1; i < a.length; i++) new_array.push([ a[i][0], a[i][1] - a[i-1][1] ])
return new_array;
}
us_state_data = us_state_data_raw.map(d => ({
'country_code': d.code,
'country_name': d.name,
'region': "US States",
'confirmed': d.confirmed,
'deaths': d.deaths,
}))
us_state_data_raw = d3.json("https://raw.githubusercontent.com/covid19-data/covid19-data/master/output/us_state_nyt.json")
cntry_data = cntry_data_raw.filter(d => d.region !== null)
cntry_data_raw = d3.json("https://raw.githubusercontent.com/covid19-data/covid19-data/master/output/cntry_stat_owid.json")
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.