D3 Examples - Map of Spain with GitHub TopoJSON

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
</style>
<body>
<script src="https://unpkg.com/d3@4"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<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);
​
d3.json("https://raw.githubusercontent.com/piwodlaiwo/TopoJSON-Data/master/diva-gis/ESP_adm/ESP_adm1.topo.json", function(error, topo) {
  if (error) throw error;
  
  var spain = topojson.feature(topo, topo.objects.states);
  var spain_features = spain.features;
  
  //Find Spain bounds relative to height and width
  var b = path.bounds(spain),
      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];
​
  //zoom to Spain from World Mercator Projection
  projection.scale(s).translate(t);
  
  svg.selectAll("path")
     .data(spain_features)
     .enter().append("path")
     .attr("d", path);
​
});
</script>
    