The Seattlelites| Orbital Sky
Orbital Sky
Interactive Satellite Visualizer
Summary
Our project goal was to create an interesting, accessible, and interactive web-application that models satellites orbiting the Earth. We decided to come up with a solution that is easy to use and gives users insight on where these satellites are, when they were launched, where they were launched, what they are used for, and more. We created a modular application with native HTML/CSS/JavaScript that ingests satellite data with SSC RESTful Web Services and uses the WorldWind Web API to create a 3d model of the Earth and the satellites that orbit it.
How We Addressed This Challenge
We felt that many people including ourselves are familiar with satellites, but don't actually know what any of them are used for and what kinds of data they collect. With this in mind, we created an easy to use web-app that allows users to see what satellites look like from the outside looking in. Users can select numerous satellites in space that are orbiting the Earth, and learn about the selected Satellite's name, operator/owner, type of orbit, perigee, apogee, period, date of launch, launch site, a brief description, and a link to more information on that satellite.
An application like this is especially important because it gives the younger population a really cool way of seeing, learning, and discovering about all the satellites we have and what kinds of things they do. This can open up the realm to many different areas of topics of knowledge such as volcanic eruptions, atmospheric temperature, sea ice extent, and so much more. During the process of creating our application, our team of undergraduate students thought it was super interesting learning about the different things our satellites gather information on, and we feel that many others would feel the same way using this application.
Some future implementations we would like to add are more UI functionalities such as filtering by different attributes, toggling layers on the globe, and more overall elegant design elements. We also have Satellite orbit data from the SSC API which we will use to trace the orbits of satellites around the Earth so users can see the orbits that the satellites follow. Lastly, we think it would be helpful to add additional information tabs in our navigation bar on how satellites generally work, what different orbits mean, why satellites follow these orbits, and more.
We feel this project addresses the orbital sky challenge because it gives people an engaging and interesting way of discovering different aspects and purposes of satellites while also making it easy for users to access this information and learn about them.
How We Developed This Project
We were inspired to choose this challenge because we haven't seen any solutions that provide users with information on different satellites while also giving them an understanding of how these satellites look in space. We wanted to create an app that made it as easy for people to find information on satellites, while keeping an interesting and engaging user interface.
Our approach to creating this project was interesting, as we faced some struggles in the beginning of our development. We started off by implementing the globe API in React, which proved to be difficult as they World Wind API didn't always play nicely with it. We then decided to switch over to native tools (HTML, CSS, JS), and were able to use the API much easier and put a chunk of our ideas into code.
We then faced the issue of gathering sufficient data. Our goal was to provide users with a way of having accessible information on these satellites, but there wasn't an API we could find that would give us everything we needed. Because of this we took a different route and created a list of all satellites that were returned from our SSC API calls. With this list of 200+ names, we manually created a CSV containing all of the names, properties, and descriptions of the satellites. After this, we looked up all the information that we could given our timespan on 100+ satellites that were given from the SSC API, and filled in the CSV file with data. Lastly, we changed this CSV file to JSON format so we could use it in our code and link it to the SSC data.
With our SSC data and "manual" data at hand, we used it to create markers that were displayed in our 3d model based on latitude, longitude, and distance from the Earth. We then added the functionality to click on a marker and have access to all of the different information we found for each satellite.
We feel that our two biggest struggles were definitely finding data that fit our project needs nicely and learning how to use the WorldWindAPI effectively as we had never used or seen it before the hackathon. To be more specific, a big problem we had with the WorldWindAPI was tracking events because it all is inside of a canvas HTML element which meant we couldn't access DOM elements like you normally would in web-development. Overall, it was a super good experience and it was really interesting to learn and use this library.
Our biggest achievement was getting the main functionality of our project to work how we wanted it to and developing a working first-iteration of our project in 48 hours.
How We Used Space Agency Data in This Project
NASA Satellite Situation Center API- Used to get satellite positioning/Satellite positions history
WorldWind API- Used to display our 3d Earth model with satellite markers
Project Demo
https://drive.google.com/file/d/1DasoZnyyNm_00yIzA1F0R3va8o8SU_q4/view?usp=sharing
Project Code
Data & Resources
https://sscweb.gsfc.nasa.gov/
https://worldwind.arc.nasa.gov/web/
https://docs.google.com/spreadsheets/d/1uYEwEOdNrblmA4rI9dduOolkwu3HkK1k3k2Jf4PcvoQ/edit?usp=sharing