D3 Examples - world map d3 v4 zoom and pan

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    /* Tooltip CSS */
    .d3-tip {
    line-height: 1.5;
    font-weight: 400;
    font-family:"avenir next", Arial, sans-serif;
    padding: 6px;
    background: rgba(0, 0, 0, 0.6);
    color: #FFA500;
    border-radius: 1px;
    pointer-events: none;
    }
​
    /* Creates a small triangle extender for the tooltip */
    .d3-tip:after {      
      box-sizing: border-box;
      display: inline;
      font-size: 8px;
      width: 100%;
      line-height: 1.5;
      color: rgba(0, 0, 0, 0.6);
      position: absolute;
      pointer-events: none;
      
    }
​
    /* Northward tooltips */
    .d3-tip.n:after {
      content: "\25BC";
      margin: -1px 0 0 0;
      top: 100%;
      left: 0;
      text-align: center;
    }
​
    /* Eastward tooltips */
    .d3-tip.e:after {
      content: "\25C0";
      margin: -4px 0 0 0;
      top: 50%;
      left: -8px;
    }
​
    /* Southward tooltips */
    .d3-tip.s:after {
      content: "\25B2";
      margin: 0 0 1px 0;
      top: -8px;
      left: 0;
      text-align: center;
    }
​
    /* Westward tooltips */
    .d3-tip.w:after {
      content: "\25B6";
      margin: -4px 0 0 -1px;
      top: 50%;
      left: 100%;
    }
  .names {
    fill: none;
    stroke: #fff;
    stroke-linejoin: round;
  }
  .details{
    padding: 5px 10px;
    color:white;
  }
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="d3-tip.js"></script>
<script>
var format = d3.format(",");
​
// Set tooltips
var tip = d3.tip()
            .attr('class', 'd3-tip')
            .offset([-10, 0])
            .html(function(d) {
              return "<span class='details'>" + d.properties.name + "</span>";
            })
​
var margin = {top: 0, right: 0, bottom: 0, left: 0},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom,
                    centered;
​
var color = d3.scaleThreshold()
    .domain([10000, 50000000, 1500000000])
    .range(["rgb(247,251,255)", "rgb(66,146,198)", "rgb(33,113,181)"]);
​
var path = d3.geoPath();
​
var svg = d3.select("body")
            .append("svg")
              .attr("width", width)
              .attr("height", height);
​
var projection = d3.geoMercator()
                  .scale(140)
                  .translate( [width / 2, height / 1.2]);
​
var path = d3.geoPath().projection(projection);
​
svg.call(tip);
​
queue()
    .defer(d3.json, "world_countries.json")
    .defer(d3.tsv, "world_population.tsv")
    .await(ready);
 
 function onClicked(d) {
  var x, y, k;
​
  if (d && centered !== d) {
    var centroid = path.centroid(d);
    x = centroid[0];
    y = centroid[1];
    k = 4;
    centered = d;
  } else {
    x = width / 2;
    y = height / 2;
    k = 1;
    centered = null;
  }
​
  g.selectAll("path")
      .classed("active", centered && function(d) { return d === centered; });
​
  g.transition()
      .duration(750)
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
      .style("stroke-width", 1.5 / k + "px");
}
​
var g;
​
function ready(error, data, population) {
  var populationById = {};
    console.log({ data });
  
  population.forEach(function(d) { populationById[d.id] = +d.population; });
  data.features.forEach(function(d) { d.population = populationById[d.id] });
​
  g = svg.append("g")
    .attr("class", "countries")
    .selectAll("path")
    .data(data.features)
    .enter().append("path")
    .attr("d", path)
    .style("fill", function(d) { return color(populationById[d.id]); })
    .style('stroke', 'white')
    .style('stroke-width', 1.5)
    .style("opacity",0.8)
    .on("click", onClicked)
  // tooltips
    .style("stroke","white")
    .style('stroke-width', 0.3)
    .on('mouseover',function(d){
      tip.show(d);
      d3.select(this)
        .style("opacity", 1)
        .style("stroke","white")
        .style("stroke-width",3);
        })
     .on('mouseout', function(d){
        tip.hide(d);
        d3.select(this)
          .style("opacity", 0.8)
          .style("stroke","white")
          .style("stroke-width",0.3);
     });
}
​
</script>
</body>
</html>
    