<svg width="1000" height="500"></svg>
map = d3.select(mapContainer)
world = FileAttachment("world-110m.geo.json").json()
projection = d3.geoMercator() // just the standard, common, Mercator projection
pathGenerator = d3.geoPath().projection(projection); // to create SVG paths from the points of the GIS features
drawMap = {
let mapLayer = map.append("g").attr("id","countries")
.selectAll("path")
.data(world.features)
.join("path")
.attr("d", pathGenerator)
.attr("id", d => d["id"]);
return mapLayer;
}
<style>
#countries path {fill: #eeeeee; stroke: #ccc}
</style>
Pretty simple and basic d3 code, with the usual d3 select, data, join, attributes routine.
If you're only doing one, then this isn't bad. If you're doing many, and then want more control over them, then a reusable library helps.
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.
