The Caribbean is one of the most politically fragmented regions on earth — a mix of independent nations and overseas territories of France, the Netherlands, the UK, and the US. At medium detail, each territory appears as its own polygon with its correct ISO 3166-1 code. Hover to see names.
https://api.mapjson.com/v1/geo?filter=north-america&detail=medium&properties=name
<!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; background: #7ab4cc; }
#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 = 560;
const svg = d3.select("#map").append("svg").attr("viewBox", `0 0 ${width} ${height}`);
const tooltip = d3.select("#tooltip");
const projection = d3.geoMercator().center([-72, 17]).scale(2000).translate([width / 2, height / 2]);
const path = d3.geoPath().projection(projection);
const url = "https://api.mapjson.com/v1/geo?filter=north-america&detail=medium&properties=name";
d3.json(url).then(topo => {
svg.append("g")
.selectAll("path")
.data(topojson.feature(topo, topo.objects.geo).features)
.join("path")
.attr("d", path)
.attr("fill", "#d9d0be")
.attr("stroke", "#fff")
.attr("stroke-width", 0.6)
.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);
});
});
</script>
</body>
</html>