Public
Edited
Jul 18, 2023
Fork of U.S. Map
358 forks
10 stars
Insert cell
Insert cell
map = htl.html`<svg viewBox="0 0 975 610">
<g fill="none" stroke="#000" stroke-linejoin="round" stroke-linecap="round">
<path stroke="#aaa" stroke-width="0.5" d="${path(counties)}"></path>
<path stroke-width="0.5" d="${path(states)}"></path>
<path d="${path(nation)}"></path>
</g>
</svg>`
Insert cell
path = d3.geoPath()
Insert cell
states = topojson.mesh(us, us.objects.states, (a, b) => a !== b)
Insert cell
nation = topojson.feature(us, us.objects.nation)
Insert cell
counties = topojson.mesh(us, us.objects.counties, (a, b) => a !== b && (a.id / 1000 | 0) === (b.id / 1000 | 0))
Insert cell
us = FileAttachment("counties-albers-10m.json").json() // Already projected to Albers-USA!
Insert cell
d3 = require("d3-geo@3")
Insert cell
Insert cell
projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305])
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