EQuake

Riley Davis and David Souther collaborated on EQuake, a 3D earthquake visualizer they developed in about a day. They discuss their motivations and approach in this piece.

We were inspired by this xkcd comic imagining a situation in which tweets about an earthquake spread faster than the earthquake's seismic waves.

We both like to make complex scientific information more accessible by tying it to scales that people already understand. We thought it would be interesting to plot waves from real earthquakes onto a globe to show how fast the waves actually travel through the crust. This tool could easily be used to map out tweets (or any other geographic data) when other earthquakes occurred. To implement this, we were able to use data from the U.S. Geological Survey (USGS) along with Three.js and S3age.

We took a day's worth of earthquake incidents from the USGS database. The USGS data is tagged with (lat, lon, time, magnitude), in addition to other data we disregarded. We placed 3D markers on the surface of a globe, changing their size and color based on magnitude.

Three.js handles the rendering and modeling of the project. However, we found the Three.js API and sample code to be more complicated than we needed. David had already started the S3age library, a wrapper API that streamlines creating a Three.js scene. We used it, resulting in simpler initialization code.

new S3age "#container",      scene:          lights: [ new THREE.AmbientLight 0xdddddd ]          children: [ earth = new Earth() ]      controls: S3age.Controls.Sphere  

We created a Globe base class; it provides the following method:

addMarker(Marker::THREE.Object3D[, lat, lon])  

This places a marker at the correct location on the globe's surface. The marker's local 3D space is oriented with the Z-axis pointing out along the radius, the Y-axis pointing to the North Pole and the X-axis perpendicular to the two, pointing east.

class window.Quake extends THREE.Object3D      constructor: (quake)->          THREE.Object3D.call @  

In JavaScript, Object.create works as well to extend THREE.Object3D. This allows us to further extend the Quake class to build up more complex geometries and 3D pieces from the Three.js primitives. S3age also provides a physics mechanism, calling update: (clock)-> on any object with an update method in the S3age scene.

In the application, the Earth extends the Globe class. It adds a sphere surface textured with a NASA Earth texture. With this setup, the rendering is handled by S3age - the EQuake app only handles the 3D geometry and materials of the markers. S3age also provides the controls for the scene. A library that can easily and quickly orient along the surface of the globe will be a boon for future visualization projects.

You can find the code for EQuake here. S3age is documented, and Three.js is a great library, even with its API issues. Please take a look and contribute to the project!