explaingit

dataarts/webgl-globe

★ 3,769JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

WebGL Globe is a JavaScript library from Google that renders geographic data as animated spikes on an interactive 3D spinning globe in the browser, give it location and value data, it draws the map.

Mindmap

mindmap
  root((WebGL Globe))
    What it does
      3D data globe
      Spike visualization
      Interactive rotation
    Data format
      JSON input
      Lat long magnitude
      Multiple data series
    Tech
      Three.js
      WebGL rendering
      Browser native
    Use cases
      Geographic data display
      Data journalism
      Custom dashboards
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Display global datasets like population or internet usage as an interactive 3D spiked globe on a website

USE CASE 2

Create a data journalism visual showing geographic trends without deep 3D graphics knowledge

USE CASE 3

Build a custom globe dashboard by forking the project and extending the Three.js rendering

USE CASE 4

Visualize multiple named datasets on the same globe and switch between them interactively

Tech stack

JavaScriptWebGLThree.jsJSON

Getting it running

Difficulty · easy Time to first run · 30min

Requires preparing data in a specific JSON format with latitude, longitude, and magnitude values before anything will render on the globe.

Open-source from Google Data Arts Team, specific license not stated but designed for copying and customizing freely.

In plain English

WebGL Globe is an open-source JavaScript project from the Google Data Arts Team that lets you display geographic data on a spinning, interactive 3D globe inside a web browser. WebGL is a technology built into modern browsers that allows drawing 3D graphics without any plugins, and this project puts it to work as a map that users can rotate and explore. The way it works is straightforward: you prepare a JSON file containing sets of latitude, longitude, and magnitude values, where magnitude controls how tall a spike or marker appears at a given location on the globe. You can include multiple named data series in one file, so you could show, say, population figures alongside internet usage on the same globe. The library then reads that file, places the data points on the globe, and starts animating. The code is built on top of Three.js, a popular JavaScript library that handles the lower-level 3D rendering work. You do not need to know Three.js directly to use WebGL Globe, the project provides its own simpler API where you create a globe, attach it to a container element on your web page, load your data, and call animate. The project is designed to be copied and customized. The Google Data Arts Team built it as a platform for experimentation and shared a gallery of globes made by others. If you have location-based data and want a visually interesting way to display it on a website, this gives you a starting point without requiring deep graphics programming knowledge. The README is short and the project scope is narrow: it does one thing, which is rendering magnitude data on a globe. There is no mention of server-side components, authentication, or complex configuration.

Copy-paste prompts

Prompt 1
I have a CSV with columns for city, latitude, longitude, and a numeric value. Write JavaScript code to convert it to the WebGL Globe JSON format and load it into the globe with appropriate magnitude scaling.
Prompt 2
I want to embed a WebGL Globe showing sales data by city on my website. Write the minimal HTML and JavaScript to get a working globe using data from a local JSON file.
Prompt 3
Show me how to add a UI control to the WebGL Globe that lets users switch between two different datasets on the same globe using buttons.
Prompt 4
The WebGL Globe uses Three.js for rendering. Explain how the spike height is calculated from the magnitude value so I can normalize my dataset correctly before loading it.
Open on GitHub → Explain another repo

← dataarts on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.