Versor dragging with inertia

100%

Versor dragging with inertia

✓ Published0🌍 Public

Last edited Jan 1, 2020

Created on Oct 4, 2017

This example demonstrates an orthographic globe with versor dragging inertia, allowing the map to glide smoothly when released. It uses the `d3.geoInertiaDrag` plugin to apply exponential decay to the user’s drag velocity, and red lines visualize the current inertia vector. The globe renders world landmasses from TopoJSON onto a Canvas, with the current rotation angles (λ, φ, γ) displayed in the corner. The code relies on `d3.geoOrthographic`, `d3.geoPath`, and the `versor` library for quaternion-based rotation.

AI-generated description

Using the d3-inertia plugin.

Original research by Philippe Rivière for visionscarto.net.

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!

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Versor Dragging

This example demonstrates an orthographic globe rendered on Canvas that users can rotate by dragging with the mouse. Using a versor-based rotation technique, the globe’s orientation updates smoothly in response to drag gestures, avoiding the gimbal-lock issues of standard Euler angles. The code employs `d3.geoOrthographic` and `d3.geoPath` to project and draw the world, loading land polygons from the World Atlas TopoJSON dataset. The interaction is handled through `d3.drag`, while the custom `versor.js` library computes quaternion rotations for seamless, intuitive navigation.

Mmbostock

90% match

Loading thumbnail…

Versor Dragging - d3 & three.js running in sync

This example demonstrates a synchronized 3D globe using d3 and Three.js, controlled by a single drag gesture on a 2D orthographic projection. It shows how versor (quaternion) math maps mouse movement to a sphere’s rotation, updating both the d3 geographic paths and the Three.js mesh sphere in real time. The code uses `d3.geoOrthographic`, `d3.geoPath`, and the custom `versor.js` library for quaternion calculations. It renders land polygons from world-atlas data on a Canvas while Three.js draws a shaded sphere on a separate layer.

PPhilippe Rivière

87% match

Loading thumbnail…

Versor Dragging II

This example demonstrates interactive rotation of a world map using versor dragging, allowing the map to spin smoothly in any direction. It uses a Mercator projection rendered onto a Canvas element, with land geometry from the World Atlas TopoJSON dataset. The interaction relies on d3.drag and custom versor quaternion math—provided in a separate versor.js file—to compute rotation deltas between mouse positions, avoiding the gimbal-lock issues of simpler Euler-angle approaches. The map is drawn with d3.geoPath using the canvas context.

Mmbostock

86% match

Loading thumbnail…

Globe Rotation

This example uses a D3 orthographic projection to render a rotating globe, showing country boundaries and a semi-transparent graticule over a blue sphere. A user can drag to rotate the globe, with the rotation state updated via a custom `versorDrag` handler that leverages the `versor` library for quaternion-based rotation. Geographic data comes from the world-atlas TopoJSON files (110m and 50m resolution) loaded through `d3.json` and converted to features with `topojson.feature`. The visualization is built as a React component using SVG, with the drag interaction managed through D3’s `drag` and `geoPath` methods.

MMarco Costa

80% match

Loading thumbnail…

Fork of D3 map drag demo

This example shows an interactive orthographic globe rendered with SVG, where users can drag to rotate the Earth and see country boundaries and graticule lines. The code uses `d3.geoOrthographic` for projection and `d3.geoPath` to draw geographic features from TopoJSON data sourced from the world-atlas package. Drag events update the projection’s rotation, while zoom is handled via `d3.zoom`. Country names are loaded from a TSV file and displayed as tooltips using SVG `<title>` elements.

RrayaneB0t

78% match

Loading thumbnail…

D3 map drag demo

This example presents an interactive orthographic globe rendered with SVG. Users can click and drag to rotate the projection, which dynamically updates the graticule and country boundaries. The visualization uses d3.geoOrthographic, d3.geoPath, d3.zoom, and d3.drag to handle the interaction. Country polygons come from the world-atlas TopoJSON dataset, with names from the accompanying TSV file displayed as tooltips.

JJacob Philpott

77% match

Loading thumbnail…

Fork of Globe Rotation

This example shows an interactive orthographic world map that users can drag to rotate, with the globe responding fluidly to pointer movement. The visualization renders country boundaries and graticules using React and D3’s `geoOrthographic` projection, while `geoPath` draws the sphere and grid lines. Drag interactions are handled with D3’s `drag` event system and the `versor` library, which computes quaternion rotations to update the projection’s rotation state via `setRotation`. The map’s data comes from the `world-atlas` TopoJSON files (110m and 50m resolutions), loaded asynchronously with D3’s `json` and converted to GeoJSON features using `topojson.feature`.

AAnujbhatt26

77% match

Loading thumbnail…

D3 map drag demo

This demo displays an interactive orthographic globe where users can click and drag to rotate the Earth, with country boundaries rendered as SVG paths and tooltips revealing country names on hover. The sphere, graticule, and countries are drawn using d3.geoPath with a d3.geoOrthographic projection, while rotation is handled manually through d3.drag events that adjust the projection’s rotate values. Country geometries come from the world-atlas TopoJSON dataset (50m resolution) paired with a TSV file for name lookups, and the visualization also supports d3.zoom for additional transformations.

GGlebenator

76% match