ActiveSAT360

 

DURING THE EXHIBITION:

On December 9, 2017, we presented the project during the Visualizing Space exhibition in the ATLAS Black Box Theater at CU Boulder. We mounted four projectors around the ceiling of the theater. Each projected a quarter of the project onto the opposite walls and we positioned the projectors so that it would appear that satellites were continuously passing around the room. Visually the project was incredibly appealing, stretching from the floor, 20 feet to the ceiling and wrapping around the entire theater, visitors were treated to an enchanting display that appeared to be orbiting around them as they explored the rest of the exhibition.

 

SO… WHAT IS ActiveSAT360?:

ActiveSAT360 is the extension of a creative data visualization project originally created as a midterm assignment for Space Data Studio taught by Matthew Bethancourt at the University of Colorado Boulder. The original ActiveSAT project is a captivating, interactive infographic meant to draw attention to the ever-increasing presence of satellites and debris in Earth orbit. The project utilizes a data set from the Union of Concerned Scientists that tracks and catalogs all active satellites in orbit around the Earth.

HOW  DID WE  MAKE  IT?: 

We separated the HTML file into four separate web pages. Then with using socket.io, we were able to send and receive data to and from each webpage. This gave us the ability to use four separate projectors for each webpage.

We hit an obstacle when the JSON file would load 1458 satellites on each screen rather than spreading all 1458 to all four screen. After troubleshooting for awhile, we were able to spread all 1458 satellites. The 1458 satellites are represented by circles.

Blue circle =  USA

Red circle = Russia

Yellow circle = China

Orange  circle = Japan

Cyan circle = Multinational

Purple circle = UK

Grey circle = ESA

White circle = Other

The radius of each satellite is determined by taking the mass of the craft, multiplying it by 0.005 to shrink all the values down and bring them to an even playing field, and then adding ten to the final value to ensure that even satellites with classified masses will be drawn on the screen.

5XQCu+zqSEWPDT294KmJgg

 

Now the cursor part! At first, we wanted to use the phone as a joystick so the user can navigate to each satellite.

sats2.jpg

sats8.jpg

But with only have 2 weeks to complete this project and we were running through a lot of troubleshooting, we went a bit simpler!

Using a library called Nipple.js  we were able to use a lot of its’ function and replace the joystick with two separate buttons:

The about button sends you the about page  

The shuffle button shuffles a new satellite.

The on button  pings the satellite that you are on bigger

The off button pinks the satellite that you are on back to its original size

The on and off button helps the user find the satellite. If they kept pressing on and off and off and on, the satellite they were on would start flickering since it would become large and then small again.

Above the buttons is the information about the satellite the user is currently on. If the user presses the shuffle button the information would change to another random satellite, and once again the user would go around the room looking for their satellite.

Here is  a video of a user using the phone and look for his satellite

 

PROGRESS  PHOTOS:

sats7sats6pWjhy3ydQ7CD+KdrKOGkmA6SgOsxyOQEKBMbNX%tO2Kg

sats5.jpg

GOOGLE ANALYTICS: 

Using Google Analytics we were able to track in real time how users were interacting with the visualization. We had almost 70 distinct users who accounted for nearly 300 page views between the mobile portal and the About page combined. At its peak, we had 45 mobile users interacting with the visualization at once. We were very pleased with this because while we wrote the software to be compatible with multiple devices we had never tested more than 4 mobile clients on it at once. We noticed that some users were having difficulty initially understanding the uses of the controller. If we had redone this, we would have liked to make a better onboarding system showed the user right off the bat how to use the system rather than putting it in the about page which only a portion of the users visited.

Overall this project was a success!

We hit a lot of obstacles but that didn’t stop us from moving forward.

This project can definitely become even more powerful and be different things, such as a game. But as of right now it is a wonderful and interactive data visualization.

ALL THE CODE is on GitHub.

EXPO PICTURES:

IMG_1906.jpgIMG_1905.jpgIMG_1904 (1).jpg

IMG_1899

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s