Public
Edited
Jan 2, 2023
Insert cell
Insert cell
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 975, 610]);

svg.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("stroke-linejoin", "round")
.attr("d", path);
svg.append("path")
.datum(topojson.feature(us, us.objects.nation))
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("stroke-linejoin", "round")
.attr("d", path);
svg.append("g")
.selectAll("path")
.data(topojson.feature(cbsa, cbsa.objects.cb_2018_us_cbsa_5m).features)
.join("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", '0.5px')
.attr("d", path)
.append("title")
.text(d => String(d.properties.NAME));

return svg.node();
}
Insert cell
cbsa = FileAttachment("cb_2018_us_cbsa_5m.json").json()
Insert cell
counties = FileAttachment('cb_2018_us_county_5m.json').json()
Insert cell
path = d3.geoPath().projection(d3.geoAlbers().translate([487.5, 305]))
Insert cell
us = FileAttachment("counties-10m.json").json()
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more