Leaflet + D3 test

<!DOCTYPE html>
  <html>
    <head>
      <meta charset=utf-8 />
      <title>Leaflet, Mapbox and D3JS test</title>
      <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
      <script src='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.js'></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
      <link href='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.css' rel='stylesheet' />
      <style>
        
        body { margin:0; padding:0; }
        
        #map { 
          width: 1200px;
          height: 800px;
          margin: 50px auto;
        }

svg { 
          position: relative; 
        }

path {
          fill: #000;
          fill-opacity: 0;
          stroke: #fff;
          stroke-width: 1.5px;
        }

path:hover {
          fill: hsl(340, 50%, 50%);
          fill-opacity: .4;
        }

</style>
    </head>
    <body>

/********************************************************
          MapBox JS code credit: 
          https://www.mapbox.com/mapbox.js/example/v1.0.0/plain-leaflet/  
        ********************************************************/
        
        var mapboxTiles = L.tileLayer('https://{s}.tiles.mapbox.com/v3/chenrick.k94zehfr/{z}/{x}/{y}.png');

var params = {
          center: [0,0],
          minZoom: 2, 
          maxZoom: 4,
          zoom: 3,        
        };

var map = L.map('map', params)
            .addLayer(mapboxTiles);

/********************************************************
          D3 JS code credit: https://bost.ocks.org/mike/leaflet/  
        ********************************************************/

/* set up the svg object in realtionship to the Leaflet map */
        var svg = d3.select(map.getPanes().overlayPane).append("svg"),
              g = svg.append("g").attr("class", "leaflet-zoom-hide");

d3.json("ne_10m_time_zones.json", function(collection) {
          
          console.log("collection: ", collection);

var transform = d3.geo.transform({point: projectPoint}),
                path = d3.geo.path().projection(transform);

var feature = g.selectAll("path")
                .data(collection.features)
              .enter().append("path");
          
          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);
          }

});

</script>

</body>
  </html>

https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js