Globe Rotation

100%

Globe Rotation

✓ Published1🌍 Public

Last edited Aug 25, 2022

Created on Aug 25, 2022

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.

AI-generated description

Drag rotate a D3 world map with React

MIT Licensed

Similar vizzes

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

90% match

Loading thumbnail…

GLOBE

This interactive visualization presents a rotatable 3D orthographic globe of the world using D3.js and React. Users can drag the globe to explore different regions, with rotation applied via the versorDrag helper and d3.drag. The map displays country boundaries from TopoJSON world-atlas data (110m and 50m resolutions), rendered as SVG paths with hover highlighting. A graticule overlays the sphere to show latitude and longitude lines, while the projection updates dynamically through React state and d3.geoOrthographic.

AAnujbhatt26

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

88% match

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

87% match

Loading thumbnail…

Rotating Globe

This example shows a continuously rotating orthographic globe, with country outlines and a graticule drawn over a dark ocean. The globe is interactive, allowing users to pan and zoom via a d3.zoom handler that applies a transform to the SVG group. The rotation is driven by a d3.timer that updates the d3.geoOrthographic projection’s rotation, while d3.geoPath renders the sphere, graticule, and land masses from World Atlas TopoJSON and TSV data. The visualization uses SVG with hover highlights on countries.

Ddarinadii11

86% match

Loading thumbnail…

Rotating Globe

A rotating orthographic globe displays country boundaries and graticules, with land masses that change color on hover. The visualization uses D3 v5’s `geoOrthographic`, `geoPath`, and `geoGraticule` with a timer to continuously adjust the projection rotation. World map data comes from the World Atlas TopoJSON, while country names are loaded from a TSV file. Zooming is enabled via D3’s `zoom` behavior, and all rendering uses SVG paths.

Zzahra929

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

86% match

Loading thumbnail…

Globe with panning & zooming

This example presents an interactive globe that users can pan and zoom, rendered using a D3 orthographic projection. Landmasses and internal country borders are drawn from the visionscarto-world-atlas TopoJSON dataset via `d3.geoOrthographic` and `geoPath`. The globe responds to drag interactions for rotation and mouse-wheel zoom events, adjusting the projection’s rotation and scale through `d3.drag` and `d3.zoom` handlers. A fitted initial view establishes the default scale, while the sphere, land, and country-mesh features are styled via CSS classes.

SShad Frigui

85% match