Public
Edited
Jan 5, 2024
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 975, 610]);
// Legend.
svg.append("g")
.attr("transform", "translate(610,20)")
.append(() => legend({color, title: "Cumulative deaths per million", width: 260}));
// Color states.
svg.append("g")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.join("path")
.attr("fill", d => color(currentData.has(d.properties.name) ? currentData.get(d.properties.name) : 0))
.attr("d", path)
.append("title")
.text(d => `${d.properties.name}
${d3.format(".1f")(currentData.has(d.properties.name) ? currentData.get(d.properties.name) : 0)}`);
// Draw state boundaries.
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", path);
return svg.node();
}
color = d3.scaleSequentialPow()
.exponent(0.5)
.domain([0, maxDeathsPerMillion])
.interpolator(d3.interpolatePlasma)
covid19raw = d3.csvParse(
await FileAttachment("Deaths per million - States (COVID Tracking Project).csv").text(),
function(d) {
return {
yyyymmdd: d["YYYY-MM-DD"],
state: d.State,
deathsPerMillion: +d["Deaths per million"]
}
}
)
// A nested d3.map() with
// YYYYMMDD => {
// State => Deaths per million
// }
deathsPerMillion = d3.nest()
.key(d => d.yyyymmdd)
.key(d => d.state)
.rollup(v => d3.sum(v, d => d.deathsPerMillion))
.map(covid19raw)
currentData = deathsPerMillion.get(date)
maxDeathsPerMillion = d3.max(covid19raw, row => row.deathsPerMillion)
yyyymmdds = deathsPerMillion.keys().filter(s => s.match(/[0-9][0-9][0-9][0-9]-[0-9][0-9]-[0-9][0-9]/)).sort()
path = d3.geoPath()
us = FileAttachment("states-albers-10m.json").json()
topojson = require("topojson-client@3")
d3 = require("d3@5")
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.
