Wolrd Cities WIP (Globe with Panning & Zooming)

100%

Wolrd Cities WIP (Globe with Panning & Zooming)

✓ Published0🌍 Public

Last edited Sep 5, 2024

Created on Sep 5, 2024

Forked from Globe with Panning & Zooming

This example displays a navigable globe with panning and zooming, using a D3 orthographic projection to render landmasses and cities with a population over 50,000. It loads geographic data from the visionscarto-world-atlas and city data from a CSV sourced from the World Cities Database. The `d3.drag` behavior adjusts the globe’s rotation, while `d3.zoom` scales it, with each interaction updating the projection via `d3.geoOrthographic` and `geoPath`.

AI-generated description

A globe with panning and zooming showing cities with population of 50K or more using the World Cities Database.

MIT Licensed

Similar vizzes

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

86% match

Loading thumbnail…

World Cities WIP (Spinning Globe)

A spinning globe visualizes the world’s cities with populations over one million, projected via an orthographic view that initially tilts to a fixed latitude. Built with d3-geo, it uses `geoOrthographic` and `geoPath` to render landmasses, internal country borders, and city dots from the World Cities Database. The map scales to fit the viewport, with animation logic present but disabled by default.

SShad Frigui

85% match

Loading thumbnail…

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

85% match

Loading thumbnail…

Pan and Zoom World Map Cities

This example presents an interactive orthographic world map displaying major cities as points. Users can pan by dragging and zoom with the mouse wheel, manipulating the map’s rotation and scale in real time. The visualization loads country boundaries from the visionscarto-world-atlas TopoJSON and city coordinates and populations from a reduced World Cities CSV. Built with D3’s `geoOrthographic`, `geoPath`, `drag`, and `zoom` APIs, the map renders graticules and updates city positions via the projection each frame.

YYiyi Wu

85% match

Loading thumbnail…

Zoomable Globe with Cities Template

This interactive globe visualizes major world cities using an orthographic projection, with labels that dynamically appear as users drag to rotate and scroll to zoom. Canvas handles the geographic rendering of countries, graticule, and sphere gradient via `d3.geoOrthographic` and `d3.geoPath`, while an SVG overlay draws city labels using collision detection powered by `rbush`. Population data from a CSV file is filtered and scaled with `d3.scaleSqrt`, with interactive controls implemented through D3’s `drag` and `zoom` behaviors.

CCurran Kelleher

83% match

Loading thumbnail…

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.

CCurran Kelleher

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

82% match

Loading thumbnail…

Fork of Cities on a Globe

An interactive SVG globe shows the world’s cities with over 100,000 inhabitants, sized by population; hovering reveals names and counts. Panning by dragging and zooming via the mouse wheel or pinch gestures rotates the orthographic projection, with lower-resolution country boundaries during active motion. The visualization uses d3.geoPath, d3.geoOrthographic, d3.drag, d3.zoom, and d3.queue to load and project GeoJSON from world-atlas and CSV population data from Geonames.

AAki78

82% match