D3 Examples - d3 v4 Map with centered labels

xxxxxxxxxx
 
<html>
  <head>
    <style>
​
      body {
        margin: 0;
        font-family: "Helvetica Neue", sans-serif;
      }
​
      .subunit {
        fill: #ddd;
        stroke: #fff;
        stroke-width: 1px;
      }
      .subunit-boundary {
        fill: none;
        stroke: #3a403d;
      }
​
      .place-label {
        font-size: .7em;
        text-shadow: 0px 0px 2px #fff;
      }
      
      .subunit-label {
          fill: #666;
          
          font-size: 15px;
          font-weight: 700;
          text-anchor: middle;
          background:white;
          border-radius:3px;
          
        }
      #legend {
        position:absolute;
        top:0;
        right:0px
      }
​
    </style>
        <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="//d3js.org/queue.v1.min.js"></script>    
      <script src="https://d3-legend.susielu.com/d3-legend.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
    
  </head>
  <body>
    
    <div id="map-viz"> </div>
​
    <script>                  
  
        var color = d3.scaleThreshold()
        .domain([1, 2, 3, 4, 5])
        .range(["#f2f0f7", "#dadaeb", "#bcbddc", "#9e9ac8", "#756bb1", "#54278f"]);  
    var width = window.innerWidth, height = window.innerHeight;
    var projection = d3.geoMercator();
    var path = d3.geoPath()
          .projection(projection)
          .pointRadius(2);
    var svg = d3.select("#map-viz").append("svg")
          .attr("width", width)
          .attr("height", height);
    var g = svg.append("g");
      
      
      queue()
            .defer(d3.json, "liberia.json")
            .defer(d3.json, "data.json")
            .await(ready);
      
      
      
      function ready(error, topojson, scores) {
                if (error) throw error;
                var boundary = centerZoom(topojson);
         drawSubUnits(topojson, scores);
         }
         
      
      function centerZoom(data){
        var o = topojson.mesh(data, data.objects.collection, 
                              function(a, b) { return a === b; });
        projection
            .scale(1)
            .translate([0, 0]);
        var b = path.bounds(o),
            s = 1 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
            t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
        projection
            .scale(s)
            .translate(t);            
        return o;
      }
​
      
    function drawOuterBoundary(data, boundary){
        g.append("path")
            .datum(boundary)
            .attr("d", path)
            .attr("class", "subunit-boundary");
     }
​
      
​
    function drawSubUnits(data,scores){
        
        var scoreByName = {};
​
            scores.forEach(function(d) { scoreByName[d.name] = +d.value; });
                
        g.selectAll(".subunit")
            .data(topojson.feature(data, data.objects.collection).features)
          .enter().append("path")
            .attr("id",function(d) { return d.properties.NAME_1; })
            .attr("class",  function(d) { return 'subunit '+ d.properties.NAME_1; })
            .attr("d", path)
            .style("fill", function(d) { return color(scoreByName[d.properties.NAME_1]); })
             .style("opacity", 0.8);
        
        g.selectAll(".subunit-bg")
           .data(topojson.feature(data, data.objects.collection).features)
          .enter().append("rect")
           .attr("rx", 3)
           .attr("ry", 3)
           .attr("x", -15)
           .attr("y", -23)
           .attr("width", 30)
           .attr("height", 25)
           .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
           .attr("dx", function (d) { return d.properties.dx || "0"; })
           .attr("dy", function (d) { return d.properties.dy || "0.35em"; })
           .style("fill", 'white')
           .attr('opacity', '0.8')
           //.attr('stroke', '#000')
           //.attr('stroke-width', '1')
           //.attr('shape-rendering','crispEdges')
            ;  
            
        g.selectAll(".subunit-label")
          .data(topojson.feature(data, data.objects.collection).features)
          .enter().append("text")
          .attr("class", function(d) { return "subunit-label " + d.id; })
          .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
          .attr("dx", function (d) { return d.properties.dx || "0"; })
          .attr("dy", function (d) { return d.properties.dy || "-0.35em"; })
          .text(function(d) { return scoreByName[d.properties.NAME_1]; }); 
      }
​
        // Create legend
        
        var legend = d3.legendColor()
                .labelFormat(d3.format(",.0f"))
                .cells(10)
                .scale(color);
    
        var div = d3.select("body").append("div")
                .attr("id", "legend");        
        
        var svg = div.append("svg");
    
        svg.append("g")
                .attr("class", "legendQuant")
                .attr("transform", "translate(20,20)");
    
        svg.select(".legendQuant")
                .call(legend);
      
        </script>
  </body>  
</html>
​
    