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, tickFormat: '.0s' })
);
svg
.append("g")
.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.join("path")
.attr("fill", d => color(data.get(d.id) || 0))
.attr("d", path)
.append("title")
.text(
d =>
`${
nyc.includes(d.id)
? 'New York City'
: `${d.properties.name}, ${states.get(d.id.slice(0, 2)).name}`
}\n${format(data.get(d.id) || 0)}`
);
svg
.append("path")
.datum(topojson.mesh(us, us.objects.states))
.attr("fill", "none")
.attr("stroke", "#ccc")
.attr("stroke-linejoin", "round")
.attr("d", path);
return svg.node();
}
nyc = ["36005", "36061", "36081", "36047", "36085"]
data = Object.assign(
new Map(
rawData[rawData.length - 1].flatMap(d =>
d.fips ? [[d.fips, +d.cases]] : nyc.map(fips => [fips, +d.cases])
)
),
{ title: "COVID-19 Cases" }
)
color = d3
.scaleSequentialPow([0, d3.max([...data.values()])], d3.interpolateReds)
.exponent(0.25)
path = d3.geoPath()
format = d3.format(',')
states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))
us = FileAttachment("counties-albers-10m.json").json()
topojson = require("topojson-client@3")
d3 = require("d3@5")
import {legend} from "@d3/color-legend"
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.
