TopoJSON to LeafletJS Using D3.js

<html>
<head>
  <title>HTML5</title>
  
  
  
  
  
  <meta charset="utf-8" />
  <meta name="viewport" content="width=650, user-scalable=yes">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.min.js"></script>
  <script src="https://d3js.org/topojson.v1.min.js"></script>
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  
  <style>
   path {
    fill: #000;
    fill-opacity: .2;
    stroke: #003399;
    stroke-width: 1.5px;
  }

path:hover {
    fill: brown;
    fill-opacity: .7;
  }
  html, body {
    height: 100%;
    margin: 0;
  }
  
  #mapcanvas{
   
    height:100%;
  }
  
</style>

map.setView(new L.LatLng(36.788283, -119.805891),6);
    map.addLayer(osm);
    var svg = d3.select(map.getPanes().overlayPane).append("svg"),
    g = svg.append("g").attr("class", "leaflet-zoom-hide");

d3.json("township.json", function(collection) {
      collection = topojson.feature(collection, collection.objects.township)
      var transform = d3.geo.transform({point: projectPoint}),
      path = d3.geo.path().projection(transform);

var feature = g.selectAll("path")
      .data(collection.features)
      .enter().append("path");
    //d3 code stolen from https://bost.ocks.org/mike/leaflet/#init
      map.on("viewreset", reset);
      reset();

function reset() {
        var bounds = path.bounds(collection),
        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] + ")");

feature.attr("d", path);
      }

function projectPoint(x, y) {
        var point = map.latLngToLayerPoint(new L.LatLng(y, x));
        this.stream.point(point.x, point.y);
      }
    });

});//end document ready

</script>

</head>
<body>
  <div id="mapcanvas">
  </div>
</body>

</html>

Modified http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js to a secure url

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

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

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

https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js

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

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

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