Poor man's Composite projection

forked from Fil's block: Poor man's Composite projection

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.js"></script>
  <script src="https://d3js.org/d3-geo-projection.v2.js"></script>
  <script src="https://d3js.org/topojson.v2.min.js"></script>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)

svg.on('mousemove', function(){
      var m = d3.mouse(this);
      point.datum({
        type:"Point",
        coordinates: projection.invert(m)
      })
    })
    var path = function(d) {
      return paths.map(p => p(d))
      .filter(d => !!d)
      .join("") || null; 
    }
      
    svg.append("path")
    .attr("id", "sphere")
    .datum({type: "Sphere"})
    .attr('d', d3.geoPath(d3.geoOrthographic()))
    
    svg.append("path")
    .datum(d3.geoGraticule()())
.classed('composite', true)

var land = svg.append("path")
.attr('id', 'land')
.classed('composite', true);
    
        var point = svg.append("path")
    .attr('id', "invert")
    .classed('composite', true)
    .datum({ type:"Point", coordinates: [1,2] })

d3.json("https://unpkg.com/world-atlas@1/world/110m.json", function(
  error,
  world
) {
    land.datum(topojson.merge(world, world.objects.countries.geometries));
       }
);
       
    if (1)
    d3.timer(_ => {
      projections[0].rotate([_/100, 0])
      projections[1].rotate([30, _/100, -_/100])
      projections[2].rotate([_/100, 0, -_/100])
      projections[3].rotate([_/100, _/100, _/100])
      svg.selectAll('path.composite')
         .attr("d", path);
    })
  </script>
</body>

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

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

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