US administrative regions using layer=regions filtered to a single country. The regions layer covers first-level administrative divisions worldwide — states, departments, provinces, voivodeships — filtered here to the US with filter=US.
https://api.mapjson.com/v1/geo?layer=regions&filter=US&detail=medium
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/topojson-client@3/dist/topojson-client.min.js"></script>
<style>
svg { width: 100%; display: block; }
#tooltip {
position: fixed; background: #000; color: #fff;
font-size: 12px; padding: 4px 8px; pointer-events: none; opacity: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="tooltip"></div>
<script>
const width = 960, height = 580;
const svg = d3.select("#map").append("svg").attr("viewBox", `0 0 ${width} ${height}`);
const tooltip = d3.select("#tooltip");
const url = "https://api.mapjson.com/v1/geo?layer=regions&filter=US&detail=medium";
d3.json(url).then(topo => {
const states = topojson.feature(topo, topo.objects.geo);
const projection = d3.geoAlbersUsa().fitSize([width, height], states);
const path = d3.geoPath().projection(projection);
svg.append("g")
.selectAll("path")
.data(states.features)
.join("path")
.attr("d", path)
.attr("fill", "#d9d0be")
.attr("stroke", "#fff")
.attr("stroke-width", 0.75)
.style("cursor", "pointer")
.on("mouseover", function(event, d) {
d3.select(this).attr("fill", "#c4b89e");
tooltip.style("opacity", 1).text(d.properties.name || "");
})
.on("mousemove", function(event) {
tooltip.style("left", event.clientX + 12 + "px").style("top", event.clientY - 8 + "px");
})
.on("mouseout", function() {
d3.select(this).attr("fill", "#d9d0be");
tooltip.style("opacity", 0);
});
svg.append("path")
.datum(topojson.mesh(topo, topo.objects.geo, (a, b) => a !== b))
.attr("d", path)
.attr("fill", "none")
.attr("stroke", "#b8a98a")
.attr("stroke-width", 0.5);
});
</script>
</body>
</html>