D3 Examples - Center and Scale your map

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="//d3js.org/d3.v4.js" charset="utf-8"></script>
    <script src="//d3js.org/topojson.v1.js"></script>
    <style>
        path {
            stroke-linejoin: round;
        }
        .city {
            fill: rgb(240, 240, 240);
            stroke: rgb(0, 0, 0);
            stroke-width: .2;
        }
        svg {
            background-color: #D0E4E7
        }
        .land {
            fill: rgb(245, 245, 245);
        }
        .coast {
            fill: none;
            stroke: #76aeb6;
            stroke-width: 1.5;
        }
    </style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>
      d3.queue()
          .defer(d3.json, 'map.json')
          .await(function(error, map) {
              if(error) throw error;
              
              var svg = d3.select("svg"),
                  width = +svg.attr("width"),
                  height = +svg.attr("height");
              
              var topology = topojson.feature(map, map.objects.coruna),
                  coast = topojson.feature(map, map.objects.border)
​
              var projection = d3.geoMercator()
                   .translate([width / 2, height / 2]);
​
              var path = d3.geoPath()
                  .projection(projection)
​
              var bounds = d3.geoBounds(topology),
                  center = d3.geoCentroid(topology);
​
              // Compute the angular distance between bound corners
              var distance = d3.geoDistance(bounds[0], bounds[1]),
                  scale = height / distance / Math.sqrt(2);
​
              // Update the projection scale and centroid
              projection.scale(scale).center(center);
​
              svg.append("path")
                  .datum(coast)
                  .attr("class", "land")
                  .attr("d", path);
​
              svg.append("path")
                  .datum(topology)
                  .attr("class", "city")
                  .attr("d", path);
​
              svg.append("path")
                  .datum(coast)
                  .attr("class", "coast")
                  .attr("d", path);
          });
    </script>
  </body>
</html>
​
    