Leaflet w/ basic D3 interpretation of Vector Tiles

<!DOCTYPE html>
<meta charset="utf-8">
<title>D3 GeoJSON in Leaflet</title>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.css' rel='stylesheet' />
  <style>
html, body, #map { height: 100%;width:100%; background:#020B26}
body { padding: 0; margin: 0; }
.road { stroke : #3C80A9; fill : none ; }
.water { stroke:none; fill:#031536;}
</style>
<body>
<div id="map"></div>

L.TileLayer.d3_geoJSON =  L.TileLayer.extend({
  onAdd : function(map) {
    L.TileLayer.prototype.onAdd.call(this,map);
    this.g = d3.select(map._container).select("svg").append("g");
    this._path = d3.geo.path().projection(function(d) {
      var point = map.latLngToLayerPoint(new L.LatLng(d[1],d[0]));
      return [point.x,point.y];
    });
    this.on("tileunload",function(d) {
      if (d.tile.xhr) d.tile.xhr.abort();
      if (d.tile.nodes) d.tile.nodes.remove();
      d.tile.nodes = null;
      d.tile.xhr = null;
    });
  },
  _loadTile : function(tile,tilePoint) {
    var self = this;
    this._adjustTilePoint(tilePoint);

if (!tile.nodes && !tile.xhr) {
      tile.nodes = d3.select();
      tile.xhr = d3.json(this.getTileUrl(tilePoint),function(d) {
        tile.xhr = null;
        tile.nodes = self.g.append("path")
          .datum(d)
          .attr("d",self._path)
          .attr("class",self.options.class);
      });
    }
  }
});

map = L.map(map).setView([45.5086699, -73.553992], 13);
map._initPathRoot();

new L.TileLayer.d3_geoJSON('https://{s}.tile.openstreetmap.us/vectiles-highroad/{z}/{x}/{y}.json',{class:"road"})
  .addTo(map);

new L.TileLayer.d3_geoJSON('https://{s}.tile.openstreetmap.us/vectiles-water-areas/{z}/{x}/{y}.json',{class:"water"})
  .addTo(map);

Modified http://api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.js to a secure url

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

https://api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.js

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