Skip to main content
SimilarExport ZIP
100%

Fork of Panning & Zooming on a Globe

✓ Published0🌍 Public
Ssophievanderhorst
Last edited Oct 11, 2022
Created on Oct 11, 2022

This example shows an interactive orthographic globe that can be panned by dragging and zoomed with the mouse wheel. Dragging rotates the projection based on drag distance and scale, while zooming adjusts the projection’s scale factor. The globe renders country boundaries from the `world-atlas` TopoJSON dataset using `d3.geoOrthographic` and `d3.geoPath`. User interaction is handled through `d3.drag` and `d3.zoom`, with rendering updating dynamically on each event.

AI-generated description

An updated version of Orthographic Zoom I.

See also iterated versions:

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Globe with Panning & Zooming

This example shows an interactive orthographic globe of the world, where users can click and drag to rotate the sphere and scroll to zoom in and out. The visualization displays country boundaries, a graticule, and an outline sphere, all rendered using the D3.js library. It leverages `d3.drag` for panning rotation and `d3.zoom` for scaling, with the globe’s projection updated via `d3.geoOrthographic` and `d3.geoPath`. Country data comes from the TopoJSON world atlas fetched from a CDN, with paths generated using `topojson.feature`.

Llingjizhu@gmail.com
93% match
Loading thumbnail…

Panning & Zooming on a Globe - old

This example shows an interactive orthographic globe that supports panning and zooming. Users drag to rotate the Earth and use the mouse wheel to scale the projection. The visualization renders world landmasses from TopoJSON data using `d3.geoOrthographic` and `d3.geoPath`. Panning is implemented with `d3.drag` to adjust the projection’s rotation, while zooming uses `d3.zoom` to modify its scale. The code also uses `d3.select` and `d3.json` to load and render the geographic features.

CCurran Kelleher
91% match
Loading thumbnail…

Fork of Globe with Panning & Zooming

This interactive visualization presents a draggable, zoomable world map on a globe projection, allowing users to pan across the globe and zoom in and out with smooth, responsive controls. It displays country boundaries, a graticule grid, and a sphere outline over a plain background. The implementation uses D3’s `geoOrthographic` and `geoEquirectangular` projections, `geoPath` for rendering, and `drag` and `zoom` behaviors to manage rotation and scale changes. Country data is loaded from a TopoJSON world atlas via `topojson-client`, with interaction states tracked in a central state object.

Llingjizhu@gmail.com
90% match
Loading thumbnail…

Globe with Panning & Zooming

This example shows an interactive orthographic globe of the world that supports panning and zooming. It displays country outlines and graticules, rendered with the d3-geo projection system and the geoPath and geoGraticule APIs. The visualization loads GeoJSON country data from a remote TopoJSON file. Users can drag to rotate the globe, which updates the projection’s rotation, and scroll to zoom, which adjusts the scale around a fitted initial view. The code relies on d3-drag and d3-zoom behaviors to handle these interactions.

NNelson M
89% match
Loading thumbnail…

Globe with Panning & Zooming

This globe shows world country boundaries projected with an orthographic projection, rendered as SVG paths. Users can pan by dragging, which adjusts the globe’s rotation, and zoom by scrolling, which changes the scale. The code uses D3’s `geoOrthographic`, `geoPath`, `geoGraticule`, `drag`, and `zoom` APIs, with TopoJSON data loaded from the visionscarto-world-atlas.

CCurran Kelleher
87% 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
87% match
Loading thumbnail…

Orthographic Zoom II

This example demonstrates panning and zooming on an orthographic globe projection, allowing users to rotate the Earth by dragging and scale it with a zoom gesture. Building on a prior version, it improves panning accuracy by accounting for latitude during the rotation adjustment. The implementation uses D3 v4 with `d3.geoOrthographic` and `d3.geoPath` for rendering, alongside `d3.drag` and `d3.zoom` for interaction. Landmasses come from the `world-110m` dataset in TopoJSON format, and the globe is drawn as SVG paths.

CCurran Kelleher
87% match
Loading thumbnail…

Orthographic Zoom III

This interactive globe displays country boundaries using an orthographic projection, panning and zooming smoothly with the mouse. During interaction, it renders the lower-resolution 110m world-atlas dataset, then switches to the higher-resolution 50m dataset once the motion stops for crisp detail. Built with D3 v4, it uses `d3.geoPath` and TopoJSON to project geographic features, with drag and zoom behaviors from `d3.drag` and `d3.zoom` controlling the globe's rotation and scale.

CCurran Kelleher
86% match