the spins

Admiring Jason Davies' work on the Weichel projection

forked from enjalot's block: visualizing map distortion

forked from enjalot's block: d3.geo.weichel

<!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: #d7c7ad;
    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.wiechel()
      .scale(scale)
      .translate([width/2, height/2])
      .rotate([0, -90])
      .clipAngle(180 - 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 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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.15/d3.geo.projection.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js