Submarine Cable Map (pseudo-Cahill Projection) [UNLISTED]

Porting geraldarthur's block: Submarine Cable Map (Cahill Projection) to d3v4 & trying to go closer to the original.

Inspired by Bernard J. S. Cahill's butterfly map of San Francisco trade routes.

Forked from mbostock's Waterman Polyhedron and using data from submarinecablemap.com.

forked from geraldarthur's block: Submarine Cable Map (Cahill Projection)

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  background: #fcfcfa;
}
  
#clip {
  fill: none;
  stroke: #000;
  stroke-width: px;
}

.stroke {
  fill: none;
  stroke: #fff;
  fill: 10px;
}

.fill {
  fill: #d9e6e3;
}

.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
}

.sphere0 {
  fill: none;
  stroke: #222;
  stroke-width: 18px;
  stroke-opacity: .9;
}
.sphere1 {
  fill: none;
  stroke: white;
  stroke-width: 12px;
  stroke-opacity: 1;
}
.sphere {
  fill: none;
  stroke: black;
  stroke-width: .7px;
  stroke-opacity: 1;
}

.land {
  fill: #e4c0b8;
}
  
  .poles { fill: white }

.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}

.telegeography {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: 0.7;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.js"></script>
<script>

var width = 960,
    height = 550,
    m = 12;

var projection = d3.geoPolyhedralWaterman()
    .rotate([112.5, 0])
    .fitExtent([[m,m], [960-m, 550-m]], {type:"Sphere"})
    .translate([width / 2, height / 2])
    .precision(.1);

var path = d3.geoPath()
    .projection(projection);

var graticule = d3.geoGraticule().step([15, 10]).extentMajor([[-180,-80.01], [180, 80.01]]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var defs = svg.append("defs");

defs.append("path")
    .datum({type: "Sphere"})
    .attr("id", "sphere")
    .attr("d", path);

svg.append("path")
    .datum({type: "Sphere"})
    .attr("class", "sphere0")
    .attr("d", path);
svg.append("path")
    .datum({type: "Sphere"})
    .attr("class", "sphere1")
    .attr("d", path);

defs.append("clipPath")
    .attr("id", "clip")
  .append("use")
    .attr("xlink:href", "#sphere");

svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");

svg.append("use")
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");

var poles = {
    type: "FeatureCollection",
    features: [ {
      type: "Feature",
      geometry: d3.geoCircle().center([0,90]).radius(9.7)()
    },
    {
      type: "Feature",
      geometry: d3.geoCircle().center([0,-90]).radius(9.7)()
    }
    ]
  };

// North Pole under the land
svg.append("path")
    .datum(poles.features[0])
    .attr("class", "poles")
    .attr("clip-path", "url(#clip)")
    .attr("d", path);

svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("clip-path", "url(#clip)")
    .attr("d", path);

// South Pole over the land
svg.append("path")
    .datum(poles.features[1])
    .attr("class", "poles")
    .attr("clip-path", "url(#clip)")
    .attr("d", path);
  
svg.append("path")
    .datum({type: "Sphere"})
    .attr("class", "sphere")
    .attr("d", path);

d3.json("https://gist.githubusercontent.com/geraldarthur/73f8beefbbe424259d13/raw/4ed432ef09ba08ce32108cca702a6e347dda5d8a/world-cables-50m.json", function(error, world) {
  if (error) throw error;

svg.insert("path", ".graticule")
      .datum(topojson.feature(world, world.objects.land))
      .attr("class", "land")
      .attr("clip-path", "url(#clip)")
      .attr("d", path);

svg.insert("path", ".graticule")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
      .attr("class", "boundary")
      .attr("clip-path", "url(#clip)")
      .attr("d", path);
  
  svg.insert("path", ".graticule")
  		.datum(topojson.feature(world, world.objects.cables))
  		.attr("class", "telegeography")
  		.attr("clip-path", "url(#clip)")
  		.attr("d", path);
  		
});

d3.select(self.frameElement).style("height", height + "px");

</script>

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

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

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