D3 Examples - "infinite" map using d3...performance degrades too much, but interesting to see how it looks.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body{
  padding:0px;
  margin:0px;
}
​
path {
  stroke: white;
  stroke-width: 0.25px;
}
​
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>
​
var width = 900
var height = 600
​
var projection1 = d3.geo.mercator()
    .scale((width + 1) / 2 / Math.PI)
    .translate([width / 2, height / 2])
    .precision(.1);
​
var projection2 = d3.geo.mercator()
    .scale((width + 1) / 2 / Math.PI)
    .translate([width*1.5, height / 2])
    .precision(.1);
​
var projection3 = d3.geo.mercator()
    .scale((width + 1) / 2 / Math.PI)
    .translate([-width/2, height / 2])
    .precision(.1);
​
var path1 = d3.geo.path()
    .projection(projection1);
​
var path2 = d3.geo.path()
    .projection(projection2);
​
var path3 = d3.geo.path()
    .projection(projection3);
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
​
var g1 = svg.append("g").attr("class", "active")
var g2 = svg.append("g").attr("class", "active")
var g3 = svg.append("g").attr("class", "active")
​
d3.json("https://gist.github.com/l-r/7952739#file-world-110m2-json", function(error, world) {
      g1.append("path")
      .datum(topojson.feature(world, world.objects.countries))
      .attr("d", path1);
​
      g2.append("path")
      .datum(topojson.feature(world, world.objects.countries))
      .attr("d", path2);
​
      g3.append("path")
      .datum(topojson.feature(world, world.objects.countries))
      .attr("d", path3);
​
});
​
var zoom1 = d3.behavior.zoom()
    .on("zoom",function() {
        g1.attr("transform","translate("+ 
        d3.event.translate.join(",")+")scale("+d3.event.scale+")")
        g1.selectAll("path")  
        .attr("d", path1.projection(projection1))
​
        g2.attr("transform","translate("+ 
        d3.event.translate.join(",")+")scale("+d3.event.scale+")")
        g2.selectAll("path")  
        .attr("d", path2.projection(projection2))
​
        g3.attr("transform","translate("+ 
        d3.event.translate.join(",")+")scale("+d3.event.scale+")")
        g3.selectAll("path")  
        .attr("d", path3.projection(projection3))
​
  });
        
svg.call(zoom1)
​
</script>
    