Versor Dragging II

100%

Versor Dragging II

✓ Published0🌍 Public

Last edited Jul 25, 2019

Created on Jan 18, 2017

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.

AI-generated description

Inspired by ivyywang and Jason Davies. See the orthographic version.

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

92% 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

86% match

Loading thumbnail…

Versor dragging with inertia

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.

PPhilippe Rivière

86% match

Loading thumbnail…

World Map Rotation

This example presents an orthographic world map that users can rotate by dragging with the mouse. The map renders country boundaries from TopoJSON data using D3’s `geoOrthographic` projection and `geoPath`, with a graticule overlay and interactive hover highlighting on countries. Rotation is implemented through React state updates triggered by D3 drag events, using the `versor` library to compute quaternion-based rotations for smooth, intuitive globe manipulation. The visualization demonstrates a React component integrating D3’s drag behavior, projection system, and geographic data loading via hooks.

MMarco Costa

83% 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

82% 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

79% 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

79% 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