Canvas Globe with Panning & Zooming

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.

88% match

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

87% match

Zoomable Globe with Cities on Canvas

This example presents an interactive, zoomable world globe rendered on an HTML5 Canvas. It visualizes a dataset of global cities, dynamically labeling them based on population and current zoom level. Users can pan the globe via drag and zoom with the scroll wheel, with the projection updating for a smooth experience. The visualization uses D3.js modules including `d3.geoOrthographic`, `d3.geoGraticule`, and `d3.geoPath` for map rendering, and an R-Tree for efficient label placement. Country boundaries and city data come from external JSON and CSV sources.

Globe with Panning & Zooming

This example presents an interactive orthographic globe that users can pan by dragging and zoom with the scroll wheel. The visualization renders landmasses and internal country borders, projecting the 3D sphere onto a 2D plane using d3.geoOrthographic and d3.geoPath. The globe's rotation and scale are controlled via d3.drag and d3.zoom, with panning sensitivity inversely tied to the current zoom level. World geometry comes from the visionscarto-world-atlas package, processed with topojson-client to extract features and meshes.

SShad Frigui

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.

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

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.

84% match

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.