Public
Edited
May 6
Importers
{
const svg = d3.select(DOM.svg(width, height));
svg
.append("g")
.attr("class", "states")
.selectAll(".state")
.data(state.features)
.join("path")
.attr("class", "state")
.attr("fill", "none")
.attr("stroke", "blue")
.attr("data-geo-code", (d) => d.properties.GEOID)
.attr("data-geo-name", (d) => d.properties.NAME)
.attr("stroke-linejoin", "round")
.attr("d", path);
svg
.append("g")
.attr("class", "divisions")
.selectAll(".division")
.data(division.features)
.join("path")
.attr("class", "division")
.attr("fill", "none")
.attr("stroke", "green")
.attr("stroke-width", 2)
.attr("stroke-linejoin", "round")
.attr("data-geo-code", (d) => d.properties.GEOID)
.attr("data-geo-name", (d) => d.properties.NAME)
.attr("d", path);
svg
.append("g")
.attr("class", "regions")
.selectAll(".region")
.data(region.features)
.join("path")
.attr("class", "region")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 3)
.attr("stroke-linejoin", "round")
.attr("data-geo-code", (d) => d.properties.GEOID)
.attr("data-geo-name", (d) => d.properties.NAME)
.attr("d", path);
return svg.node();
}
usMapExport = ({
viewBox,
region: regionJSON,
division: divisionJSON,
state: stateJSON
})
regionJSON = region.features.map(makeSummaryObject)
divisionJSON = division.features.map(makeSummaryObject)
stateJSON = state.features.map(makeSummaryObject)
function makeSummaryObject(d) {
return {
d: path(d),
geoid: d.properties.GEOID,
name: d.properties.NAME
};
}
viewBox = [0, 0, 960, 610]
width = 960
height = 610
projection = d3.geoAlbersUsa().fitSize([width, height], region)
path = d3.geoPath().projection(projection)
import { rewind } from "@john-guerra/d3-black-box-map"
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.
