Global zoom pan

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
      var vis = {
        w: 1000,
        h: 500,
        scale: 100,
        origin:{
          x: 55,
          y: -40
        }
      }
      
      console.log(window);
      var svg = d3.select('body').append('svg')
        .style('width', vis.w)
        .style('height', vis.h)

var group = svg.append("g").datum({
        x: 0,
        y: 0
      })

group.append('path')
    		.datum({type: 'Sphere'})
    		.attr('fill', 'lightBlue')
    	
      var projection = d3.geoOrthographic()
    		.fitExtent([[0,0], [600,600]], {type:"Sphere"})
        .scale(vis.scale)
        .translate([vis.w / 2, vis.h / 2])
        .rotate([vis.origin.x, vis.origin.y])
        .clipAngle(90);

var geoPath = d3.geoPath(projection);
      var line = {
        type: 'LineString',
        coordinates: [[-150,0],[10,10]],
      };
    
      var land = group.append("path")
        .attr('class', 'land');

var json = d3.json(
        "https://visionscarto.net/bxl/countries.geojson", 
        function(err, json){
          land.datum(json);
          render();
        }
      );

group.append('path')
      .attr('fill', 'orange')
      .datum({
        type: "MultiPoint",
        coordinates: [
          [125.8, 39]
        ]
      })
     
      // zoom AND rotate
      svg.call(d3.zoom().on('zoom', zoomed));
      group.call(d3.drag().on('drag', dragged));

var λ = d3.scaleLinear()
        .domain([-vis.w, vis.w])
        .range([-180, 180])

var φ = d3.scaleLinear()
        .domain([-vis.h, vis.h])
        .range([90, -90]);

function dragged(d) {
        var scale = projection.scale()/100;
        var r = {
          x: λ((d.x = d3.event.x)) / scale,
          y: φ((d.y = d3.event.y)) / scale
        };
        console.log(scale, r);
        projection.rotate([vis.origin.x + r.x, 
                           vis.origin.y + r.y]);
        render();
      };

function zoomed() {
        var transform = d3.event.transform;
        var k = Math.sqrt(100 / projection.scale());
        projection.scale(vis.scale * transform.k)
        render();
      };

function render() {
        group.selectAll('path')
         	.attr('d', geoPath)
      };

</script>
</body>

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