Principal Web Developer at Freedom of the Press Foundation
Published
Edited
Oct 13, 2021
1 fork
Importers
21 stars
usAlbers = (await fetch('https://cdn.jsdelivr.net/npm/us-atlas@3/counties-albers-10m.json')).json()
projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305])
nationFeature = topojson.feature(usAlbers, usAlbers.objects.nation)
statesMesh = topojson.mesh(usAlbers, usAlbers.objects.states, (a, b) => a !== b)
Plot.plot({
y: { reverse: true, ticks: 0 },
x: { ticks: 0 },
r: { type: 'linear', domain: [0, 10], range: [0, 20] },
marginTop: 0,
marginLeft: 0,
marginRight: 0,
marginBottom: 0,
marks: [
// U.S. Outline
nationFeature.features[0].geometry.coordinates.map(
c => c.map(c2 => Plot.line(c2, { fill: '#CCC' }))
),
// State Outlines
statesMesh.coordinates.map(c => Plot.line(c, { stroke: '#FFF' })),
// Earthquake dots
Plot.dot(earthquakes.features.filter(d => projection(d.geometry.coordinates) !== null), {
x: d => projection(d.geometry.coordinates)[0],
y: d => projection(d.geometry.coordinates)[1],
r: d => d.properties.mag,
fill: 'rgba(0,150, 200, 0.25)',
})
]
})
topojson = require("topojson-client@3")
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.
