D3 Examples - d3-geomap label example for stackoverflow.com/questions/58520822

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="https://d3-geomap.github.io/d3-geomap/d3-geomap.css" rel="stylesheet">
        <style>
            .place-label {
                fill: #000;
            }
        </style>
    </head>
    <body>
        <div class="d3-geomap" id="map" style="width: 960px;"></div>
    </body>
    <script src="//unpkg.com/d3@5.9.2/dist/d3.min.js"></script>
    <script src="//unpkg.com/topojson@3.0.2/dist/topojson.min.js"></script>
    <script src="https://d3-geomap.github.io/d3-geomap/d3-geomap.min.js"></script>
    <script>
    let selector='#map',
        svg = d3.select(selector),
        bbox=d3.select(selector).node().getBoundingClientRect(),
        width=bbox.width,
        height=0.4*bbox.width,
        scale=[width],
        tr=[width/2+200,height/2+650];
​
    var format = function(d) {
        return d3.format(',.0f')(d);
    }
​
    var map = d3.choropleth()
        .geofile('https://d3-geomap.github.io/d3-geomap/topojson/countries/ESP.json')
        .projection(d3.geoMercator)
        .column('num')
        .unitId('name')
        .colors(d3.schemeYlOrRd[9])
        .legend(true)
        .format(format)
        .width(width)
        .height(height)
        .scale(scale)
        .translate(tr)
        .postUpdate(drawLabels);
​
    function drawLabels() {
        map.svg.append("g").attr('class', 'zoom')
            .selectAll("text")
            .data(topojson.feature(map.geo, map.geo.objects.units).features)
            .enter().append("text")
            .attr("class", "place-label")
            .attr("x", function(d) { return map.path.centroid(d)[0]; })
            .attr("y", function(d) { return map.path.centroid(d)[1]; })
            .attr("text-anchor","middle")
            .text(function(d) { return d.properties.name; })
            .on('click', map.clicked.bind(map));
    }
​
    d3.csv('muertos_gusen_mauthausen.csv').then(data => {
        map.draw(svg.datum(data));
    });
​
  </script>
</html>
    