Fork of Globe with Panning & Zooming

100%

Fork of Globe with Panning & Zooming

✓ Published0🌍 Public

Last edited Mar 27, 2024

Created on Mar 27, 2024

Forked from 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`.

AI-generated description

A globe with panning and zooming.

MIT Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Fork of Panning & Zooming on a Globe

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.

Ssophievanderhorst

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

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

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

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

88% match

Loading thumbnail…

Fork of Globe Zoom - Animate

This interactive globe visualization allows users to explore geographic data through an animated, zoomable Earth. It presents a globe that automatically rotates, with countries rendered as filled polygons and graticules shown as lines. The visualization uses a custom fork of the D3 v3 library, integrating `d3.geo.orthographic` projection, `d3.geo.path` for rendering, and `d3.geo.zoom` for interactive panning and scaling. Data is loaded from external CSV files and displayed as colored points on the globe, with tooltips providing details on hover. The interface includes menu buttons for switching between different map projections and datasets, all styled with a dark theme and CSS animations.

MMinh Nguyen

88% match

Loading thumbnail…

Fork of Globe Zoom - Animate

This interactive visualization combines a geographic globe with animated scatterplot transitions. Users can switch between orthographic, Winkel, and Mercator projections while zooming and rotating the globe through mouse interactions. The visualization uses d3.geo.path with d3.geo.orthographic, d3.geo.winkel3, and d3.geo.mercator projections, along with d3.behavior.zoom for navigation. It displays land masses from TopoJSON world-atlas data with graticules and country boundaries, overlaid with circular marks representing dataset values. The interface includes buttons for projection and dataset selection, with tooltips and a color legend provided by d3.tip and d3-legend.

PPiotr Paszek

87% match