Viewing a saved revision (read-only)
ebd03de83ebb4210ba36e27ef7d665f5
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 submarine cable networks. Built with D3.js and featuring dark mode aesthetics.
Data from:
- https://github.com/curran/www.submarinecablemap.com - stable copy
- https://github.com/delusan/www.submarinecablemap.com - original, powers https://www.submarinecablemap.com/
Features
- 🌍 Interactive 3D globe with orthographic projection
- 🔌 Real-time submarine cable network visualization
- 🏙️ 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.