Shaking up a multi-million dollar industry.

Shaking up a multi-million dollar industry.

TL;DR: https://stars.trentbowden.dev/ replicates popular star map websites, using the same underlying package to provide their product for free.

Ever been to a restaurant, and thought: “I could make this at home!”?

Well, maybe you couldn't; they probably have a 12 burger stove and a team of people working together after all.

Imagine discovering they were using the same microwave you have at home, the ingredients were free, and you could make it all by yourself.

Open source code (collaboratively made software for anyone to use) is the software community’s way of helping each other focus on creating more without reinventing several wheels in the process.

Every app is almost guaranteed to have any combination of:

  • Code directly from Stack Overflow, hastily solving a bug
  • A package of code from Some Guy ™ for a niche problem, and
  • A package of code created by a thriving community, for a broader problem

Discovering a heist:

2 years ago, I found a multi-million dollar industry, where every business within it is putting a (very) thin veil over the same open-source repo, selling the program’s output. 

The product? Star Maps:

What’s your most sentimental shared memory? If you know where and when it happened, you can create a gorgeous map of the stars above that very position at that very moment.

It’s beautiful! It’s sentimental! It can also set you back $600. People do anything for love - but they shouldn't be paying that. Let's break down what is actually going on here.

  • Frame: $25.
  • A3 printing: $10.
  • Image to print: $565!?

Have they poured hundreds of hours of R&D into proprietary software for mapping stars? Nope.

Have they been cleverly combining open-source code from an astronomy nerd, with an image generator? Yes.

Let’s recreate their setup right here and now.

It all starts with Olaf

Olaf Frohn (Armchair Astronautics) Is the hero of our story. A Javascript dev with a love for mapping solar missions and space observations.

Olaf gifted the world a concoction of the D3 Javascript visualisation library and GeoJSON celestial position data (compiled by himself and Diego Hernangomez) to create D3-Celestial!

When fired up, it projects star location data to an interactive spherical HTML canvas, with options for setting location and time.

You simply input your location, date, time and voila! you have your star map.

D3-celestial in action

Photoshop could get a savvy user to the end goal (a fancy print worth over $500) from here. But not us! We want the final product at the click of a button. Let’s continue, shall we?

Time to recreate

Firstly, let’s make the experience better. On the popular brand thenightsky, every change of setting requires a slow reload from the server.

The night sky, our newest competitor.

The globe you see is conjured up by sifting through various star geojson coordinate files, adjusting them for time/date and projecting onto the D3 visualisation library canvas. 

Since the d3 library is javascript and can run in the client’s browser, we can make this better, by provide immediate reloads on configuration changes.

In terms of styling, Olaf has probably made the most configurable package I've come accross as a developer, including:

  • Changing between almost 70 projection types
  • Full styling for every element in the sky
  • The ability to add custom celestial objects to the display
  • Animation, interactivity

Including an extensive dataset of constellations, the milky way, and stars/deep space objects down to the 20th Magnitude (much fainter than we can see)

The beauty of our project is: we simplify all these configurations into a few choices of pre-set stylings:

All of this is pretty, but the ultimate goal is to export a usable image, which requires constructing an SVG from both the celestial-map canvas, and the input data.

Why SVG?: It allows the user to scale the image up as large as they like, an important quality for something that might end up on a wall.

Exporting caused the project to sit still for a long time.

Because of the way the d3 canvas is rendered, it was hard to judge exactly where to place a border, and how to position it on the screen to accommodate for different screen pixel densities.

Olaf had planned to create an 'export to SVG' method, but it never happened, so we had to do some real deep-diving to make this happen.

Exporting has two steps:

  1. The celestial-map canvas is exported at a configured size, with all stars and configuration set by the user.
  2. The portrait background and text is then constructed as elements for the final product.

I ran into issues with high-DPI monitors. Modifying the sizing and positioning the D3 canvas for any sized/DPI screen was definitely something to account for, and not something I've perfected by any means.

Doing this in a consistent environment (docker container/lambda) would have allowed consistent results. I drove down this route before pulling the handbrake. Here's why

Why this wasn't done on the back-end:

James Sutton made a headless-d3 setup for this, allowing a canvas to be produced without a browser. My original plan was to create a docker image that could be given the date/time/location/etc configuration and spit out an image. 

This docker image would then sit on an AWS Lambda that, hopefully, would sit in the free tier as it spits out free images.

Plenty of work was done toward this, and it taught me a lot about Docker/, AWS Lambda, but a couple of considerations lead us to our entirely-browser-based version today:

  1. Experience: Having this in-browser allows d3 to really strut it’s stuff. Tinkering with a location or date and clicking “Update Map” will rotate the globe toward the expected location, which is WAY cooler than a loading bar.
  2. Simplicity: Friends don’t let friends design overcomplicated back-end structures where a HTML file would suffice.
  3. Cost: Location APIs can be called from the client’s browser, meaning I'm not succeptible to rate-limiting. Nothing lives within any free tiers, and I don’t fear the monthly cost bill from AWS rising above $0.

Ultimately, we were able to replicate a viable product with a better experience, for free, learning a LOT along the way. Couldn't ask for more, could you.

Signing off, I am thankful for the work Olaf Frohn has put into the underlying celestial-map library that makes this possible. If you’re a space nerd or just a sticky-beak, check out his blog:

https://armchairastronautics.blogspot.com/

Try it yourself

Visit https://stars.trentbowden.dev/ to give it a shot!

Here's an example output: