tmcw/index.html

## index.html
<!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="http://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 'http://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>
	<!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="http://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 'http://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>