d3 tiles

<!DOCTYPE html>
<style>
  path {
    fill: #E5F5F9;
    opacity:0.4;
    stroke: #2CA25F;
    stroke-width: 0.5;
  }
  #axes {
    stroke: #BDBDBD;
    stroke-width: 0.5;
  }
</style>
<body>
<script src="https://d3js.org/d3.v2.js"></script>
<script>
  var width = 960,
      height = 500,
      projection = d3.geo.mercator().scale(1024).translate([512, 256]),
      path = d3.geo.path().projection(projection);

var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
      .call(d3.behavior.zoom()
        .translate(projection.translate())
        .scale(projection.scale())
        .on("zoom", redraw));

var axes = svg.append("g").attr("id", "axes"),
      xAxis = axes.append("line").attr("y2", height),
      yAxis = axes.append("line").attr("x2", width);

var tileg = svg.append('g').attr('id', 'tiles');

function tileUrl(d) {
      return 'https://a.tiles.mapbox.com/v3/tmcw.map-hehqnmda/' + d.join('/') + '.png';
  }

function redraw() {
    if (d3.event) {
      projection
          .translate(d3.event.translate)
          .scale(d3.event.scale);
    }

var t = projection.translate(),
        s = projection.scale(),
        z = Math.max(Math.log(s) / Math.log(2) - 8, 0);
        rz = Math.floor(z),
        ts = 256 * Math.pow(2, z - rz);

// This is the 0, 0 px of the projection
    var tile_origin = [s / 2 - t[0], s / 2 - t[1]];

var tiles = [];

var cols = d3.range(Math.max(0, Math.floor((tile_origin[0] - width) / ts)),
        Math.max(0, Math.ceil((tile_origin[0] + width) / ts)));

var rows = d3.range(Math.max(0, Math.floor((tile_origin[1] - height) / ts)),
        Math.max(0, Math.ceil((tile_origin[1] + height) / ts)));

cols.forEach(function(x) {
        rows.forEach(function(y) {
            tiles.push([Math.floor(z), x, y]);
        });
    });

var tiles = tileg.selectAll('image.tile')
        .data(tiles, function(d) { return d.join(',') });

tiles.exit()
        .transition()
        .duration(250)
        .style("opacity", 0.0)
        .remove();

tiles.enter().append('image')
        .attr('class', 'tile')
        .attr('xlink:href', tileUrl);

tiles.attr({ width: ts, height: ts })
        .attr('transform', function(d) {
            return 'translate(' + [(d[1] * ts) - tile_origin[0], (d[2] * ts) - tile_origin[1]] + ')';
        })

xAxis.attr("x1", t[0]).attr("x2", t[0]);
    yAxis.attr("y1", t[1]).attr("y2", t[1]);
  }

redraw();
</script>

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

https://d3js.org/d3.v2.js