Viewing a saved revision (read-only)
5080fe9ace364970b24705840a9b4c00
Zoomable Globe with Cities on SVG
This visualization presents an interactive 3D globe of the world with city labels that appear based on population and zoom level. Users can drag to rotate the globe and scroll to zoom, with label visibility adjusting dynamically. Built with React and D3 v7, it uses `geoOrthographic` projection, `geoPath`, `geoGraticule`, and drag/zoom behaviors. City and world atlas data come from external JSON and CSV sources, with an SVG-based renderer featuring configurable colors and label styling.
AI-generated descriptionInteractive Submarine Cable Map
A beautiful, interactive 3D globe visualization showing worldwide city networks. Built with D3.js and featuring dark mode aesthetics.
Data from:
- https://unpkg.com/visionscarto-world-atlas@0.1.0/world/110m.json - world atlas data
- https://gist.githubusercontent.com/curran/a59ef43debb9fcfd38858d0be4f3b087/raw/a56bdbdb758eebf6a387d47e4d428258e5cb2abd/worldcitiesReduced.csv - cities data
Features
- 🌍 Interactive 3D globe with orthographic projection
- 🏙️ Dynamic city labels with collision detection
- 🔄 Smooth drag-to-rotate and zoom interactions
- 🌙 Dark mode aesthetic with elegant color scheme
Usage
Drag to rotate the globe, scroll to zoom in/out. City labels appear dynamically based on population and viewport visibility.