Leaflet + D3 + Vector Tiles (via Nelson Minar)

<!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;position:absolute;}
body { padding: 0; margin: 0; }
path { stroke-linejoin; round; stroke-linecap: round; fill: none}
path.road { stroke : #3C80A9; fill : none ;}
path.water { stroke:none; fill:#031536; }
img { -webkit-filter: grayscale(100%) brightness(40%) contrast(150%);}

</style>
<body>
<div id="map" class="dark"></div>

/* Experimental vector tile layer for Leaflet
 * Uses D3 to render TopoJSON. Derived from a GeoJSON thing that was
 * Originally by Ziggy Jonsson: https://bl.ocks.org/ZJONSSON/5602552
 * Reworked by Nelson Minar: https://bl.ocks.org/NelsonMinar/5624141
 */
L.TileLayer.d3_topoJSON =  L.TileLayer.extend({
    onAdd : function(map) {
        L.TileLayer.prototype.onAdd.call(this,map);
        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.xhr = d3.json(this.getTileUrl(tilePoint),function(error, tjData) {
                if (error) {
                    console.log(error);
                } else {
                    var geoJson = topojson.feature(tjData, tjData.objects[self.options.layerName]);
                    tile.xhr = null;
                    tile.nodes = d3.select(map._container).select("svg").append("g");
                    tile.nodes.selectAll("path")
                        .data(geoJson.features).enter()
                      .append("path")
                        .attr("d", self._path)
                        .attr("class", self.options.class)
                        .attr("style", self.options.style);
                }
            });
        }
    }
});

map = L.map(map).setView([47.6062095, -122.332070], 12);
map._initPathRoot();

// Add a fake GeoJSON line to coerce Leaflet into creating the <svg> tag that d3_geoJson needs
new L.geoJson({"type": "LineString","coordinates":[[0,0],[0,0]]}).addTo(map);

// Water Areas from OpenStreetMap
new L.TileLayer.d3_topoJSON("https://tile.openstreetmap.us/vectiles-water-areas/{z}/{x}/{y}.topojson", {
  class: "water",
  layerName: "vectile",
  style: ""
}).addTo(map);

// Highways from OpenStreetMap
var roadSizes = {
  "highway": "4px",
  "major_road": "1.8px",
  "minor_road": "1.2px",
  "rail": "0.8px",
  "path": "0.5px"
};
var roadColors = {
  "highway": "url(#grad1)",
  "major_road": "url(#grad2)",
  "minor_road": "url(#grad3)",
  "rail": "url(#grad4)",
  "path": "url(#grad5)"
};
new L.TileLayer.d3_topoJSON("https://tile.openstreetmap.us/vectiles-highroad/{z}/{x}/{y}.topojson", {
  class: "road",
  layerName: "vectile",
  style: function(d) { return "stroke-width: " + roadSizes[d.properties.kind] + "; stroke: " + roadColors[d.properties.kind]; }
}).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

Modified http://d3js.org/topojson.v1.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

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