History of Space Flight
Our final group project for CS 171 was about the History of Space Flight. Juan, Mike, and I found a dataset with all space missions from 1957 on Kaggle and decided we wanted to tell the story of our journeys into space. We realized that after the Space Race Age ended, we went into a new age - the Exploration Age, when the most launches meant to help us explore our universe were launched. And now, we're entering the Commercialization Age, with SpaceX, Blue Origin, and Virgin Galactic leading the charge of taking citizens into space for a pretty penny.
This is the story we wanted to tell - the evolution of the space industry. We settled on four visualizations:
A network graph showcasing the countries, companies, and rocket models that make up the industry. This would be the first visualization that the user saw and would basically serve as a bird's eye view the entire industry.
a map, area chart, and bar chart dashboard that compared launches by country by time period. The user could brush over the area chart and zoom in on which countries were launching when.
a line chart comparing of the rocket models by number of cumulative flights. Some rockets of course have seen more use than others, and we wanted to directly compare just this aspect of the data.
a visual showcasing the satellites in orbit, as most launches are meant to deliver satellite payloads and we wanted to highlight this concrete outcome of the space industry.
Juan tackled the line chart and most of the story-boarding slides, Mike tackled the dashboard, and I took on the network graph and the satellite visualization. We kept very detailed track of our progress, decisions, and division of labor in our progress book. If you're interested in those details, you're more than welcome to skim the 48-page document. Here I'll just talk about my visualizations.
The class taught me to always sketch my visualizations first, a process that I continue to use to this day. Fortunately, this was a case where my sketch and the final product were not too far apart.
I started from a project published by Mike Bostock on Observable: Radial Tree Cluster and modified it from there. The two hardest parts of this project were converting the flat csv data into a hierarchical form, and getting the labels to orient themselves properly around the visualization. The first I accomplished using a script that basically just converted rows into objects, and pushed those objects into more objects. I also did some data cleaning along the way, fixing country names (Florida and California are not countries, for example) and company names.
The second just took trial and error. A lot of it.
For this visualization, I decided to keep the functionality simple: a drop-down menu that recolored the nodes by country, status, percent successful launches, and total launches. Each selection has a different color scale, and I remember vacillating quite a bit on the scale used for total launches, since most rockets had less than 100, then were a handful with <200, a few between 200 and 300, and then Russia, which had launched the Cosmos 588 times. Both scale.Quantile(), and scale.Quartile() were missing the mark for me, and I settled on scale.Threshold(), coding the quantile points manually at 5, 9, 100, and 200.
There are three things I am not super happy about with this visualization, and two of them have to do with contrast.
I recall feeling handcuffed at the time because, with countries for example, we needed a LOT of colors, and that meant there were only so many we could use with high contrast to the background before the colors themselves stopped being distinct from each other. I chose to keep the colors on the scale diverse at the cost of losing some contrast with the background with the darker colors. However, I made USA the color with the least contrast (dark blue) because it takes up a large portion of the visualization and as our audience would most likely be those currently residing in this country, I thought people would be looking for it anyway. Additionally, everyone knows the USA launches rockets, and by choosing the brighter colors for the other countries, I could highlight the ones that not everyone knows has launched rockets, like Kenya and Brazil.
Second, the labels overwrite the links and both are basically white. I wish that when labels were toggled, I had dimmed the brightness of the links so that the labels were easier to read.
Lastly, I program on rather large monitors (24") and I didn't factor in small monitors or any element of responsiveness into my design. With the country labels, Kenya ends up hidden by the text block since there isn't as much vertical space on laptops as with my big monitor.
Again, I started from an example I found online, Orbits, and modified the code to fit my purposes, including placing an earth as the center instead of the sun. (I tried to get the earth to rotate but the code wasn't having it.) This is set up quite similarly to the network visualization both in terms of layout and functionality. The dropdown menu allows the users to visualize by country, purpose (communications, navigation, science, etc), orbit, and 'Age', when they were launched. However, instead of toggling labels, the user can toggle the stars on and off to help improve the contrast between the background and the satellites.
I couldn't code the actual altitude of the satellites to scale because then they'd all be on top of each other and basically riding the planet with no gap between the satellites and terra firma. There are also some satellites with large elliptical orbits that were coded as geosynchronous orbits instead because elliptical orbits, going on and off screen, weren't jiving well.
And there are two issues that I still remember. The first is that after you toggle the stars off, given enough time, more will rise from the bottom of the screen and then the toggle button ceases to work. And secondly, for some reason that I cannot for the life of me figure out, some satellites will randomly orbit counterclockwise, when the code specifically sets them up to go clockwise. Hit enough buttons or refresh and they fix themselves. And then they might randomly start going the other way again.
In addition to the visualizations, I also set up the framework for our story, added the fullpage repo into our project as a way to have 'slides', and found/incorporated the parallaxing stars from this codepen as our background.
Lastly, I photoshopped our faces for the credits (OG picture). We look pretty rad, if I do say so myself.
The teaching staff go through at the end of the course and vote on their top favorite projects. Out of 41 group projects in the course (every project with at least three members, it was a big course), our project placed fifth and received an honorable mention. For a project that definitely has a lot of room for improvement, we were ecstatic.
