Permalink
Browse files

Straight conversion from the static WebGL Globe examples

  • Loading branch information...
tracend committed Apr 2, 2012
0 parents commit 0f8dfa794b839868a9ea8ed554e47f5061a05844
@@ -0,0 +1 @@
+node_modules
@@ -0,0 +1 @@
+node_modules
14 LICENSE
@@ -0,0 +1,14 @@
+Copyright 2011 Google Data Arts Team
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
@@ -0,0 +1,69 @@
+The **WebGL Globe** is an open platform for visualizing geographic
+information in WebGL enabled browsers.
+It supports data in JSON format, a sample of which you can find [here]
+(https://github.com/dataarts/dat.globe/raw/master/globe/population909500.json). dat.globe makes heavy use of the [Three.js](https://github.com/mrdoob/three.js/)
+library, and is still in early open development.
+
+
+### Data Format ###
+
+The following illustrates the JSON data format that the globe expects:
+
+```javascript
+var data = [
+ [
+ 'seriesA', [ latitude, longitude, magnitude, latitude, longitude, magnitude, ... ]
+ ],
+ [
+ 'seriesB', [ latitude, longitude, magnitude, latitude, longitude, magnitude, ... ]
+ ]
+];
+```
+
+### Basic Usage ###
+
+The following code polls a JSON file (formatted like the one above)
+for geo-data and adds it to an animated, interactive WebGL globe.
+
+```javascript
+// Where to put the globe?
+var container = document.getElementById( 'container' );
+
+// Make the globe
+var globe = new DAT.Globe( container );
+
+// We're going to ask a file for the JSON data.
+xhr = new XMLHttpRequest();
+
+// Where do we get the data?
+xhr.open( 'GET', 'myjson.json', true );
+
+// What do we do when we have it?
+xhr.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 ( i = 0; i < data.length; i++ ) {
+ globe.addData( data[i][1], 'magnitude', data[i][0] );
+ }
+
+ // Create the geometry
+ globe.createPoints();
+
+ // Begin animation
+ globe.animate();
+
+ }
+
+ }
+
+};
+
+// Begin request
+xhr.send( null );
+```
@@ -0,0 +1,41 @@
+var express = require("express"),
+ jade = require("jade")
+ // First important line:
+ globe = require("webgl-globe");
+
+var app = express.createServer();
+
+app.configure(function(){
+ app.use(express.methodOverride());
+ app.use(express.bodyParser());
+ app.use(app.router);
+ app.set('views', __dirname + '/views');
+ // Second Important line: add the path of the static files for the modile
+ app.use(express.static(__dirname + '/node_modules/webgl-globe/public'));
+
+
+});
+
+app.get('/', function(req, res){
+
+ // Third important line: Generate the globe with variables for the container and the data
+ var output = globe.create("container", "/sample-json/search.json");
+
+ res.send( output );
+
+});
+
+app.configure('development', function(){
+ //set path to static files
+ app.use(express.static(__dirname + '/public'));
+ app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
+});
+
+app.configure('production', function(){
+ var oneYear = 31557600000;
+ //set path to static files (with expiry)
+ app.use(express.static(__dirname + '/public', { maxAge: oneYear }));
+ app.use(express.errorHandler());
+});
+
+app.listen(80);
@@ -0,0 +1,2 @@
+
+module.exports = require('./lib/webgl-globe');
@@ -0,0 +1,15 @@
+var fs = require("fs"),
+ jade = require("jade"),
+ path = require("path");
+
+exports.version = '0.1.0';
+
+exports.create = function( container, data ){
+ var globe = fs.readFileSync( path.join(__dirname, "../views/webgl-globe.jade"), 'utf8');
+
+ // Compile template rendering function
+ globe = jade.compile(globe, { pretty: true});
+
+ return globe({ container: container, data: data });
+
+ };
@@ -0,0 +1,32 @@
+{
+ "name": "webgl-globe",
+ "version": "0.1.4",
+ "description": "The **WebGL Globe** is an open platform for visualizing geographic information in WebGL enabled browsers.",
+ "author": "Google Data Arts Team",
+ "contributors": [
+ { "name": "Makis Tracend", "email": "makis.tracend@gmail.com" }
+ ],
+ "homepage": "http://www.chromeexperiments.com/globe",
+ "keywords": ["webgl", "google", "globe"],
+ "main": "./index.js",
+ "engines": {
+ "node": ">0.4.x"
+ },
+ "dependencies": {
+ "jade": ">0.13.x"
+ },
+ "repository": {
+ "type": "svn",
+ "url": "https://code.google.com/p/webgl-globe/"
+ },
+ "bugs": {
+ "url": "https://code.google.com/p/webgl-globe/issues/list"
+ },
+ "licenses": [
+ {
+ "type": "Apache License, Version 2.0",
+ "url": "http://www.apache.org/licenses/LICENSE-2.0"
+ }
+ ]
+
+}
@@ -0,0 +1,84 @@
+ html {
+ height: 100%;
+ }
+
+ body {
+ margin: 0;
+ padding: 0;
+ background: #000000 url(../img/loading.gif) center center no-repeat;
+ color: #ffffff;
+ font-family: sans-serif;
+ font-size: 13px;
+ line-height: 20px;
+ height: 100%;
+ }
+
+ #info {
+
+ font-size: 11px;
+ position: absolute;
+ bottom: 5px;
+ background-color: rgba(0, 0, 0, 0.8);
+ border-radius: 3px;
+ right: 10px;
+ padding: 10px;
+
+ }
+
+ a {
+ color: #aaa;
+ text-decoration: none;
+ }
+
+ a:hover {
+ text-decoration: underline;
+ }
+
+ .bull {
+ padding: 0px 5px;
+ color: #555;
+ }
+
+ #title {
+ position: absolute;
+ top: 20px;
+ width: 320px;
+ left: 20px;
+ background-color: rgba(0, 0, 0, 0.2);
+ font: 20px/20px Georgia;
+ padding: 15px;
+ }
+
+ .year {
+
+ font: 16px Georgia;
+ line-height: 26px;
+ height: 30px;
+ text-align: center;
+ float: left;
+ width: 90px;
+ color: rgba(255, 255, 255, 0.4);
+
+ cursor: pointer;
+ -webkit-transition: all 0.1s ease-out;
+ }
+
+ .year:hover, .year.active {
+ font-size: 23px;
+ color: #fff;
+ }
+
+ #ce span {
+ display: none;
+ }
+
+ #ce {
+ width: 107px;
+ height: 55px;
+ display: block;
+ position: absolute;
+ bottom: 15px;
+ left: 20px;
+ background: url(../img/ce.png);
+ }
+
Binary file not shown.
Binary file not shown.
Binary file not shown.
Oops, something went wrong.

0 comments on commit 0f8dfa7

Please sign in to comment.