the spins (Mercator) by almccon

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.15/d3.geo.projection.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<style>
  body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
      svg { width: 100%; height: 100%; }
  path.foreground {
    fill: none;
    stroke: #9e9e9e;
    stroke-width: 1.5px;
  }
  path.graticule {
    fill: none;
    stroke: #494949;
    stroke-width: .5px;
  }
  #map .land {
    fill: #7b633c;
    stroke: #5a4f3e;
  }
  
</style>
</head>

<body>
  
  <script>
    var width = document.body.clientWidth;
    var height = document.body.clientHeight;
    var scale = 350 * height/600;
    
    var canvas = d3.select("body").append("canvas")
    .attr({
      width: width,
      height: height
    })
    var context = canvas.node().getContext("2d");
    
    var projection = d3.geo.mercator()
      .scale(scale)
      .translate([width/2, height/2])
      .rotate([0, -90])
      .clipAngle(90 - 1)
      .precision(.1)
      .rotate([100, -90])
    

    var path = d3.geo.path()
        .projection(projection)
        .context(context)
    

    
    var start = Date.now();
    var duration = 20;
    var pause = false;
    var dir = 1;
    d3.timer(function(elapsed) {

      var now = Date.now();
      if(now - start > duration) {
        start = now;
      } else {
        return false;
      }
      var deg = 1;
      var rot = projection.rotate()
      rot[0] = (rot[0] + deg)// % 360
      rot[1] = (rot[1] + deg)// % 360
 
			projection.rotate(rot)
      update()
      
      return pause;
    })
    d3.select("body").on("click", function() {
      pause = true;
    })


    var graticule = d3.geo.graticule()();

        
		var land, boundary;
    d3.json("world-110m.json", function(error,world) {
      if (error) throw error;
			land = topojson.feature(world, world.objects.land);
     	
      boundary = boundary = topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; });

      update();
    });
    
    var grats = false;
    d3.select("body").on("click", function() {
      grats = !grats;
    });
    
    context.globalAlpha = 1;
    function update() {
      context.clearRect(0, 0, width, height);
      if(grats) {
        context.beginPath();
        path(graticule);
        //context.globalAlpha = .5;
        context.strokeStyle = "#222";
        context.stroke();
      } else {        
        context.beginPath();
        path(land);
        context.fillStyle = "#222";
        context.fill();
      }
     

    }
    
    
  </script>
</body>


<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-67666917-1', 'auto');
  ga('send', 'pageview');
</script>