index.js
import * as d3 from 'd3';
import { feature } from 'topojson';
let projection = d3.geoOrthographic();
const svg = d3.select('svg');
const graticule = d3.geoGraticule();
let pathGenerator = d3.geoPath(projection);
var bounds = {W: -5.0, N: 50.0, E: 10.0, S: 40.0 };
let arc = d3.geoGraticule().extentMajor([[bounds.W, bounds.S], [bounds.E, bounds.N]]);
const g = svg.append('g');
g.append('path')
.attr('class', 'sphere')
.attr('d', pathGenerator({ type: 'Sphere' }));
g.append('path')
.datum(graticule)
.attr('class', 'graticule')
.attr('d', pathGenerator);
g.append('path')
.attr('class', 'rect')
.attr('d', pathGenerator(arc.outline()))
g.call(
d3.drag().on('drag', (event, d) => {
const rotate = projection.rotate();
const k = 75 / projection.scale();
projection.rotate([
rotate[0] + event.dx * k,
rotate[1] - event.dy * k,
]);
pathGenerator = d3.geoPath().projection(projection);
g.selectAll('.graticule').attr('d', pathGenerator);
g.selectAll('path').attr('d', pathGenerator);
