projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305])
map = html`<svg viewBox="0 0 975 610">
<path fill="#ddd" d="${path(topojson.feature(us, us.objects.nation))}"></path>
<path fill="none" stroke="#fff" stroke-linejoin="round" stroke-linecap="round" d="${path(topojson.mesh(us, us.objects.states, (a, b) => a !== b))}"></path>
<g text-anchor="middle" font-family="sans-serif" font-size="10">${data.map(({name, description, longitude, latitude}) => svg`
<g transform="translate(${projection([longitude, latitude]).join(",")})">
<circle r="2"></circle>
<text y="-6">${description}</text>
</g>`)}
</g>
</svg>`
path = d3.geoPath()
data = d3.csvParse(await FileAttachment("us-state-capitals.csv").text(), d3.autoType)
us = FileAttachment("states-albers-10m.json").json()
topojson = require("topojson-client@3")
d3 = require("d3@6")
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.
