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. [Note: unfortunately, Heroku has discontinued their free tier so I need to find a different tool to fulfill these purposes, but haven't had the time. Hopefully sometime before the end of 2023!]
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:
Though I am writing this well after the fact, above you can see the first d3 visualization I have made which can be shared publicly. I completed it as part of the weekly Tableau community project called #MakeoverMonday, and it is the first time I completed one of these projects with d3 instead of Tableau.
In this visualization, I used d3 version 4 to create a responsive bar graph illustrating the total number of spacewalks from the International Space Station in each year from its launch until early 2019, when I completed this project. The data is housed in a CSV and can be obtained from NASA.
Please note that the visualization resizes and even rearranges as you change the size of your browser window, including the hand-coded squiggly path which does not appear if there is insufficient room for it.