Skip to main content
SimilarExport ZIP
100%

Submarine Cables (Globe with Panning & Zooming)

✓ Published0🌍 Public
SShad Frigui
Last edited Sep 4, 2024
Created on Aug 31, 2024

This interactive globe visualization displays submarine cable routes across the world, rendered using an orthographic projection. Users can pan and zoom, with drag interactions altering the globe's rotation and a zoom tool adjusting scale. The map is built using D3's `geoOrthographic` and `geoPath` functions, while the land and cable data are sourced from TeleGeography's older GitHub fork. Cable colors are directly applied from the data's properties.

AI-generated description

A globe with submarine cables.

Data from TeleGeography's Submarine Cable Map (old GitHub fork). Note that this data is not up to date. For up to date data, see telegeography.com and submarinecablemap.com.

MIT Licensed

Similar vizzes

Loading thumbnail…

Submarine Cables Globe

This interactive globe visualization displays the global network of submarine communication cables, with each cable colored according to its properties. Users can drag to rotate the Earth and scroll to zoom, with the orthographic projection updating in real time. The visualization uses D3’s `geoOrthographic`, `geoPath`, `geoGraticule`, and `drag`/`zoom` APIs, with world geometry from TopoJSON and cable data from TeleGeography’s open-source repository. The rendering itself is straightforward SVG paths for countries, graticules, and lines.

CCurran Kelleher
93% match
Loading thumbnail…

Fork of Submarine Cables Globe

This interactive globe visualizes submarine cable routes using an orthographic projection. The map renders landmasses, a graticule, and colored cable paths from TeleGeography data using d3.geoPath. Users can drag to rotate the globe and zoom with the mouse wheel, with d3.drag and d3.zoom updating the projection’s rotation and scale. The visualization loads TopoJSON world atlas data and submarine cable GeoJSON from remote sources, dynamically updating the scene as state changes.

Bbepnye@gmail.com
91% match
Loading thumbnail…

Fork of Submarine Cables Globe

An interactive orthographic globe visualizes the global submarine cable network, with colored cable paths linking countries and continents. Users can drag to rotate the sphere and zoom to adjust scale. The visualization loads geographic data from the visionscarto-world-atlas package and cable coordinates from a TeleGeography GitHub repository, rendering them using `d3.geoPath` and `d3.geoOrthographic`. Drag and zoom interactions are implemented with `d3.drag` and `d3.zoom`, while `d3.graticule` adds reference lines.

LLacene Dihia
91% match
Loading thumbnail…

Fork of Submarine Cables Globe

This interactive globe visualization displays worldwide submarine cable routes on a rotatable and zoomable orthographic projection. The code uses d3-geo’s `geoOrthographic` and `geoPath` to render world landmasses from TopoJSON data, while cable locations come from a TeleGeography fork. Drag and zoom behaviors adjust the globe’s rotation and scale in real time, blending geographic mapping with user-driven exploration.

LLacene Dihia
91% match
Loading thumbnail…

Fork of Submarine Cables Globe

A fork of the Submarine Cables Globe, this interactive visualization maps global undersea cable networks onto a draggable, zoomable orthographic globe. It renders world landmasses, graticules, and cable routes using d3.geoPath, while d3.drag and d3.zoom enable panning and scaling. Cable colors come directly from the dataset’s properties. The code loads geographic data via topojson-client and fetches the submarine cable GeoJSON from a public API, demonstrating how to layer vector features on a projected sphere.

Aaadithyavettrivel24@gmail.com
90% match
Loading thumbnail…

Aesthetic Submarine Cables Globe

This interactive 3D globe visualizes worldwide submarine cable networks, with cables rendered as glowing cyan paths and city labels sized by population on a dark, space-like background. Built with D3.js, it uses `geoOrthographic` projection and `geoPath` to draw landmasses and cables, while `drag()` and `zoom()` enable rotation and scaling. Label placement uses RBush spatial indexing to avoid overlap, pulling data from a submarine cable API, topojson world atlas data, and a cities CSV.

CCurran Kelleher
90% match
Loading thumbnail…

Fork of Submarine Cables Globe

This example presents an interactive orthographic globe rendering the world’s submarine cable network. Users can drag to rotate the sphere and scroll to zoom, with the view updating via d3’s drag and zoom behaviors. The visualization uses d3.geoOrthographic and d3.geoPath to draw country outlines, a graticule, and colored cable routes from TeleGeography’s (outdated) GitHub data, loaded through TopoJSON and fetched as JSON. The globe’s appearance is styled through SVG paths, with animation enabled by default.

NNita
89% match
Loading thumbnail…

Fork of Submarine Cables Globe

A globe visualization displays submarine communication cables as colored lines over a world map, rendered using the D3.js library’s geoOrthographic projection and geoPath. Users can drag to rotate the globe and zoom to adjust scale, with interactions handled via d3.drag and d3.zoom. The map and cable data load from external JSON and TopoJSON sources, while a graticule and sphere outline frame the view.

Tthakurnikhitha4@gmail.com
88% match