d3 = require('d3@5')
topojson = require('topojson-client@3')
us = d3.json('https://d3js.org/us-10m.v2.json')
data = topojson.feature(us, us.objects.states).features
map_data = FileAttachment("map_data.json").json()
eclipse = FileAttachment("eclipse-data.csv").csv()
{
// Create an empty SVG with 960px width and 600px height.
const svg = DOM.svg(960, 600);
const projection = d3.geoAlbersUsa().scale(1300).translate([480,300])
// Adjust here: Set the projection to be used by the geoPath
const path = d3.geoPath(projection)
// Use the path to plot the US map based on the geometry data.
const us = d3.select(svg)
.append('g')
.selectAll('path')
.data(data)
.enter()
.append('path')
.attr('d', path)
.attr('class', 'state');
const circleG = d3.select(svg)
.selectAll('g')
.data(eclipse)
.join('g')
.attr('class', 'circle-group')
.attr(
'transform',
({ lon, lat }) =>
`translate(${projection([lon, lat]).join(",")})`
);
circleG.append('circle')
.attr('stroke-opacity', 1)
.attr('stroke', 'steelblue')
.attr('opacity', 0.5)
.attr('fill', 'steelblue')
.attr('r', 10);
return svg;
}
html`
<style>
path {
fill: #fff;
stroke: #000;
}
</style>`
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.
