index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
svg {
background-color: #333;
}
.stroke {
fill: none;
stroke: #222;
stroke-width: .5;
}
</style>
</head>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/d3.geo.tile.v0.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 500;
var projection = d3.geo.mercator()
.center([-122, 48.7])
.scale(7200);
var path = d3.geo.path()
.projection(projection);
var tile = d3.geo.tile()
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 0]))
.zoomDelta((window.devicePixelRatio || 1) - .5);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("world-50m.json", function(error, topology) {
var amurka = topology.objects.countries.geometries.filter(function(d) { return d.id == 840; })[0];
var canada = topology.objects.countries.geometries.filter(function(d) { return d.id == 124; })[0];
var mexico = topology.objects.countries.geometries.filter(function(d) { return d.id == 484; })[0];
var cuba = topology.objects.countries.geometries.filter(function(d) { return d.id == 192; })[0];
var tiles1 = tile();
var tiles2 = tile();
var tiles3 = tile();
var tiles4 = tile();
var defs = svg.append("defs");
defs.append("path")
.attr("id", "usa")
.datum(topojson.feature(topology, amurka))
.attr("d", path)
defs.append("clipPath")
.attr("id", "clip1")
.append("use")
.attr("xlink:href", "#usa");
svg.append("g")
.attr("clip-path", "url(#clip1)")
.selectAll("image")
.data(tiles1)
.enter().append("image")
.attr("xlink:href", function(d) { return "//" + ["a", "b", "c", "d"][Math.random() * 4 | 0] + ".tiles.mapbox.com/v3/landplanner.ga0g9p2n/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })
.attr("width", Math.round(tiles1.scale))
.attr("height", Math.round(tiles1.scale))
.attr("x", function(d) { return Math.round((d[0] + tiles1.translate[0]) * tiles1.scale); })
.attr("y", function(d) { return Math.round((d[1] + tiles1.translate[1]) * tiles1.scale); });
svg.append("use")
.attr("xlink:href", "#usa")
.attr("class", "stroke");
defs.append("path")
.attr("id", "can")
.datum(topojson.feature(topology, canada))
.attr("class", "land can")
.attr("d", path)
defs.append("clipPath")
.attr("id", "clip2")
.append("use")
.attr("xlink:href", "#can");
svg.append("g")
.attr("clip-path", "url(#clip2)")
.selectAll("image")
.data(tiles2)
.enter().append("image")
.attr("xlink:href", function(d) { return "//" + ["a", "b", "c", "d"][Math.random() * 4 | 0] + ".tiles.mapbox.com/v3/landplanner.ghfcid9o/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })
.attr("width", Math.round(tiles2.scale))
.attr("height", Math.round(tiles2.scale))
.attr("x", function(d) { return Math.round((d[0] + tiles2.translate[0]) * tiles2.scale); })
.attr("y", function(d) { return Math.round((d[1] + tiles2.translate[1]) * tiles2.scale); });
svg.append("use")
.attr("xlink:href", "#can")
.attr("class", "stroke");
defs.append("path")
.attr("id", "mex")
.datum(topojson.feature(topology, mexico))
.attr("class", "land mex")
.attr("d", path)
defs.append("clipPath")
.attr("id", "clip3")
.append("use")
.attr("xlink:href", "#mex");
svg.append("g")
.attr("clip-path", "url(#clip3)")
.selectAll("image")
.data(tiles3)
.enter().append("image")
.attr("xlink:href", function(d) { return "//" + ["a", "b", "c", "d"][Math.random() * 4 | 0] + ".tiles.mapbox.com/v3/landplanner.g9caodmg/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })
.attr("width", Math.round(tiles3.scale))
.attr("height", Math.round(tiles3.scale))
.attr("x", function(d) { return Math.round((d[0] + tiles3.translate[0]) * tiles3.scale); })
.attr("y", function(d) { return Math.round((d[1] + tiles3.translate[1]) * tiles3.scale); });
svg.append("use")
.attr("xlink:href", "#mex")
.attr("class", "stroke");
defs.append("path")
.attr("id", "cub")
.datum(topojson.feature(topology, cuba))
.attr("class", "land cub")
.attr("d", path)
defs.append("clipPath")
.attr("id", "clip4")
.append("use")
.attr("xlink:href", "#cub");
svg.append("g")
.attr("clip-path", "url(#clip4)")
.selectAll("image")
.data(tiles4)
.enter().append("image")
.attr("xlink:href", function(d) { return "//" + ["a", "b", "c", "d"][Math.random() * 4 | 0] + ".tiles.mapbox.com/v3/landplanner.gbn69pja/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })
.attr("width", Math.round(tiles4.scale))
.attr("height", Math.round(tiles4.scale))
.attr("x", function(d) { return Math.round((d[0] + tiles4.translate[0]) * tiles4.scale); })
.attr("y", function(d) { return Math.round((d[1] + tiles4.translate[1]) * tiles4.scale); });
svg.append("use")
.attr("xlink:href", "#cub")
.attr("class", "stroke");
});
</script>
</body>
</html>