Versor dragging

const canvas = document.createElement("canvas");
canvas.width = width * devicePixelRatio;
canvas.height = height * devicePixelRatio;
canvas.style.width = `${width}px`;
const context = canvas.getContext("2d");
context.scale(devicePixelRatio, devicePixelRatio);
const path = d3.geoPath(projection, context);

d3.select(canvas)
  .call(drag(projection)
      .on("drag.render", () => render(land110))
      .on("end.render", () => render(land50)))
  .call(() => render(land50));

display(canvas);

function render(land) {
  context.clearRect(0, 0, width, height);
  context.beginPath(), path(sphere), context.fillStyle = "#fff", context.fill();
  context.beginPath(), path(graticule), context.strokeStyle = "#ddd", context.stroke();
  context.beginPath(), path(land), context.fillStyle = "#000", context.fill();
  context.beginPath(), path(sphere), context.strokeStyle = "#000", context.stroke();
}

function drag(projection) {
  let v0, q0, r0, a0, l;

  function pointer(event, that) {
    const t = d3.pointers(event, that);

    if (t.length !== l) {
      l = t.length;
      if (l > 1) a0 = Math.atan2(t[1][1] - t[0][1], t[1][0] - t[0][0]);
      dragstarted.apply(that, [event, that]);
    }

    // For multitouch, average positions and compute rotation.
    if (l > 1) {
      const x = d3.mean(t, (p) => p[0]);
      const y = d3.mean(t, (p) => p[1]);
      const a = Math.atan2(t[1][1] - t[0][1], t[1][0] - t[0][0]);
      return [x, y, a];
    }

    return t[0];
  }

  function dragstarted({x, y}) {
    v0 = versor.cartesian(projection.invert([x, y]));
    q0 = versor(r0 = projection.rotate());
  }

  function dragged(event) {
    const v1 = versor.cartesian(projection.rotate(r0).invert([event.x, event.y]));
    const delta = versor.delta(v0, v1);
    let q1 = versor.multiply(q0, delta);

    // For multitouch, compose with a rotation around the axis.
    const p = pointer(event, this);
    if (p[2]) {
      const d = (p[2] - a0) / 2;
      const s = -Math.sin(d);
      const c = Math.sign(Math.cos(d));
      q1 = versor.multiply([Math.sqrt(1 - s * s), 0, 0, c * s], q1);
    }

    projection.rotate(versor.rotation(q1));

    // In vicinity of the antipode (unstable) of q0, restart.
    if (delta[0] < 0.7) dragstarted.apply(this, [event, this]);
  }

  return d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged);
}

const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, sphere)).bounds(sphere);
const height = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), height);
projection.scale(projection.scale() * (l - 1) / l).precision(0.2);

const sphere = {type: "Sphere"};
const graticule = d3.geoGraticule10();
const land50 = FileAttachment("data/land-50m.json").json().then((world) => topojson.feature(world, world.objects.land));
const land110 = FileAttachment("data/land-110m.json").json().then((world) => topojson.feature(world, world.objects.land));

import versor from "npm:versor";