Public
Edited
Aug 8, 2023
projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305]);
path = d3.geoPath(projection);
svg = d3.select(DOM.svg(800, 600));
base = svg.append("g");
overlays = svg.append("g");
// Load the base GeoJSON and draw it
d3.json(baseGeojson).then((baseData) => {
base.selectAll("path")
.data(baseData.features)
.enter().append("path")
.attr("d", path)
.style("fill", "lightgray")
.style("stroke", "white");
});
// Load and draw the overlay GeoJSONs
Promise.all(overlayGeojsons.map(d3.json))
.then((overlayData) => {
overlayData.forEach((data) => {
overlays.selectAll("path")
.data(data.features)
.enter().append("path")
.attr("d", path)
.style("fill", "steelblue")
.style("stroke", "white");
});
});
svg.node();
}
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.
