Here is an example of a map of the US. We are using the Albers projection here. But there are also other options, which you can find here. In this example we load two sources, what we can do with a slightly different syntax:
Promise.all([
d3.csv('./data/mapdata.csv'),
d3.json('./data/us-states-geo.json')
])
.then(([data, geodata]) => {
// do something
}
D3 provides to needed function to project the maps, in this case we're using Albers projection and then create a path from it.
const projection = d3.geoAlbersUsa();
const path = d3.geoPath(projection);
Then we have to create the map with binding the geodata to a "path", which then is projected with the Albers projection:
maparea.selectAll("path")
.data(geodata.features)
.enter()
.append("path")
.attr("d", path)
And the last thing we are doing here, is to bind the second dataset to the created paths (countries) and change the lightness according to the number of letters in the name. Herefore we are using the HSL-colorspace, which makes it easy to change the brightness:
maparea.selectAll("path")
.data(data)
.attr("fill", d => {
return d3.hsl(222, 0.7, d.State.length / 20)
})