Name: webgl-globe
Owner: End Point Corporation
Description: WebGL Globe is a platform for visualizing latitude longitude based information using WebGL.
Created: 2013-12-16 22:26:05.0
Updated: 2013-12-31 00:05:51.0
Pushed: 2013-12-31 00:05:50.0
Homepage: http://www.chromeexperiments.com/globe
Size: 41378
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
The WebGL Globe is an open platform for geographic data visualization created by the Google Data Arts Team. We encourage you to copy the code, add your own data, and create your own globes.
Check out the examples at http://www.chromeexperiments.com/globe, and if you create a globe, please share it with us. We post our favorite globes publicly.
The WebGL Globe supports data in JSON
format, a sample of which you can find here. webgl-globe
makes heavy use of the Three.js library.
The following illustrates the JSON
data format that the globe expects:
data = [
[
'seriesA', [ latitude, longitude, magnitude, latitude, longitude, magnitude, ... ]
],
[
'seriesB', [ latitude, longitude, magnitude, latitude, longitude, magnitude, ... ]
]
The following code polls a JSON
file (formatted like the one above) for geo-data and adds it to an animated, interactive WebGL globe.
here to put the globe?
container = document.getElementById( 'container' );
ake the globe
globe = new DAT.Globe( container );
e're going to ask a file for the JSON data.
xhr = new XMLHttpRequest();
here do we get the data?
open( 'GET', 'myjson.json', true );
hat do we do when we have it?
onreadystatechange = function() {
// If we've received the data
if ( xhr.readyState === 4 && xhr.status === 200 ) {
// Parse the JSON
var data = JSON.parse( xhr.responseText );
// Tell the globe about your JSON data
for ( var i = 0; i < data.length; i ++ ) {
globe.addData( data[i][1], 'magnitude', data[i][0] );
}
// Create the geometry
globe.createPoints();
// Begin animation
globe.animate();
}
egin request
send( null );