Briesemeister to Bertin1953 by fil

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  background: #fcfcfa;
  height: 500px;
  position: relative;
  width: 960px;
}
.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}
.fill {
  fill: #fff;
}
.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
}
.land {
  fill: #222;
}
.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}
  #options {position: absolute; top: 0; left:0}
  #options label { display: block }
</style>
<body>
  <div id=options>
  <label><input type=checkbox id=hammer /> Aspect Ratio: 1.68 (1.75 for Briesemeister)</label>
  <label><input type=checkbox id=rotate /> Rotation</label>
  <label><input type=checkbox id=western /> West warp</label>
  <label><input type=checkbox id=south /> South warp</label>
  <label><input type=checkbox id=north /> North warp</label>
  </div>
</body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/d3-geo-projection"></script>
<script src="https://unpkg.com/topojson"></script>
<script>
  
  d3.selectAll('#options input')
  .on('change', function() {
    parm[d3.select(this).attr('id')] =  this.checked;
    draw();
  })
  
var width = 960,
    height = 500;

    // import from math
  var sin = Math.sin, cos = Math.cos, pi = Math.PI;
  
  var parm = {
    hammer: false,
    western: false,
    south: false,
    shoulders: false,
    rotate: false
  };
  
  var visionscarto_bertin_1953_alpha3 = function (lambda, phi) {

    // import from d3-geo-projection
    var hammer = d3.geoHammerRaw(parm.hammer ? 1.68 : 1.75, 2);

    var vector, e, p, fu = -1.4;

    // Western hemisphere fix pre-projection
    if (parm.western)
    if (lambda + phi < fu) {
      vector = [ 1, - 0.8 * sin(phi + pi/2)];
      e = (lambda - phi + 1.6) * (lambda + phi - fu) / 8;
      lambda += e * vector[0];
      phi += e * vector[1];
    }
    
    p = hammer(lambda, phi);

    // Fix post-projection
    e = (1 - cos(lambda * phi)) / 12;

    // South
    if (parm.south)
      if (p[1] < 0) {
        p[0] *= 1 + e;
    }

    // North
    if (parm.north)
    if (p[1] > 0) {
        p[1] *= 1 + e / 1.5 * p[0] * p[0];
    }

    return p;
  };
  
var projection = d3.geoProjection(visionscarto_bertin_1953_alpha3);
var path = d3.geoPath(projection);
var graticule = d3.geoGraticule();
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
svg.append("defs").append("path")
    .datum({type: "Sphere"})
    .attr("id", "sphere")
    .attr("d", path);
svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");
svg.append("use")
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");
svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);
d3.json("world-110m.json", function(error, world) {
  if (error) throw error;
  svg.insert("path", ".graticule")
      .datum(topojson.feature(world, world.objects.land))
      .attr("class", "land")
      .attr("d", path);
});

draw();
  
function draw() {
   
    if (parm.rotate)
      projection.rotate([-16.5, -42]).center([7,0])
    else
      projection.rotate([-10, -45]).center([0,0])
    
    svg.selectAll("path")
   .attr("d", path)
  }
</script>