visualizing map distortion d3v4 (with Bertin and a forked d3-geo for inverse) [UNLISTED]

Ported to d3v4 by Philippe Rivière from Ian Johnson's block: visualizing map distortion

I'm using a fork of d3-geo that allows inverse projections on all projections (see d3-geo-projection issue #85).

@enjalot: Whenever we try to represent our 3D earth on a 2D map we necessarily introduce distortion. This tool attempts to visualize the phenomenon.

Inspiration

Original prompt by @curran
Bounding box solution by @tyrasd

References

projection comparison
map zoom

forked from Fil's block: visualizing map distortion d3v4

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="d3-geo.js"></script>
<script src="//d3js.org/d3-geo-projection.v2.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<style>
  svg {
    margin: 22px;
  }
  select {
    margin-left: 20px;
  }
  path.foreground {
    fill: none;
    stroke: #333;
    stroke-width: 1.5px;
  }
  path.graticule {
    fill: none;
    stroke: #aaa;
    stroke-width: .5px;
  }
  #left {
    cursor: move;
  }
  #left .land {
    fill: #d7c7ad;
    stroke: #a5967e;
  }
  #right .land {
    fill: #cfcece;
    stroke: #a5967e;
  }
  
  #left circle {
    fill: #d8355e;
  }
  #right circle {
    stroke: #d8355e;
    fill: none;
  }
</style>
</head>

<body>
  <svg id="left"></svg>
  <svg id="right"></svg>
  <select></select>
  
  <script>
  // import from math
  var sin = Math.sin, cos = Math.cos, pi = Math.PI;
  
  // import from d3-geo-projection
  var hammerRaw = d3.geoHammerRaw;
  
  var visionscarto_bertin_1953_alpha3 = function (λ, φ) {
    var fu = 1.4;
    if (λ + φ < -fu) {
        var u = (λ - φ + 1.6) * (λ + φ + fu) / 8;
        λ += u;
        φ -= 0.8 * u * sin(φ + pi/2);
    }

var r = hammerRaw(1.68, 2)(λ, φ);

var k = 12,
        d = (1 - cos(λ * φ)) / k;

if (r[1] < 0) {
        r[0] *= 1 + d;
    }
    if (r[1] > 0) {
        r[1] *= 1 + d / 1.5 * r[0] * r[0];
    }
    return r;
};

(d3.geoVisionscarto = (function () {
    return d3.geoProjection(visionscarto_bertin_1953_alpha3)
        .rotate([-16.5, -42]);
}));
  
    
    function dot(a, b) {
      for (var i = 0, n = a.length, s = 0; i < n; ++i) s += a[i] * b[i];
      return s;
    }

var pathLeft = d3.geoPath()
        .projection(projectionLeft);
    var pathRight = d3.geoPath()
        .projection(projectionRight);
    
    function zoomed() {
      projectionLeft
          .translate([d3.event.transform.x, d3.event.transform.y])
          .scale(d3.event.transform.k)
      
      var newCenter = projectionLeft.invert([map_width/2,map_height/2]);
      //projectionRight .rotate([-newCenter[0], -newCenter[1]])

update();
    }
    
    function update() {
      d3.selectAll("#right path.distortion")
        //.attr('stroke', d => fillScale(distortion(projectionLeft, d.coordinates).angular))
      .attr('fill', d => strokeScale(distortion(projectionLeft, d.coordinates).areal))
      .attr('opacity', 0.5)
      .on('mouseover', d => console.log(distortion(projectionLeft, d.coordinates)));
      
      d3.selectAll("#left path")
          .attr("d", pathLeft);
      d3.selectAll("#right path")
          .attr("d", pathRight);
      
      d3.selectAll("#left circle")
      .attr('transform', function(d,i) {
        return 'translate(' + [ d.x, d.y ] + ')';
      })
      
      d3.selectAll("#right circle")
      .attr('transform', function(d,i) {
        try {
          var latlon = projectionLeft.invert([d.x, d.y])
          return 'translate(' + projectionRight(latlon) + ')';
        } catch(e) {
          return 'translate(-100,-100)';
        }
      })

}
    
    var strokeScale = d3.scaleLog()
    .domain([1,37,300])
    .range(['blue', 'white', 'orange']);
    var fillScale = d3.scaleLinear()
    .domain([0,0.6, 1])
    .range(['white', 'green', 'black']);

var graticule = d3.geoGraticule();
    var svgLeft = d3.select("#left")
        .attr("width", map_width)
        .attr("height", map_height);
    var svgRight = d3.select("#right")
        .attr("width", map_width + 40)
        .attr("height", map_height);

svgLeft.append("path")
        .datum(graticule)
        .attr("class", "graticule")
        .attr("d", pathLeft);
    
    svgRight.append("path")
        .datum(graticule)
        .attr("class", "graticule")
        .attr("d", pathRight);

d3.json("world-110m.json", function(error,world) {
      if (error) throw error;

svgLeft.insert("path", ".graticule")
          .datum(topojson.feature(world, world.objects.land))
          .attr("class", "land")
          .attr("d", pathLeft);
      
      svgRight.insert("path", ".graticule")
          .datum(topojson.feature(world, world.objects.land))
          .attr("class", "land")
          .attr("d", pathRight);
      
      var points = generateRect(100, 25, 25, map_width - 50, map_height - 50);
      
      var distortion = d3.merge(
        d3.range(-89, 89, 4)
        .map(lat => d3.range(-179, 180, 10 / Math.ceil(0.1 + 3 * Math.cos(lat * Math.PI / 180)))
            .map((lon) => ({type:'Point', coordinates:[lon, lat]})))
                                );
      
      svgLeft.selectAll("circle")
        .data(points)
        .enter().append("circle")
        .attr('r', 3)
      
      svgRight.selectAll("circle.points")
        .data(points)
        .enter().append("circle")
        .attr('r', 2)
        .attr('class', 'points')
      
      svgRight.selectAll("path.distortion")
        .data(distortion)
        .enter().append("path")
        .attr('class', 'distortion');

svgLeft
        .call(zoom)
        .call(
          zoom.transform,
           d3.zoomIdentity.translate(map_width/2,map_height/2)
           .scale(scale0)
        )
      ;
    });
    
    var selector = d3.select("select")
    selector.selectAll("option")
      .data(Object.keys(projections))
      .enter().append("option")
      .attr('value', function(d) { return d }).text(function(d) { return d })
    
    selector.on("change", function(d) {
      console.log("sup", d3.event)
      var proj = d3.event.target.selectedOptions[0].value;
      projectionLeft = projections[proj].center(center);
      pathLeft = d3.geoPath()
        .projection(projectionLeft);
      svgLeft
        .call(zoom)
        .call(
          zoom.transform,
           d3.zoomIdentity.translate(map_width/2,map_height/2)
           .scale(scale0)
        )
      ;
    })
    
    
    function generateRect(num, x, y, width, height) {
      var points = []
      var sideNum = Math.floor(num/4) + 1;
      // top
      d3.range(sideNum).forEach(function(i) {
        points.push({ x: x + i * width/sideNum, y: y })
      })
      // right
      d3.range(sideNum).forEach(function(i) {
        points.push({ x: x + width, y: y + i * height/sideNum })
      })
      // bottom
      d3.range(sideNum).forEach(function(i) {
        points.push({ x: x + width - i * width/sideNum, y: y + height })
      })
      // left
      d3.range(sideNum).forEach(function(i) {
        points.push({ x: x, y: y + height - i * height/sideNum })
      })
      return points;
    }
    
  </script>
</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-geo-projection.v2.min.js

https://d3js.org/topojson.v1.min.js