Data on Globes, Terrain, and Geographic Context
Some data is inherently geographic. Office locations, delivery routes, sensor networks, customer distribution, supply chain pathways. Plotting this on a flat map works for regional views. But when data spans continents, when routes wrap around the planet, or when elevation matters, an interactive globe or terrain view gives context that flat projections distort.
An interactive globe in the browser is a Three.js globe with real data layered on its surface. The ecosystem (Globe.GL, three-globe, three-geo) gives you a starting point. Production work is the part those libraries leave to you: custom data layers, fast rendering of thousands of markers, and interaction that responds when someone clicks or hovers a location.
Supply Chain Control
A Three.js globe with supply chain data overlaid at real coordinates. Inbound freight routes (cyan) carry parts from suppliers to distribution hubs. Outbound routes (amber) distribute finished product to markets. Filter by region, investigate alerts, or adjust velocity to simulate network conditions.
Network
The Constraint: Coordinates and Scale
Geographic data uses latitude and longitude. Three.js uses Cartesian coordinates (x, y, z). The conversion is straightforward, but three subtleties determine whether the result looks correct at every zoom level.
Floating-Point Precision
At globe scale (radius ~6,371 km), a 1-metre position offset requires sub-millimetre precision. For city-level data this is irrelevant. For building-level accuracy and terrain, precision matters.
Scale Transitions
Globe view to street level is a ~10,000,000:1 scale change. Default near/far clipping planes cannot handle this range. Adaptive planes or logarithmic depth buffers prevent z-fighting artefacts.
Tile Loading
High-resolution terrain and imagery use tiled data. Tiles load on demand based on camera position and zoom. This is streaming architecture, not static scene loading.
The Naive Approach
The tutorial globe produces a result that looks good in a screenshot and does nothing useful with data. The first two shortcuts are about rendering, and both break the moment real data arrives.
The other two are about delivery and use. They are what separates a demo that runs on the developer's laptop from a globe that works for an actual user on an actual connection.
Rendering the Three.js Globe
The globe is the foundation. Every marker, arc, and overlay is positioned relative to its surface, so the base layer of a Three.js globe sets how well everything on top of it looks and performs. Get the geometry, texture, and atmosphere right first.
Geometry
A SphereGeometry with 64+ segments for smooth curvature. The sphere is the spatial reference; all markers, arcs, and overlays are positioned relative to its surface.
Base texture
A moderate-resolution Earth texture (4K-8K) for the zoomed-out view. Tile-based loading (Mapbox, Cesium, OpenStreetMap) for higher zoom levels. Progressive loading as the camera zooms in.
Atmosphere
A subtle atmospheric glow using a shader on a slightly-larger sphere. One extra draw call, no texture fetch: it sells the 3D illusion almost for free. Optional night/day terminator based on UTC time.
Markers and Data Layers
Markers represent data points on the globe surface. The conversion from latitude/longitude to Cartesian positions is the entry point for all geographic data.
Coordinate conversion: x = radius * cos(lat) * cos(lon), y = radius * sin(lat), z = radius * cos(lat) * sin(lon). For markers that protrude from the surface (pins, bars), extend along the surface normal, which on a sphere is the normalised position vector.
Use InstancedMesh for markers. All markers of the same type render in one draw call. Per-instance attributes encode position, scale (proportional to a data value), and colour (encoding a category or metric). For bar markers showing values, set the Y scale to the data value. This creates a "bar chart on a globe" where each location shows a proportional spike.
Great-Circle Data Arcs
Flight paths, trade routes, supply chain connections. These render as curved lines between two points on the surface. The curve follows a great circle (the shortest path over a sphere), which is what makes a great-circle map read correctly rather than drawing a straight chord through the planet. Longer arcs rise higher above the surface so they clear the globe instead of clipping into it.
Rendering Options
Single LineSegments geometry for all arcs (performance), or TubeGeometry for thicker, more visible connections (visual quality). Choose based on arc count and visual requirements.
Animation
Animate arcs to show direction: a moving dash pattern or a particle travelling along the path. Makes flow direction immediately readable without labels.
Interaction
A globe without interaction is a decoration. Four interaction patterns make geographic data explorable.
Globe rotation
Orbit controls constrained to not go below the surface. Damping for smooth deceleration. Auto-rotation on load (respecting prefers-reduced-motion) stops on first interaction.
Marker hover/click
GPU picking or throttled raycasting against the instanced mesh. On hover, show a tooltip with location name and data values. On click, open a detail panel.
Region zoom
Double-click a marker or region to smoothly animate the camera to focus on that area. Load higher-resolution tiles. Show additional markers and labels hidden at the global view.
Filtering
UI controls (date range, category, threshold) filter visible markers. Set instance scale to zero for hidden markers (faster than recreating the InstancedMesh).
Terrain and Elevation
For regional views where terrain matters (construction sites, agricultural land, flood zones), render terrain with elevation data applied to a plane geometry.
Mapbox Terrain RGB
Elevation encoded in RGB pixel values. Fetch tiles, decode elevation, apply to PlaneGeometry vertex Y positions. Good coverage and resolution.
SRTM / ASTER
Free global elevation datasets at 30m-90m resolution. Pre-process into tiles for web delivery. Suitable for large-area terrain rendering.
LiDAR Point Clouds
High-resolution elevation. Render as particles (THREE.Points) or generate a mesh surface. Performance-intensive; use LOD aggressively.
Overlay data layers (boundaries, routes, heatmaps) on the terrain surface by sampling terrain elevation at each vertex and adjusting Y positions. Add a small offset to prevent z-fighting between the overlay and the terrain mesh.
Libraries and Ecosystem
The library choice depends on how much customisation you need against how quickly you need to ship. These are four options on a spectrum, not four steps: pick the one that matches your control and standards requirements.
Globe.GL
A high-level wrapper that gives you points, arcs, polygons, and heatmaps with minimal code. The fastest route to a working interactive globe, at the cost of limited customisation once you outgrow its API.
three-globe
The Three.js component that sits underneath Globe.GL. The same coordinate handling, but as an object in your own scene graph, so you keep full control of the camera, lighting, and render loop.
three-geo
Generates terrain geometry from a geographic bounding box using Mapbox data. Reach for it when the job is regional terrain rather than a whole-Earth globe.
CesiumJS
A full geospatial platform with its own renderer, not a Three.js plugin. Choose it when tiling, WMS/WMTS layers, and 3D Tiles are the primary need and you want the standards handled for you.
The Business Link
Geographic visualisation gives spatial context for decisions. Consider a sensor network spread across several continents, plotted as instanced markers on a globe. Bar height encodes daily output. Colour encodes deviation from forecast.
In our experience this is where a globe earns its keep. Spin it and underperformance that clusters by region jumps out: a band of stations consistently below forecast in one part of the world while another tracks closely.
That pattern stays hidden in a table, because station IDs carry no geographic relationship. On the globe it reads in seconds, and it points an investigation straight at a regional cause, not a per-station fault.
-
Spatial awareness Distribution patterns, coverage gaps, and regional concentrations visible immediately rather than inferred from rows.
-
Route and logistics insight Supply chain pathways, delivery coverage, and connection density shown in geographic context.
-
Clearer reporting A rotating globe with data arcs conveys global scope to a non-technical audience faster than a spreadsheet of country codes.
For mapping and geospatial work in broader application contexts (postcode lookups, routing, store locators), see Maps and Location. For charting the same data without a map, see 3D Data Visualisation.
Visualise Geographic Data
We build geospatial visualisations that make location-based data explorable. Globe views, terrain rendering, marker clustering, and data arcs: positioned accurately, rendered performantly, interactive and informative.
Let's talk about your geographic data →