D3 Examples - d3.geo.zoom.js plugin first use

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
    <style>
​
​
        </style>
    <body>
​
<svg class='keyer'></svg>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
        <script src="d3.geo.zoom.js"></script>
        <script>
​
d3.json("../world110.json", function(err, world) {
//  console.log("data", world)
  var countries = topojson.feature(world, world.objects.land);
//  console.log("countries", countries)
var width = 720
var height = 400
//var projection = d3.geo.orthographic()
var projection = d3.geo.albers()
//var projection = d3.geo.mercator()
  .scale(170)
  .rotate([100,0,0])
  .translate([width/2, height/2])
  .clipAngle(90);
​
var path = d3.geo.path()
  .projection(projection);
​
var svg = d3.select('.keyer');
​
svg.attr('height',height).attr('width',width);
​
​
svg.append("path")
.datum(countries)
  .attr("d", path(countries))
  .classed("land", true)
  .attr('fill','rgb(83, 207, 142)');
​
​
  var graticule = d3.geo.graticule();
​
  svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path)
    .attr("fill", "transparent")
    .attr("stroke","grey");
​
var zoom = d3.geo.zoom()
  .projection(projection)
  //.scaleExtent([projection.scale() *.7, projection.scale() *10])
  .on("zoom.redraw", function(){
    d3.event.sourceEvent.preventDefault();
    svg.selectAll("path").attr("d",path);
  })
  d3.selectAll('path')
.call(zoom);
​
​
})
​
​
​
​
​
​
            </script>
    </body>
​
    