chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 975, 610]);
svg.append("g")
.attr("transform", "translate(610,20)")
.append(() => legend({color, title: data.title, width: 260}));
svg.append("g")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.join("path")
.attr("class", "state")
.attr("fill", d => color(data.get(d.id)))
.attr("d", path)
.attr("stroke", "grey")
.attr("stroke-linejoin", "round")
.style("transition-duration", "2s")
.style("transform-origin", "center")
.style("transform-box", "fill-box")
.style(
"transform",
d => `scale(${Math.pow((data.get(d.id) / path.area(d)) / DenForMostCases, 1 / scaleFactor)})`
)
.append("title")
.text(d => `${d.properties.name}
${format(data.get(d.id))}`);
return svg.node();
}
data = {
let data = await d3.csv("https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv");
data = data.filter(d => d.date === selectedDate).map(({fips, cases}) => [fips, +cases]);
data = new Map(data);
data = Object.assign(data, {title: "Covid cases"});
return data
}
color = d3.scaleQuantize([0, 9000], d3.schemeBlues[9])
path = d3.geoPath()
format = d => `${d} cases`
shrink = () => {
if (shrunk) {
d3.selectAll(".state").style("transform", "scale(1)");
mutable shrunk = false;
} else {
d3.selectAll(".state")
.style(
"transform",
d => `scale(${Math.pow((data.get(d.id) / path.area(d)) / DenForMostCases, 1 / scaleFactor)})`
);
mutable shrunk = true;
}
}
DenForMostCases = {
const mapAsc = new Map([...data.entries()].sort((a, b) => b[1] - a[1]));
const maxState = mapAsc.entries().next().value[0];
const maxStateArea = path.area(topojson.feature(us, us.objects.states).features.find(d => d.id === maxState));
return Math.round(data.get(maxState) / maxStateArea * 1000) / 1000;
}
selectedDate = "2020-03-31";
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.
