Skip to content

Instantly share code, notes, and snippets.

Last active January 1, 2020 16:12
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save Fil/f48de8e9207799017093a169031adb02 to your computer and use it in GitHub Desktop.
Versor dragging with inertia
license: gpl-3.0

Using the d3-inertia plugin.

Original research by Philippe Rivière for

Add inertia issue #27 to versor rotation of the globe.

Includes a modified versor.js, allowing the multiplication of the final rotation by a delta to the power alpha.

Moving average for velocity (exponential decay)

Trying to plug it in as cleanly as possible into d3.drag

Try it on mobile!

<!DOCTYPE html>
<meta charset="utf-8">
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
var width = 960,
height = 500;
var projection = d3.geoOrthographic();
var canvas ="body").append("canvas")
.attr("width", width)
.attr("height", height);
var context = canvas.node().getContext("2d");
var path = d3.geoPath()
// rendering function to be populated when the features are loaded
var render = function(){};
// inertia versor dragging
var inertia = d3.geoInertiaDrag(canvas, function() { render(); }, projection);
d3.json("").then(function(world) {
var land = topojson.feature(world,;
render = function() {
context.clearRect(0, 0, width, height);
context.strokeStyle = 'black';
context.lineWidth = 2.5;
// draw a red line showing current inertia
if (typeof inertia == 'object') {
inertia.position[0] + inertia.velocity[0] / 10,
inertia.position[1] + inertia.velocity[1] / 10
inertia.position[0] + inertia.velocity[0] * inertia.t / 10,
inertia.position[1] + inertia.velocity[1] * inertia.t / 10
context.strokeStyle = "red";
var p = projection.rotate().map(d => Math.floor(10*d)/10);
context.fillText(`λ = ${p[0]}, φ = ${p[1]}, γ = ${p[2]}`, 10, 10 )
});"height", height + "px");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment