D3.js and Leaflet with a simple json overlay

A bump of Pere's gist to get the geojson polygons to plot correctly, in answer to this Stack Overflow question. In summary the bounds of the polygon needed to be recalcauted when leaflet map was called i.e. bounds was copied into the reset function in the code below.

<!DOCTYPE html>
<meta charset="utf-8">

<style>

#map {
  width: 1200px;
  height: 1000px;
}

path {
  
  fill-opacity: .8;
  stroke: #fff;
  stroke-width: 1.5px;
}

path:hover {
  fill: brown;
  fill-opacity: .7;
}

</style>

var svg = d3.select(map.getPanes().overlayPane).append("svg"),
    g = svg.append("g").attr("class", "leaflet-zoom-hide");
    
d3.json("004.json", function(collection) {
  
      var transform = d3.geo.transform({point: projectPoint}),
          path = d3.geo.path().projection(transform);
      
     d3_features = g.selectAll("path")
        .data(collection.features)
        .enter().append("path");

map.on("viewreset", reset);

reset();

function reset() {
        
          bounds = path.bounds(collection);

var topLeft = bounds[0],
              bottomRight = bounds[1];

svg .attr("width", bottomRight[0] - topLeft[0])
              .attr("height", bottomRight[1] - topLeft[1])
              .style("left", topLeft[0] + "px")
              .style("top", topLeft[1] + "px");

g .attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");

d3_features.attr("d", path).attr('fill','blue');
      }

// Use Leaflet to implement a D3 geometric transformation.
      function projectPoint(x, y) {
        var point = map.latLngToLayerPoint(new L.LatLng(y, x));
        this.stream.point(point.x, point.y);
      }

})
    
</script>

Modified http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js to a secure url

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

https://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js

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