Cool Open‑Source 3D Globe Visualizations: From Trade Flows to Starlink Satellites

In data visualization, 3D globes are a striking way to display origin‑to‑destination or geographic distribution data such as trade flows, population migration, satellite orbits, and epidemic spread. Although many GitHub repositories exist, only a few provide solid documentation, examples, and ease of use; the following five are highlighted.

1. echarts-gl — ECharts 3D extension

GitHub: ecomfe/echarts-gl ⭐2704

Core capabilities : renders scatter, heatmap, flight‑line, 3D bar, and 3D line charts on a globe. It wraps WebGL operations, delivering far better performance than native Canvas.

Usage example :

// Import ECharts and the GL extension
import * as echarts from 'echarts';
import 'echarts-gl';
// Configure the globe
option = { geo3D: { map: 'world', data: [...] } };
var chart = echarts.init(document.getElementById('container'));
chart.setOption(option);

Features : fully compatible with the original ECharts API; simply replace geo with geo3D to obtain a 3D map. Flight‑line visualizations support fine‑grained control of start/end points, line color, and animation duration, creating strong visual impact with large data volumes.

Suitable scenario : dashboards already using ECharts that need a quick 3D upgrade; migration cost is almost zero.

2. Gio.js — Four‑line trade‑flow visualizer

GitHub: syt123450/giojs ⭐1729

Core capability : visualizes "point‑to‑point" data such as international trade routes, population migration tracks, and flight paths.

Minimal example :

var gio = new Gio(document.getElementById('globalArea'));
gio.init();
gio.addData(data); // data format: {startLat, startLng, endLat, endLng, value}
gio.play();

Technical details : built on Three.js for rendering, uses ray‑casting for mouse hover interaction, and Web Audio API for sound effects. The globe texture is customizable; several themes, including a dark‑space theme, are provided. Data points require only start/end coordinates and a value.

Features : extremely easy to start, Chinese documentation, and a React wrapper react-giojs with many ready‑made demos (trade flow, migration, flight routes).

Suitable scenario : rapid demos or pages that need specific flow visualizations.

3. three-globe — Generic Three.js globe component

GitHub: vasturiano/three-globe ⭐1567

Core capability : provides a reusable 3D globe object for any Three.js scene. Layers can be added independently: Points, Arcs, Polygons, Paths, Images, etc.

Technical advantages :

No dependency on UI frameworks; works with React, Vue, or plain JavaScript.

Layer‑based design; each layer is configured separately.

Direct support for GeoJSON/TopoJSON input.

Includes KGL (Katavento GL) vector earth textures, offering higher visual quality than Gio.js.

Typical usage :

import ThreeGlobe from 'three-globe';
const globe = new ThreeGlobe()
  .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
  .pointsData(pointsData).pointLat('lat').pointLng('lng').pointVal('value')
  .arcsData(arcsData).arcStartLat('startLat').arcStartLng('startLng')
  .arcEndLat('endLat').arcEndLng('endLng');
scene.add(globe);

Suitable scenario : teams with Three.js experience that need deep customization or want to embed a globe in a complex 3D scene.

4. Oclock — IANA timezone + solar‑angle day‑night globe

GitHub: azialle/Oclock ⭐22

Core function : real‑time display of global day‑night distribution with local time labels for each country/region.

Implementation pipeline :

GeoJSON → Shapely calculates a representative coordinate for each country.

TimezoneFinder maps the coordinate to an IANA timezone (e.g., Asia/Shanghai).

Inject the enriched GeoJSON for front‑end consumption.

Front‑end rendering :

Based on Globe.gl (another project by the three‑globe author).

Solar Calculator algorithm computes the sun’s sub‑solar point.

The day‑night terminator updates in real time according to solar altitude.

Interaction : mouse hover shows local time, click focuses a country, search jumps to a location, and time‑zone labels can be toggled.

Suitable scenario : timezone tools, astronomy education, or any international product that needs visual timezone representation.

5. starlink-viz — SGP4 orbit calculation + Starlink real‑time tracking

GitHub: juliensimon/starlink-viz ⭐11

Core functionality :

Real‑time tracking of about 10,000 Starlink satellites.

Space view: top‑down view of satellite orbits.

Sky view: ground‑based perspective of satellite passes.

Ground‑station positions, inter‑satellite link (ISL) status, and network performance data.

Tech stack : SGP4 algorithm for orbit computation, public SpaceX TLE data, Next.js + Three.js for the front end.

Principle : SGP4 (Simplified General Perturbations) converts TLE (Two‑Line Element) data into satellite latitude, longitude, and altitude at any moment. Starlink satellites orbit at ~550 km LEO; the constellation requires continuous orbit maintenance, so the TLE data must be refreshed regularly.

Suitable scenario : satellite‑tracking enthusiasts, space‑visualization learning, or product demos related to SpaceX and commercial space.

Comparison Overview

echarts-gl – ECharts + WebGL – quick 3D add‑on for existing ECharts dashboards – low difficulty.

Gio.js – Three.js – trade‑flow, migration, flight‑route visualizations – medium difficulty.

three-globe – Three.js – generic reusable globe with layered data – high difficulty.

Oclock – Globe.gl + Python – real‑time day/night and timezone display – medium difficulty.

starlink-viz – Next.js + Three.js + SGP4 – real‑time Starlink satellite tracking – high difficulty.

GitHub: ecomfe/echarts-gl ⭐2704 | syt123450/giojs ⭐1729 | vasturiano/three-globe ⭐1567 | juliensimon/starlink-viz ⭐11 | azialle/Oclock ⭐22