Asteroid impact data visualisation with Cesium.js and Glitch

This post is about using Glitch to quickly prototype a Cesium.js web app. Cesium is a library for creating 3D globes and maps, while Glitch is a site for quickly creating fully fledged web applications, without having to worry about getting a domain name, finding hosting, setting up servers etc.

Here's an intro post from Anil Dash explaining the concept, while Cesium have a great guide for getting started, which can be found here. However, for this post we won't need to download the Cesium source files.

To get started, head to this link, and you should find the Glitch code editor, with the code for a simple web app already waiting for you. To test it out, click into views/index.html in the left hand panel, and change the header on line 24 from "A Dream of the Future" to "Hello (3D Cesium) World"

Now click the "Show Live" button in the top left, and the site should open in a new tab. You can now visit that URL from your phone or a different laptop, and you will see the same thing. This is what makes Glitch so useful, within a minute you can have your own site up and running which is accessible from anywhere. (Note: Project URL's eventually expire unless you sign in to Glitch with a GitHub account)

Creating a Cesium application

Switch back to the Glitch code editor tab, and you'll see there are two sections on the left hand side. The back-end is for code which gets executed on the server, while the front end is for code which gets executed in the browser when the page gets loaded.

For our example we don't need to change anything in the back-end. While in the front-end, you can delete public/client.js and public/style.css (By clicking the arrow beside their name). Now click into views/index.html, and replace its contents with the following:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello (3D Cesium) World!</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cesiumjs.org/releases/1.39/Build/Cesium/Cesium.js"></script>

<link rel="stylesheet" type="text/css" href="https://cesiumjs.org/releases/1.39/Build/Cesium/Widgets/widgets.css"/>

<style>
  html, body, #cesiumContainer {
    width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
  }
</style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script type="text/javascript">
    var viewer = new Cesium.Viewer('cesiumContainer');
  </script>
  </body>
</html>

This is basically the template used for Cesiums getting started tutorial. The only difference is that we load Cesium.js and widgets.css from Cesiums site, rather than needing to download the source files. We also included JQuery.

You'll notice the only content of the <body> tag is an empty div with id cesiumContainer, and a script which defines a Cesium viewer object, this is all that's needed to create a Cesium application.
You can go ahead and click the "Show Live" button again in the top left of the screen, and there you have a 3D globe web application.

You can use the widget in the bottom left to slow down or speed up time, the buttons in the top right to change the base map or change the globe to 2D or Columbus view.

Adding Data

I went to NASA's data portal and found a list of all recorded Meteorite impacts throughout history. I wanted to see if I could find a nice way to visualize these impacts from the earliest to most recent, with some basic animation. This spreadsheet contains over 45000 entries, so in order to cut that down, I wrote a python script to parse the file and only return impacts with a valid impact year, which was a small percentage of the overall list.

Then I took the first 200 of these from oldest to newest and printed them to a file, with each line containing: 'YEAR,LONGITUDE,LATITUDE'. This can then be copied into a JavaScript array, for easy access in the app. There are better ways to do, but this keeps things simple. I stored this array definition in a file called data.js, whose content can be viewed here.

To add this to your project, open the Glitch code editor tab, click the "+" beside front-end on the left of the page, create a file called "public/data.js" and copy in the contents from the link above. Now click back into views/index.html, and add the following script tag directly below the cesiumContainer div:

<script src="data.js"></script>

This gives you access to all the impact data, by using the "impacts" variable defined in data.js.

Visualize impacts

Next we have to write some code to get Cesium to use this data to display the impacts.
First we create a file in the front-end of Glitch editor called "public/impact.js", then erase the following line:

var viewer = new Cesium.Viewer('cesiumContainer');

from views/index.html, and replace the now empty script tag with the following:

<script src="impact.js"></script>

Now copy and paste the content of this link into "public/impact.js". We won't go into much detail on the code used to display the impacts, however I have included comments in the source to explain what's going on. Now click "Show Live" one last time to see the result.

Once the page is loaded, it should show a time sequence visualization of the first 200 impacts in chronological order, with a very basic animation of the impact (expanding red cones).

I had originally created this visualization as part of the NASA Space Apps Challenge 2016, and being lightweight, it served as a good example for using Cesium and Glitch together.

You can find the code on GitHub, and here's links to the ready made version on Glitch:

Code Editor:
https://glitch.com/#!/project/asteroid-impacts

App:
https://asteroid-impacts.glitch.me/

Comments

Post a Comment

Popular Posts