https://github.com/d3/versor
a home for Mike Bostock's versor.js
https://github.com/d3/versor
d3 d3-geo quaternion rotation versor
Last synced: 7 months ago
JSON representation
a home for Mike Bostock's versor.js
- Host: GitHub
- URL: https://github.com/d3/versor
- Owner: d3
- License: isc
- Created: 2017-11-06T11:21:42.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-07-18T20:28:09.000Z (almost 3 years ago)
- Last Synced: 2025-01-30T15:25:27.550Z (over 1 year ago)
- Topics: d3, d3-geo, quaternion, rotation, versor
- Language: JavaScript
- Size: 166 KB
- Stars: 34
- Watchers: 7
- Forks: 12
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: COPYING
Awesome Lists containing this project
README
# Versor
Rotate the globe with the mouse.
The naïve method uses `mouse.x` and `mouse.y` as proxies for longitude and latitude. It works when the rotation is small, but try to put the globe "upside-down" and suddenly moving the mouse to the left rotates the globe to the right, and vice versa.
The correct solution is to track the spherical coordinates of the point that is under the mouse, and apply a rotation to the globe that will move the initial point to the current mouse position. Computing that rotation involves quaternions.
This method, introduced by [Jason Davies](https://www.jasondavies.com/maps/rotate/) and Mike Bostock, is called [versor dragging](https://gist.github.com/mbostock/7ea1dde508cec6d2d95306f92642bc42).
This module contains the quaternion & versor functions. For a directly usable package, see [d3-inertia](https://github.com/Fil/d3-inertia).
In Node:
```js
const versor = require("versor");
// interpolate angles (slerp), see https://observablehq.com/@d3/world-tour
versor.interpolate(rotation0, rotation1); // function of (t)
// quaternion to rotate between p0 and p1, see d3-inertia
const p0 = [0, 0],
p1 = [90, 0],
c0 = versor.cartesian(p0),
c1 = versor.cartesian(p1);
versor.delta(c0, c1); // [0.7071, 0.7071, 0, 0]
// tweening: quaternion to rotate halfway between p0 and p1
versor.delta(c0, c1, 0.5); // [0.9239, 0.3827, 0, 0]
// utilities
// get cartesian coordinates [x, y, z] given spherical coordinates [λ, φ].
versor.cartesian = function(e) {
var l = e[0] * radians, p = e[1] * radians, cp = cos(p);
return [cp * cos(l), cp * sin(l), sin(p)];
};
// create a quaternion from Euler angles
const q0 = versor([90,0,0]); // [0.7071068, 0.7071068, 0, 0]
const q1 = versor([0,90,0]); // [0.7071068, 0, 0.7071068, 0]
// the quaternion that represents q0 * q1.
q01 = versor.multiply(q0, q1); // [0.5, 0.5, 0.5, 0.5]
// Euler rotation angles [λ, φ, γ] for the given quaternion.
versor.rotation(q01); // [90, 0, 90]
```
If you use npm, `npm install versor`. You can also download the [latest release on GitHub](https://github.com/d3/versor/releases/latest). For vanilla HTML in modern browsers, import versor from Skypack:
```html
import versor from "https://cdn.skypack.dev/versor@0.2";
const t = versor([90,0,0]);
```
For legacy environments, you can load versor’s UMD bundle from an npm-based CDN such as jsDelivr; a `versor` global is exported:
```html
versor([90,0,0]);
```