D3 Examples - D3v4 Zoomed to Country

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.js"></script>
  <script src="https://d3js.org/topojson.v2.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>
​
<body>
  <script>
    var width = 900;
    var height = 500;
    
    var svg = d3.select("body").append("svg")
    
    var projection = d3.geoMercator();
    
    projection.scale(1).translate([0, 0]);
    
    var path = d3.geoPath().projection(projection);
      
    var url = "https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-50m.json";
    
d3.json(url, function(error, world) {
  if (error) throw error;
​
  var regions = topojson.feature(world, world.objects.countries).features;
  var region = regions.filter(function(d) { return d.id === 32; })[0];
console.log(regions[8]);
console.log(region);
  
  
​
  var b = path.bounds(region),
      s = .95 / 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);
  
    svg.selectAll("path")
       .data(regions)
       .enter().append("path")
       .attr("d", path);
  
});
    
  </script>
</body>
    