Zoom in Map Demo

US map zoom in demo

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.background {
        fill: none;
        pointer-events: all;
    }

#states {
        fill: #aaa;
    }

#states .active {
        display:none;
    }

#state-borders {
        fill: none;
        stroke: #fff;
        stroke-width: .2px;
       /* stroke-linejoin: round;
        stroke-linecap: round;
        pointer-events: none;*/
    }

.county-boundary {
        fill: #aaa;
        stroke: #fff;
        stroke-width: .2px;
    }

.county-boundary:hover, .state:hover {
        fill: orange;
    } 
</style>
<body>
    <script src="https://d3js.org/d3.v3.min.js">  </script>
    <script src="https://d3js.org/topojson.v1.min.js"></script>
<script>
  
 
 
 var width = 960,
            height = 500,
            centered;

var projection = d3.geo.albersUsa()
            .scale(1070)
            .translate([width / 2, height / 2]);

var path = d3.geo.path()
            .projection(projection);

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

svg.append("rect")
            .attr("class", "background")
            .attr("width", width)
            .attr("height", height)
            .on("click", clicked);

var g = svg.append("g");

d3.json("https://gist.githubusercontent.com/Jn1532/9425fdfa0b52f4b0c98067977649faea/raw/1a441d4dade02c8f683d360f28be824469f32827/us.json" , function(error, us) {
  if (error) throw error;

g.append("g")
                .attr("id", "counties")
                .selectAll("path")
                .data(topojson.feature(us, us.objects.counties).features)
                .enter().append("path")
                .attr("d", path)
                .attr("class", "county-boundary")
                .on("click", countyclicked);

g.append("g")
                .attr("id", "states")
                .selectAll("path")
                .data(topojson.feature(us, us.objects.states).features)
                .enter().append("path")
                .attr("d", path)
                .attr("class", "state")
                .on("click", clicked);

g.append("path")
                .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
                .attr("id", "state-borders")
                .attr("d", path);
    });
///////////////////////////////////

function clicked(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 + ")")
       // .attr("transform", "scale(" + k + ")translate(" + -x + "," + -y + ")")
                .style("stroke-width", 0.5 / k + "px");
    }
///////////////////////////////////
   function countyclicked(d) {
        var x, y, k;
        
      if (d && centered !== d) {
            var centroid = path.centroid(d);
            x = centroid[0];
            y = centroid[1];
            k = 23;
            } 
      else
            {
            x = width  ;
            y = height  ;
            k = 1;
            centered = null;
           }
      
             g.selectAll("path")
                .classed("active", centered && function(d) { return d === centered; });
      
        g.transition()
                .duration(750)
       .attr("transform", "translate(" + x  + "," + y  + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
                .style("stroke-width", 0.5 / k + "px");

}
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

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

https://d3js.org/topojson.v1.min.js