experiment1

<!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>
    function createMap() {
      var width = 400,
        height = 300,
        scale = 100,
        origin = {
          x: 55,
          y: -40
        };

var svg = d3.select('body').append('svg')
        .style('width', 400)
        .style('height', 300)
        .style('border', '1px lightgray solid');

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

var projection = d3.geoOrthographic()
        .scale(scale)
        .translate([width / 2, height / 2])
        .rotate([origin.x, origin.y])
        .center([0, 0])
        .clipAngle(90);

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

var graticule = d3.geoGraticule();

// zoom AND rotate
      svg.call(d3.zoom().on('zoom', zoomed));

group.call(d3.drag().on('drag', dragged));

// code snippet from https://stackoverflow.com/questions/36614251
      var λ = d3.scaleLinear()
        .domain([-width, width])
        .range([-180, 180])

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

group.append('path')
        .datum(graticule)
        .attr('class', 'graticule')
        .attr('d', geoPath);

function dragged(d) {
        var r = {
          x: λ((d.x = d3.event.x)),
          y: φ((d.y = d3.event.y))
        };
        projection.rotate([origin.x + r.x, origin.y + r.y]);
        updatePaths(svg, graticule, geoPath);
      };

function zoomed() {
        var transform = d3.event.transform;
        var k = Math.sqrt(100 / projection.scale());
        projection.scale(scale * transform.k)
        updatePaths(svg, graticule, geoPath);
      };

};

function updatePaths(svg, graticule, geoPath) {
      		
 	svg.selectAll('path.graticule').datum(graticule).attr('d', geoPath);
    };

createMap();
  </script>
</body>

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