 Click the image to go see the app, and then go make a sandwich while it loads because it takes forever. 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. My gateway into JavaScript was d3.js, which is an interesting/odd way to be introduced to front-end development. When I first started that journey years ago, I was very much a purist and wanted to develop using d3 exclusively (see my d3 project blog post). Over time I learned that business users pretty much never use d3 alone, but instead use it inside a framework. Since my company at the time was a React shop, I learned the React framework. Turns out, I didn't really like the structure of how React apps are set up, nor "The React Way" of doing things, so fast-forward to today: with my bench time I wanted to dust off my JS skills and pick up Angular instead. Happily, I had already been exposed to TypeScript so it hasn't been as steep a learning curve as it could have been. Once I finished some Angular tutorials, my next step before jumping into this project was to learn how to use the WebGL-heavy Three.js 3D JavaScript library in conjunction with Angular. The usefulness of this tutorial and accompanying code on Github cannot be understated for these purposes. Tutorials completed, I could finally get started.  These are the settings I last used when manually downloading data, before I set up the API calls. 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. At this point too, making API calls to a server outside of my own dev environment, I started running into "Cross-Origin Resource Sharing" (CORS) issues, with which anyone who's made API calls from JavaScript is quite familiar. To get around it during development, I switched to Safari instead of Chrome, where I could very easily leverage a developer tool which allowed me to disable Cross-Origin Restrictions with a simple check of a box:  This was the easiest way to get around Cross-Origin Restrictions during development, just as a temporary measure while I got everything else working first. 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:
Perhaps someday. |
Here you'll find detailed write-ups of all projects featured on the homepage. ArchivesCategories
All
|
RSS Feed