D3 Examples - Furuti 3 - projection.clipPolygon()

Furuti 3 - projection.clipPolygon()

Forked from Fil's gist and made it minimalist:

removed all but sphere

filled sphere to give a visual clue when it is "interruped"

Fil's gist is about:

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    .sphere {
      fill: blue;
      stroke: black;
      stroke-width: 2px;
    }
  </style>
  <title>Super-minimalist Furuti 3</title>
</head>
<body>
  <script src="https://d3js.org/d3.v4.min.js"></script> 
  <script src="d3-geo.js"></script> 
  <script src="d3-geo-projection.js"></script> 
  <script src="versor.js"></script>
  <script>
    var width = 960, height = 500;
    var scaleProj = Math.min(width/2, height)/Math.PI;
​
    // I confess I quickly hacked Furuti3 into PolyhedralButterfly
    var projection = d3.geoPolyhedralFuruti3();
    var path = d3.geoPath().projection(projection);
​
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
​
    var movable = svg.append("g");
​
    svg.append('path')
      .datum({type: "Sphere"})
      .attr("class", "sphere")
      .attr('d', path);
</script>
</body>
</html>
    