jparks · May 7, 2017 05:18 · May 7, 2017 · May 7, 2017 · May 7, 2017 · May 7, 2017
diff --git a/index.html b/index.html
@@ -92,7 +92,7 @@
     .attr("class", "info");
 
 // Compute the projected initial center.
-var center = projection([-97.764595,30.283303]);
+var center = projection([30.283303,-97.764]);
 
 // Apply a zoom transform equivalent to projection.{scale,translate,center}.
 map .call(zoom)

diff --git a/index.html b/index.html
@@ -92,7 +92,7 @@
     .attr("class", "info");
 
 // Compute the projected initial center.
-var center = projection([30.283303,-97.764595]);
+var center = projection([-97.764595,30.283303]);
 
 // Apply a zoom transform equivalent to projection.{scale,translate,center}.
 map .call(zoom)

diff --git a/index.html b/index.html
@@ -92,7 +92,7 @@
     .attr("class", "info");
 
 // Compute the projected initial center.
-var center = projection([-74.0064, 40.7142]);
+var center = projection([30.283303,-97.764595]);
 
 // Apply a zoom transform equivalent to projection.{scale,translate,center}.
 map .call(zoom)

diff --git a/index.html b/index.html
@@ -130,7 +130,7 @@
 }
 
 function render(d, node) {
-  d3.json("https://vector.mapzen.com/osm/roads/" + d[2] + "/" + d[0] + "/" + d[1] + ".json?api_key=vector-tiles-LM25tq4", function(error, json) {
+  return d3.json("https://vector.mapzen.com/osm/roads/" + d[2] + "/" + d[0] + "/" + d[1] + ".json?api_key=vector-tiles-LM25tq4", function(error, json) {
     if (error) throw error;
     var k = Math.pow(2, d[2]) * 256; // size of the world in pixels
 

diff --git a/index.html b/index.html
@@ -141,7 +141,8 @@
         .attr("d", d3.geoPath()
             .projection(d3.geoMercator()
                 .scale(k / tau)
-                .translate([k / 2 - d[0] * 256, k / 2 - d[1] * 256])));
+                .translate([k / 2 - d[0] * 256, k / 2 - d[1] * 256])
+                .precision(0)));
   });
 }
 

diff --git a/index.html b/index.html
@@ -126,22 +126,23 @@
       .attr("class", "tile")
       .style("left", function(d) { return d[0] * 256 + "px"; })
       .style("top", function(d) { return d[1] * 256 + "px"; })
