Basic Map Zooming

It's ridiculous how easy d3-zoom makes it to zoom elements.

forked from HarryStevens's block: Basic Map Zooming

<!DOCTYPE html>
<html>
<head>
  <style>
  body {
    margin: 0;
    font-family: "Helvetica Neue", sans-serif;
    cursor: default;
  }

.subunit {
    stroke: #fff;
    stroke-width: .5px;
  }
  .subunit.highlight {
    stroke: #000;
    stroke-width: 2px;
  }
  .subunit-boundary {
    fill: none;
    stroke: #000;
    stroke-width: 1px;
  }
  </style>
</head>
<body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
  <script>
  var width = window.innerWidth, height = window.innerHeight;

var projection = d3.geoAzimuthalEqualArea()
    .rotate([-70, -10, -1]);

var path = d3.geoPath()
      .projection(projection)
      .pointRadius(2);

var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
  var g = svg.append("g").attr("width", width).attr("height", height);

var colors = ["#8dd3c7", "#ffffb3", "#bebada", "#fb8072", "#80b1d3", "#fdb462", "#b3de69", "#fccde5", "#fbb4ae", "#b3cde3", "#ccebc5", "#decbe4", "#fed9a6", "#ffffcc", "#e5d8bd", "#fddaec", "#e41a1c", "#377eb8", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#a65628", "#f781bf"];

d3.json("india_state.json", (error, data) => {
    var feature = topojson.feature(data, data.objects.polygons);

projection.fitSize([width, height], feature);
    
    g.selectAll(".subunit")
        .data(feature.features, d => d.properties.ST_NM)
      .enter().append("path")
        .attr("class", "subunit")
        .attr("d", path)
        .style("fill", (d, i) => colors[i % colors.length])
        .on("mouseover", function(){
          d3.select(this).classed("highlight", true).raise();
          d3.select(".subunit-boundary").raise();
        })
        .on("mouseout", () => {
          d3.selectAll(".subunit").classed("highlight", false);
        });

g.append("path")
        .datum(topojson.mesh(data, data.objects.polygons, (a, b) => a === b))
        .attr("d", path)
        .attr("class", "subunit-boundary");

var zoom = d3.zoom().scaleExtent([1, 8]).translateExtent([[0, 0], [width, height]]).on("zoom", () => g.attr("transform", d3.event.transform));
    svg.call(zoom);

window.onresize = () => {
      width = window.innerWidth, height = window.innerHeight;
      
      svg.attr("width", width).attr("height", height);
      g.attr("width", width).attr("height", height);
      
      projection.fitSize([width, height], topojson.feature(data, data.objects.polygons));
      
      g.selectAll("path").attr("d", path);
      
      zoom.translateExtent([[0, 0], [width, height]]);
      svg.call(zoom);
    }
  });
  </script>
</body>
</html>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-geo-projection.v2.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js