Dance of the Planets
For once, this post is not belated because I just finished development on this little app yesterday. Small victories!
I am now working as a Senior Consultant out of Slalom's San Francisco office. Since I just started early this month, I'm still "on the bench" as they say, waiting to be sent into action on my first project. I love that as a consultant, I am encouraged to use this down time to learn and grow professionally! I've been wanting to branch out from just using Tableau all the time, more into the world of front-end data visualization, so now is the perfect time.
Tutorials completed, I could finally get started.
For this project, I'm using data from NASA's Horizons API, which has coordinates for many different bodies in our solar system - from planets and their moons to asteroids and comets - at pretty much any given time, relative to your choice of city or even planet. So my first real step was to get something on the page using static data that I downloaded from the Horizons web app, as shown above. Once I got that working with one body, I downloaded a few more and made sure my script would work by looping through the list of bodies. I wrapped all of my spheres in high-resolution textures from this site to make the planets and the Sun all look realistic.
Next, it was time to start making real API calls to get my data. This is where development had to slow down just a little bit, because the NASA API server can't handle too many calls at once, so each one had to be spaced out using a timeout function in Angular. The final waiting time in between calls is 2.5 seconds(!) which explains why the app takes so stinking long to load since it has to wait in between all the 8 planets (no, Pluto is not a planet!) and the Sun.
Ultimately, it was the first part of this StackOverflow answer which I was able to use to fix the problem once and for all. I was able to very easily (and free-ly) create a little app on Heroku and deployed this CORS Anywhere proxy to it. For once in my dev career, everything actually worked as expected and I didn't run into any weird, undocumented bugs or glitches. It was blissful.
From here, there wasn't too much left to do! I created the header as an image in Figma, which is a wonderful design tool - great for creating and editing vector images, amazing for collaboration, easy to use, and has a very solid free option. Then I added a minimal blurb of informative text, slapped on my cute little logo (created by the amazing Andrea Millea), and deployed it to my Github site.
Are there things I could have done differently? Absolutely. To name just a few, I could have added:
Comments are closed.
Here you'll find detailed write-ups of all projects featured on the homepage.