Weekly COVID deaths, USA
covidBloody = {
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("text")
.attr("x", width / 2)
.attr("y", 60)
.attr("font-size", 40)
// .attr("font-weight", 700)
.attr("text-anchor", "middle")
.text("Weekly COVID Deaths");
svg
.selectAll("rect")
.data(weeklyData)
.enter()
.append("rect")
.attr("fill", "#C5161D")
.attr("width", xBand.bandwidth() + 1)
.attr("height", 0)
// .attr("height", (d) => y(d.sum) - margin.top)
.attr("x", (d, i) => xBand(i))
.attr("y", margin.top)
.transition()
.duration((d, i) => 3000 + Math.random() * 1500)
.attr("height", (d) => y(d.sum) - margin.top);
var fontSizeLabel = Math.floor(width / 58);
svg
.append("text")
.attr("x", x(new Date(2021, 0, 15)))
.attr("y", y(2000))
.attr("font-size", fontSizeLabel)
.attr("font-family", "sans-serif")
.attr("fill", "white")
.attr("text-anchor", "middle")
.attr("opacity", 0.75)
.text("TOTAL");
svg
.append("text")
.attr("x", x(new Date(2021, 0, 15)))
.attr("y", y(2000) + fontSizeLabel * 1.25)
.attr("font-size", Math.floor(width / 58))
.attr("font-family", "sans-serif")
.attr("fill", "white")
.attr("text-anchor", "middle")
.attr("opacity", 0.75)
.text("DEATHS");
var countTextNumber = svg
.append("text")
.attr("x", x(new Date(2021, 0, 15)))
.attr("y", y(2000) + fontSizeLabel * 3)
.attr("font-size", Math.floor(width / 35))
.attr("fill", "white")
.attr("text-anchor", "middle")
.text(d3.format(",")(total));
return svg.node();
}
total = d3.sum(weeklyData, (d) => d.sum)
grid = (g) =>
g
.attr("stroke", "currentColor")
.attr("stroke-opacity", 0.1)
.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", margin.left)
.attr("x2", width - margin.right)
)
xAxis = (g) =>
g
.attr("transform", `translate(0,${margin.top})`)
.call(
d3
.axisTop(x)
.ticks(width / 80)
.tickSizeOuter(0)
.tickFormat(d3.timeFormat("%b"))
)
.call((g) => g.select(".domain").attr("stroke-width", 1))
.call((g) => g.select(".tick").attr("stroke-width", 1))
yAxis = (g) =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call((g) => g.select(".domain").remove())
.call(
(g) => g.selectAll(".tick").attr("font-size", 12).attr("stroke-width", 1)
)
xBand = d3
.scaleBand()
.domain(d3.range(weeklyData.length))
.range([margin.left, width - margin.right])
.padding(0)
x = d3
.scaleUtc()
.domain(d3.extent(data, (d) => d.date))
.range([margin.left, width - margin.right])
y(0)
margin.top
y = d3
.scaleLinear()
.domain([0, d3.max(weeklyData, (d) => d.sum)])
.nice()
.range([margin.top, height - margin.bottom])
margin = ({ top: 100, right: 30, bottom: 30, left: 80 })
height = 700
weeklyData = {
let retval = [];
var sum = 0;
var week = null;
var lastdeaths = 0;
for (var i = 0; i < data.length; i++) {
let week_nr = getWeek(data[i].date);
if (!week) week = week_nr;
if (week_nr != week) {
retval.push({
week: week,
sum: sum,
year: data[i].date.getFullYear()
});
sum = 0;
week = week_nr;
}
sum += data[i].deaths - lastdeaths;
lastdeaths = data[i].deaths;
}
return retval;
}
data = d3.csvParse(await FileAttachment("us@2.csv").text(), d3.autoType)
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.