-      .each(function(d) {
-        var svg = d3.select(this);
-        this._xhr = d3.json("https://vector.mapzen.com/osm/roads/" + d[2] + "/" + d[0] + "/" + d[1] + ".json?api_key=vector-tiles-LM25tq4", function(error, json) {
-          if (error) throw error;
-          var k = Math.pow(2, d[2]) * 256; // size of the world in pixels
-
-          svg.selectAll("path")
-            .data(json.features.sort(function(a, b) { return a.properties.sort_key - b.properties.sort_key; }))
-            .enter().append("path")
-              .attr("class", function(d) { return d.properties.kind; })
-              .attr("d", d3.geoPath()
-                  .projection(d3.geoMercator()
-                      .scale(k / tau)
-                      .translate([k / 2 - d[0] * 256, k / 2 - d[1] * 256])));
-        });
-      });
+      .each(function(d) { this._xhr = render(d, this); });
+}
+
+function render(d, node) {
+  d3.json("https://vector.mapzen.com/osm/roads/" + d[2] + "/" + d[0] + "/" + d[1] + ".json?api_key=vector-tiles-LM25tq4", function(error, json) {
+    if (error) throw error;
+    var k = Math.pow(2, d[2]) * 256; // size of the world in pixels
+
+    d3.select(node).selectAll("path")
+      .data(json.features.sort(function(a, b) { return a.properties.sort_key - b.properties.sort_key; }))
+      .enter().append("path")
+        .attr("class", function(d) { return d.properties.kind; })
+        .attr("d", d3.geoPath()
+            .projection(d3.geoMercator()
+                .scale(k / tau)
+                .translate([k / 2 - d[0] * 256, k / 2 - d[1] * 256])));
+  });
 }
 
 function stringify(scale, translate) {

diff --git a/index.html b/index.html
@@ -13,6 +13,7 @@
 
 .layer {
   position: absolute;
+  will-change: transform;
 }
 
 .tile {

diff --git a/d3.geo.tile.min.js b/d3.geo.tile.min.js
@@ -1 +0,0 @@
-d3.geo.tile=function(){function t(){var t=Math.max(Math.log(n)/Math.LN2-8,0),h=Math.round(t+e),o=Math.pow(2,t-h+8),u=[(r[0]-n/2)/o,(r[1]-n/2)/o],l=[],c=d3.range(Math.max(0,Math.floor(-u[0])),Math.max(0,Math.ceil(a[0]/o-u[0]))),M=d3.range(Math.max(0,Math.floor(-u[1])),Math.max(0,Math.ceil(a[1]/o-u[1])));return M.forEach(function(t){c.forEach(function(a){l.push([a,t,h])})}),l.translate=u,l.scale=o,l}var a=[960,500],n=256,r=[a[0]/2,a[1]/2],e=0;return t.size=function(n){return arguments.length?(a=n,t):a},t.scale=function(a){return arguments.length?(n=a,t):n},t.translate=function(a){return arguments.length?(r=a,t):r},t.zoomDelta=function(a){return arguments.length?(e=+a,t):e},t};

diff --git a/README.md b/README.md
@@ -1,3 +1,3 @@
-Adapting [d3.geo.tile](https://github.com/d3/d3-plugins/tree/master/geo/tile) to show [Mapzen vector tiles](https://mapzen.com/projects/vector-tiles/). See also the [static example](/mbostock/5616813).
+Adapting [d3-tile](https://github.com/d3/d3-tile) to show [Mapzen vector tiles](https://mapzen.com/projects/vector-tiles/). See also the [static example](/mbostock/5616813).
 
 Map tiles © OpenStreetMap contributors, Who’s On First.
diff --git a/index.html b/index.html
@@ -28,10 +28,22 @@
   stroke-linecap: round;
 }
 
-.tile .major_road { stroke: #776; }
-.tile .minor_road { stroke: #ccb; }
-.tile .highway { stroke: #f39; stroke-width: 1.5px; }
-.tile .rail { stroke: #7de; }
+.tile .major_road {
+  stroke: #776;
+}
+
+.tile .minor_road {
+  stroke: #ccb;
+}
+
+.tile .highway {
+  stroke: #f39;
+  stroke-width: 1.5px;
+}
+
+.tile .rail {
+  stroke: #7de;
+}
 
 .info {
   position: absolute;
@@ -41,37 +53,35 @@
 
 </style>
 <body>
-<script src="//d3js.org/d3.v3.min.js"></script>
-<script src="d3.geo.tile.min.js"></script>
+<script src="//d3js.org/d3.v4.min.js"></script>
+<script src="//d3js.org/d3-tile.v0.0.min.js"></script>
 <script>
 
-var width = Math.max(960, window.innerWidth),
-    height = Math.max(500, window.innerHeight),
-    prefix = prefixMatch(["webkit", "ms", "Moz", "O"]);
+var pi = Math.PI,
+    tau = 2 * pi;
 
-var tile = d3.geo.tile()
-    .size([width, height]);
+var width = Math.max(960, window.innerWidth),
+    height = Math.max(500, window.innerHeight);
 
-var projection = d3.geo.mercator()
-    .scale((1 << 21) / 2 / Math.PI)
-    .translate([-width / 2, -height / 2]); // just temporary
+// Initialize the projection to fit the world in a 1×1 square centered at the origin.
+var projection = d3.geoMercator()
+    .scale(1 / tau)
+    .translate([0, 0]);
 
-var tileProjection = d3.geo.mercator();
+var path = d3.geoPath()
+    .projection(projection);
 
-var tilePath = d3.geo.path()
-    .projection(tileProjection);
+var tile = d3.tile()
+    .size([width, height]);
 
-var zoom = d3.behavior.zoom()
-    .scale(projection.scale() * 2 * Math.PI)
+var zoom = d3.zoom()
     .scaleExtent([1 << 20, 1 << 23])
-    .translate(projection([-74.0064, 40.7142]).map(function(x) { return -x; }))
     .on("zoom", zoomed);
 
 var map = d3.select("body").append("div")
     .attr("class", "map")
     .style("width", width + "px")
     .style("height", height + "px")
-    .call(zoom)
     .on("mousemove", mousemoved);
 
 var layer = map.append("div")
@@ -80,22 +90,32 @@
 var info = map.append("div")
     .attr("class", "info");
 
-zoomed();
+// Compute the projected initial center.
+var center = projection([-74.0064, 40.7142]);
+
+// Apply a zoom transform equivalent to projection.{scale,translate,center}.
+map .call(zoom)
+    .call(zoom.transform, d3.zoomIdentity
+        .translate(width / 2, height / 2)
+        .scale(1 << 20)
+        .translate(-center[0], -center[1]));
 
 function zoomed() {
+  var transform = d3.event.transform;
+
   var tiles = tile
-      .scale(zoom.scale())
-      .translate(zoom.translate())
+      .scale(transform.k)
+      .translate([transform.x, transform.y])
       ();
 
   projection
-      .scale(zoom.scale() / 2 / Math.PI)
-      .translate(zoom.translate());
+      .scale(transform.k / tau)
+      .translate([transform.x, transform.y]);
 
   var image = layer
-      .style(prefix + "transform", matrix3d(tiles.scale, tiles.translate))
+      .style("transform", stringify(tiles.scale, tiles.translate))
     .selectAll(".tile")
-      .data(tiles, function(d) { return d; });
+    .data(tiles, function(d) { return d; });
 
   image.exit()
       .each(function(d) { this._xhr.abort(); })
@@ -108,34 +128,28 @@
       .each(function(d) {
         var svg = d3.select(this);
         this._xhr = d3.json("https://vector.mapzen.com/osm/roads/" + d[2] + "/" + d[0] + "/" + d[1] + ".json?api_key=vector-tiles-LM25tq4", function(error, json) {
+          if (error) throw error;
           var k = Math.pow(2, d[2]) * 256; // size of the world in pixels
 
-          tilePath.projection()
-              .translate([k / 2 - d[0] * 256, k / 2 - d[1] * 256]) // [0°,0°] in pixels
-              .scale(k / 2 / Math.PI);
-
           svg.selectAll("path")
-              .data(json.features.sort(function(a, b) { return a.properties.sort_key - b.properties.sort_key; }))
+            .data(json.features.sort(function(a, b) { return a.properties.sort_key - b.properties.sort_key; }))
             .enter().append("path")
               .attr("class", function(d) { return d.properties.kind; })
-              .attr("d", tilePath);
+              .attr("d", d3.geoPath()
+                  .projection(d3.geoMercator()
+                      .scale(k / tau)
+                      .translate([k / 2 - d[0] * 256, k / 2 - d[1] * 256])));
         });
       });
 }
 
-function mousemoved() {
-  info.text(formatLocation(projection.invert(d3.mouse(this)), zoom.scale()));
-}
-
-function matrix3d(scale, translate) {
+function stringify(scale, translate) {
   var k = scale / 256, r = scale % 1 ? Number : Math.round;
   return "matrix3d(" + [k, 0, 0, 0, 0, k, 0, 0, 0, 0, k, 0, r(translate[0] * scale), r(translate[1] * scale), 0, 1 ] + ")";
 }
 
-function prefixMatch(p) {
-  var i = -1, n = p.length, s = document.body.style;
-  while (++i < n) if (p[i] + "Transform" in s) return "-" + p[i].toLowerCase() + "-";
-  return "";
+function mousemoved() {
+  info.text(formatLocation(projection.invert(d3.mouse(this)), d3.zoomTransform(this).k));
 }
 
 function formatLocation(p, k) {

diff --git a/index.html b/index.html
@@ -107,7 +107,7 @@
       .style("top", function(d) { return d[1] * 256 + "px"; })
       .each(function(d) {
         var svg = d3.select(this);
-        this._xhr = d3.json("http://vector.mapzen.com/osm/roads/" + d[2] + "/" + d[0] + "/" + d[1] + ".json?api_key=vector-tiles-LM25tq4", function(error, json) {
+        this._xhr = d3.json("https://vector.mapzen.com/osm/roads/" + d[2] + "/" + d[0] + "/" + d[1] + ".json?api_key=vector-tiles-LM25tq4", function(error, json) {
           var k = Math.pow(2, d[2]) * 256; // size of the world in pixels
 
           tilePath.projection()

diff --git a/README.md b/README.md
@@ -1 +1,3 @@
-Adapting [d3.geo.tile](https://github.com/d3/d3-plugins/tree/master/geo/tile) to show [OpenStreetMap vector tiles](http://openstreetmap.us/~migurski/vector-datasource/). See also the [static example](/mbostock/5616813).
+Adapting [d3.geo.tile](https://github.com/d3/d3-plugins/tree/master/geo/tile) to show [Mapzen vector tiles](https://mapzen.com/projects/vector-tiles/). See also the [static example](/mbostock/5616813).
+
+Map tiles © OpenStreetMap contributors, Who’s On First.
diff --git a/index.html b/index.html
@@ -107,7 +107,7 @@
       .style("top", function(d) { return d[1] * 256 + "px"; })
       .each(function(d) {
         var svg = d3.select(this);
-        this._xhr = d3.json("http://" + ["a", "b", "c"][(d[0] * 31 + d[1]) % 3] + ".tile.openstreetmap.us/vectiles-highroad/" + d[2] + "/" + d[0] + "/" + d[1] + ".json", function(error, json) {
+        this._xhr = d3.json("http://vector.mapzen.com/osm/roads/" + d[2] + "/" + d[0] + "/" + d[1] + ".json?api_key=vector-tiles-LM25tq4", function(error, json) {
           var k = Math.pow(2, d[2]) * 256; // size of the world in pixels
 
           tilePath.projection()

diff --git a/.block b/.block
@@ -0,0 +1 @@
+license: gpl-3.0
diff --git a/index.html b/index.html
@@ -41,7 +41,7 @@
 
 </style>
 <body>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
+<script src="//d3js.org/d3.v3.min.js"></script>
 <script src="d3.geo.tile.min.js"></script>
 <script>
 

diff --git a/d3.geo.tile.min.js b/d3.geo.tile.min.js
@@ -0,0 +1 @@
+d3.geo.tile=function(){function t(){var t=Math.max(Math.log(n)/Math.LN2-8,0),h=Math.round(t+e),o=Math.pow(2,t-h+8),u=[(r[0]-n/2)/o,(r[1]-n/2)/o],l=[],c=d3.range(Math.max(0,Math.floor(-u[0])),Math.max(0,Math.ceil(a[0]/o-u[0]))),M=d3.range(Math.max(0,Math.floor(-u[1])),Math.max(0,Math.ceil(a[1]/o-u[1])));return M.forEach(function(t){c.forEach(function(a){l.push([a,t,h])})}),l.translate=u,l.scale=o,l}var a=[960,500],n=256,r=[a[0]/2,a[1]/2],e=0;return t.size=function(n){return arguments.length?(a=n,t):a},t.scale=function(a){return arguments.length?(n=a,t):n},t.translate=function(a){return arguments.length?(r=a,t):r},t.zoomDelta=function(a){return arguments.length?(e=+a,t):e},t};
diff --git a/index.html b/index.html
@@ -41,8 +41,8 @@
 
 </style>
 <body>
-<script src="http://d3js.org/d3.v3.min.js"></script>
-<script src="http://d3js.org/d3.geo.tile.v0.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
+<script src="d3.geo.tile.min.js"></script>
 <script>
 
 var width = Math.max(960, window.innerWidth),

diff --git a/index.html b/index.html
@@ -25,6 +25,7 @@
   fill: none;
   stroke: #000;
   stroke-linejoin: round;
+  stroke-linecap: round;
 }
 
 .tile .major_road { stroke: #776; }
@@ -46,8 +47,7 @@
 
 var width = Math.max(960, window.innerWidth),
     height = Math.max(500, window.innerHeight),
-    prefix = prefixMatch(["webkit", "ms", "Moz", "O"]),
-    order = {rail: 0, minor_road: 1, major_road: 2, highway: 3};
+    prefix = prefixMatch(["webkit", "ms", "Moz", "O"]);
 
 var tile = d3.geo.tile()
     .size([width, height]);
@@ -115,13 +115,10 @@
               .scale(k / 2 / Math.PI);
 
           svg.selectAll("path")
-              .data(d3.nest()
-                .key(function(d) { return d.properties.kind; })
-                .sortKeys(function(a, b) { return order[a] - order[b]; })
-                .entries(json.features))
+              .data(json.features.sort(function(a, b) { return a.properties.sort_key - b.properties.sort_key; }))
             .enter().append("path")
-              .attr("class", function(d) { return d.key; })
-              .attr("d", function(d) { return tilePath({type: "FeatureCollection", features: d.values}); });
+              .attr("class", function(d) { return d.properties.kind; })
+              .attr("d", tilePath);
         });
       });
 }

diff --git a/README.md b/README.md
@@ -1 +1 @@
-Adapting [d3.geo.tile](https://github.com/d3/d3-plugins/tree/master/geo/tile) to show [OpenStreetMap vector tiles](http://openstreetmap.us/~migurski/vector-datasource/).
+Adapting [d3.geo.tile](https://github.com/d3/d3-plugins/tree/master/geo/tile) to show [OpenStreetMap vector tiles](http://openstreetmap.us/~migurski/vector-datasource/). See also the [static example](/mbostock/5616813).
diff --git a/README.md b/README.md
@@ -1 +1 @@
-Adapting [d3.geo.tile](https://github.com/d3/d3-plugins/tree/master/geo/tile) to show vector tiles from [OpenStreetMap](http://www.openstreetmap.org/).
+Adapting [d3.geo.tile](https://github.com/d3/d3-plugins/tree/master/geo/tile) to show [OpenStreetMap vector tiles](http://openstreetmap.us/~migurski/vector-datasource/).
diff --git a/index.html b/index.html
@@ -30,6 +30,7 @@
 .tile .major_road { stroke: #776; }
 .tile .minor_road { stroke: #ccb; }
 .tile .highway { stroke: #f39; stroke-width: 1.5px; }
+.tile .rail { stroke: #7de; }
 
 .info {
   position: absolute;
@@ -46,7 +47,7 @@
 var width = Math.max(960, window.innerWidth),
     height = Math.max(500, window.innerHeight),
     prefix = prefixMatch(["webkit", "ms", "Moz", "O"]),
-    order = {minor_road: 0, major_road: 1, highway: 2};
+    order = {rail: 0, minor_road: 1, major_road: 2, highway: 3};
 
 var tile = d3.geo.tile()
     .size([width, height]);

diff --git a/index.html b/index.html
@@ -27,9 +27,9 @@
   stroke-linejoin: round;
 }
 
-.tile .major_road { stroke: #1f77b4; }
-.tile .minor_road { stroke: #aec7e8; }
-.tile .highway { stroke: #ff7f0e; }
+.tile .major_road { stroke: #776; }
+.tile .minor_road { stroke: #ccb; }
+.tile .highway { stroke: #f39; stroke-width: 1.5px; }
 
 .info {
   position: absolute;
@@ -45,7 +45,8 @@
 
 var width = Math.max(960, window.innerWidth),
     height = Math.max(500, window.innerHeight),
-    prefix = prefixMatch(["webkit", "ms", "Moz", "O"]);
+    prefix = prefixMatch(["webkit", "ms", "Moz", "O"]),
+    order = {minor_road: 0, major_road: 1, highway: 2};
 
 var tile = d3.geo.tile()
     .size([width, height]);
@@ -113,7 +114,10 @@
               .scale(k / 2 / Math.PI);
 
           svg.selectAll("path")
-              .data(d3.nest().key(function(d) { return d.properties.kind; }).entries(json.features))
+              .data(d3.nest()
+                .key(function(d) { return d.properties.kind; })
+                .sortKeys(function(a, b) { return order[a] - order[b]; })
+                .entries(json.features))
             .enter().append("path")
               .attr("class", function(d) { return d.key; })
               .attr("d", function(d) { return tilePath({type: "FeatureCollection", features: d.values}); });

diff --git a/thumbnail.png b/thumbnail.png
diff --git a/index.html b/index.html
@@ -27,6 +27,10 @@
   stroke-linejoin: round;
 }
 
+.tile .major_road { stroke: #1f77b4; }
+.tile .minor_road { stroke: #aec7e8; }
+.tile .highway { stroke: #ff7f0e; }
+
 .info {
   position: absolute;
   bottom: 10px;
@@ -108,9 +112,11 @@
               .translate([k / 2 - d[0] * 256, k / 2 - d[1] * 256]) // [0°,0°] in pixels
               .scale(k / 2 / Math.PI);
 
-          svg.append("path")
-              .datum(json)
-              .attr("d", tilePath);
+          svg.selectAll("path")
+              .data(d3.nest().key(function(d) { return d.properties.kind; }).entries(json.features))
+            .enter().append("path")
+              .attr("class", function(d) { return d.key; })
+              .attr("d", function(d) { return tilePath({type: "FeatureCollection", features: d.values}); });
         });
       });
 }

diff --git a/index.html b/index.html
@@ -48,7 +48,7 @@
 
 var projection = d3.geo.mercator()
     .scale((1 << 21) / 2 / Math.PI)
-    .translate([-width / 2, -height / 2]);
+    .translate([-width / 2, -height / 2]); // just temporary
 
 var tileProjection = d3.geo.mercator();
 

diff --git a/thumbnail.png b/thumbnail.png
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+Adapting [d3.geo.tile](https://github.com/d3/d3-plugins/tree/master/geo/tile) to show vector tiles from [OpenStreetMap](http://www.openstreetmap.org/).
diff --git a/index.html b/index.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+
+body {
+  margin: 0;
+}
+
+.map {
+  position: relative;
+  overflow: hidden;
+}
+
+.layer {
+  position: absolute;
+}
+
+.tile {
+  position: absolute;
+  width: 256px;
+  height: 256px;
+}
+
+.tile path {
+  fill: none;
+  stroke: #000;
+  stroke-linejoin: round;
+}
+
+.info {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+}
+
+</style>
+<body>
+<script src="http://d3js.org/d3.v3.min.js"></script>
+<script src="http://d3js.org/d3.geo.tile.v0.min.js"></script>
+<script>
+
+var width = Math.max(960, window.innerWidth),
+    height = Math.max(500, window.innerHeight),
+    prefix = prefixMatch(["webkit", "ms", "Moz", "O"]);
+
+var tile = d3.geo.tile()
+    .size([width, height]);
+
+var projection = d3.geo.mercator()
+    .scale((1 << 21) / 2 / Math.PI)
+    .translate([-width / 2, -height / 2]);
+
+var tileProjection = d3.geo.mercator();
+
+var tilePath = d3.geo.path()
+    .projection(tileProjection);
+
+var zoom = d3.behavior.zoom()
+    .scale(projection.scale() * 2 * Math.PI)
+    .scaleExtent([1 << 20, 1 << 23])
+    .translate(projection([-74.0064, 40.7142]).map(function(x) { return -x; }))
+    .on("zoom", zoomed);
+
+var map = d3.select("body").append("div")
+    .attr("class", "map")
+    .style("width", width + "px")
+    .style("height", height + "px")
+    .call(zoom)
+    .on("mousemove", mousemoved);
+
+var layer = map.append("div")
+    .attr("class", "layer");
+
+var info = map.append("div")
+    .attr("class", "info");
+
+zoomed();
+
+function zoomed() {
+  var tiles = tile
+      .scale(zoom.scale())
+      .translate(zoom.translate())
+      ();
+
+  projection
+      .scale(zoom.scale() / 2 / Math.PI)
+      .translate(zoom.translate());
+
+  var image = layer
+      .style(prefix + "transform", matrix3d(tiles.scale, tiles.translate))
+    .selectAll(".tile")
+      .data(tiles, function(d) { return d; });
+
+  image.exit()
+      .each(function(d) { this._xhr.abort(); })
+      .remove();
+
+  image.enter().append("svg")
+      .attr("class", "tile")
+      .style("left", function(d) { return d[0] * 256 + "px"; })
+      .style("top", function(d) { return d[1] * 256 + "px"; })
+      .each(function(d) {
+        var svg = d3.select(this);
+        this._xhr = d3.json("http://" + ["a", "b", "c"][(d[0] * 31 + d[1]) % 3] + ".tile.openstreetmap.us/vectiles-highroad/" + d[2] + "/" + d[0] + "/" + d[1] + ".json", function(error, json) {
+          var k = Math.pow(2, d[2]) * 256; // size of the world in pixels
+
+          tilePath.projection()
+              .translate([k / 2 - d[0] * 256, k / 2 - d[1] * 256]) // [0°,0°] in pixels
+              .scale(k / 2 / Math.PI);
+
+          svg.append("path")
+              .datum(json)
+              .attr("d", tilePath);
+        });
+      });
+}
+
+function mousemoved() {
+  info.text(formatLocation(projection.invert(d3.mouse(this)), zoom.scale()));
+}
+
+function matrix3d(scale, translate) {
+  var k = scale / 256, r = scale % 1 ? Number : Math.round;
+  return "matrix3d(" + [k, 0, 0, 0, 0, k, 0, 0, 0, 0, k, 0, r(translate[0] * scale), r(translate[1] * scale), 0, 1 ] + ")";
+}
+
+function prefixMatch(p) {
+  var i = -1, n = p.length, s = document.body.style;
+  while (++i < n) if (p[i] + "Transform" in s) return "-" + p[i].toLowerCase() + "-";
+  return "";
+}
+
+function formatLocation(p, k) {
+  var format = d3.format("." + Math.floor(Math.log(k) / 2 - 2) + "f");
+  return (p[1] < 0 ? format(-p[1]) + "°S" : format(p[1]) + "°N") + " "
+       + (p[0] < 0 ? format(-p[0]) + "°W" : format(p[0]) + "°E");
+}
+
+</script>
Original file line number	Diff line number	Diff line change
		@@ -1 +0,0 @@
		d3.geo.tile=function(){function t(){var t=Math.max(Math.log(n)/Math.LN2-8,0),h=Math.round(t+e),o=Math.pow(2,t-h+8),u=[(r[0]-n/2)/o,(r[1]-n/2)/o],l=[],c=d3.range(Math.max(0,Math.floor(-u[0])),Math.max(0,Math.ceil(a[0]/o-u[0]))),M=d3.range(Math.max(0,Math.floor(-u[1])),Math.max(0,Math.ceil(a[1]/o-u[1])));return M.forEach(function(t){c.forEach(function(a){l.push([a,t,h])})}),l.translate=u,l.scale=o,l}var a=[960,500],n=256,r=[a[0]/2,a[1]/2],e=0;return t.size=function(n){return arguments.length?(a=n,t):a},t.scale=function(a){return arguments.length?(n=a,t):n},t.translate=function(a){return arguments.length?(r=a,t):r},t.zoomDelta=function(a){return arguments.length?(e=+a,t):e},t};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		d3.geo.tile=function(){function t(){var t=Math.max(Math.log(n)/Math.LN2-8,0),h=Math.round(t+e),o=Math.pow(2,t-h+8),u=[(r[0]-n/2)/o,(r[1]-n/2)/o],l=[],c=d3.range(Math.max(0,Math.floor(-u[0])),Math.max(0,Math.ceil(a[0]/o-u[0]))),M=d3.range(Math.max(0,Math.floor(-u[1])),Math.max(0,Math.ceil(a[1]/o-u[1])));return M.forEach(function(t){c.forEach(function(a){l.push([a,t,h])})}),l.translate=u,l.scale=o,l}var a=[960,500],n=256,r=[a[0]/2,a[1]/2],e=0;return t.size=function(n){return arguments.length?(a=n,t):a},t.scale=function(a){return arguments.length?(n=a,t):n},t.translate=function(a){return arguments.length?(r=a,t):r},t.zoomDelta=function(a){return arguments.length?(e=+a,t):e},t};
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		Adapting [d3.geo.tile](https://github.com/d3/d3-plugins/tree/master/geo/tile) to show [OpenStreetMap vector tiles](http://openstreetmap.us/~migurski/vector-datasource/).
		Adapting [d3.geo.tile](https://github.com/d3/d3-plugins/tree/master/geo/tile) to show [OpenStreetMap vector tiles](http://openstreetmap.us/~migurski/vector-datasource/). See also the [static example](/mbostock/5616813).