Phoenixes

http://quakexplorer.mgciwebdev.com

https://www.youtube.com/watch?v=l6jxAJDtJKQ

QuakeXplorer allows you to see moonquakes with an intuitive and interactive design.

The Interactive Moon

It’s a 3D interactive model of the moon. You can drag to navigate it. A moonquake on the moon can be seen by the ripple on the moon model.

The Time Player

QuakeXplorer doesn’t just allow you to see where moonquakes happen. It also lets you go back in time and see them happen. On the bottom, there is a time player which allows you to time travel, jumping back to specific times where moonquakes happen.

You can pause or let the time player autoplay (either by pressing the start/stop button on the left, or by pressing the spacebar). Each yellow indicator on the track represents a quake at that time. When the time reaches that of the indicator, the moon model will automatically rotate to show you the quake that happens then.

The bigger the ripple, the greater the magnitude of the quake.

The Flatmap

The Flatmap allows you to see every moonquake happening on a flat map of the moon. It comes in useful when you have multiple moonquakes happening at once - the globe can only show you so many.

Pay attention to the flatmap on the top left in the demo below:

The Magnitude Graph

The Magnitude Graph shows you the magnitude of quakes over time.

The yellow line indicates the last quake that happened (in the time player). This also tells you the magnitude of the last quake.

The Configuration

The Configuration panel allows you to configure the application.

In the Data Source section, by default, it shows you shallow quakes. You can, however, set it to show deep quakes, or even both.

The Display section lets you turn off the autorotation. It also allows you to see all quake locations clearly. For instance, you can see all shallow quakes at once by turning it on.

And finally, in the Operation section, you can change the autoplay speed, from 0.5x to 2x.

What we hope to achieve

We wanted to create a cool visualization of moonquakes. For instance, we let you see moonquakes in real time instead of just seeing the locations where moonquakes occurred. With this, we hope to be able to perhaps extend it further. For instance, we could visualize earthquakes on the moon, and even perhaps show the resulting effects from them (e.g., tsunamis). Who knows? With the bedrock established, we have a whole world of possibilities to go forward.

The Technical Stuff

QuakeXplorer is made entirely with frontend technologies: HTML, CSS & JavaScript.

The 3D globe and the visualizations are made, at the bottom, with Three.js. However, we had never touched Three.js before we decided to participate in this hackathon, so to make our lives easier we used the Globe.gl wrapper library.

The Shallow & Deep Quake data came from the Apollo Passive Seismic Experiment Catalog, provided by NASA.

In addition, the maps that were used to construct the 3D model of the moon came from the CGI Moon Kit by NASA’s Ernie Wright.

The links to each source listed above can be found in the References section below.

I had never touched WebGL and 3D browser technologies before. I knew this when I saw this challenge - however, I know how increasingly important these are, and as such I decided that it would be a fun challenge to try it out.

Throughout this whole experience I learned many techniques for making 3D models.

We followed a top-down design approach when creating our application. We first laid out the simple goals we wanted to achieve, then expanded them to accommodate more advanced functions.

Whenever we were faced with a problem, we were able to resolve it by getting each other’s help, or by debugging our code.

Special thanks to all the fantastic organizers of this hackathon, as well as those who made the resources which we used. This amazing experience would not have been possible without you!

JavaScript libraries

• D3: https://d3js.org/ 
• ThreeJS: https://threejs.org/ 
• Globe.gl: https://globe.gl/
• jQuery: https://jquery.com/
• Material Design Lite: https://getmdl.io/
• ChartJS: https://www.chartjs.org/ 

Data

• Fun facts about the moon: https://solarsystem.nasa.gov/news/1946/five-things-to-know-about-the-moon/
• CGI Moon Kit: https://svs.gsfc.nasa.gov/cgi-bin/details.cgi?aid=4720 
• Shallow & Deep Moonquake Data: https://pds-geosciences.wustl.edu/missions/apollo/seismic_event_catalog.htm