Sunset Here is Sunrise Where?
When it's sunset in San Francisco, it's sunrise in Bhutan. In June, it's sunrise in Amsterdam instead. The pairing changes every day, tracing an arc across the globe as the seasons shift.
This felt like something Google should be able to show me, but couldn't. Neither could ChatGPT. So I built a map that can:
Eyeballing an answer
As I Googled, I realized that I could kind of compute where the sun is simultaneously rising and setting with a map that shows where sunshine is.
The map on CelestialProgramming.com plots a line showing the edge of sunlight, which the world calls a terminator line. On December 4, I could move the time slider to approximately where the sun is setting in California. Then I could look at the arc of where the dark transitioned to lightness and see that it was rising ... somewhere in Bangladesh? And I guess also somewhere in China and Eastern Russia?
A quick Google suggests that San Francisco's sun sets at 4:51 PM in GMT-8 and sunrise in Dhaka, Bangladesh is 6:26 AM in GMT+6. That's a difference of 25 min: close enough to make a good story, but far enough to try to do it more accurately...
Playing around a bit more I noticed that the corresponding sunrise fell on the other side of India! So the answer would change throughout the year...
Enthralled, I set about to make the insight of this small map more accessible. This code is public domain licensed and Claude trivially bolted on an interactive map so users could pan and zoom around the world. But I then wanted to make a story out of it, so I set about trying to turn it into memorable sentence. This is where it got tricky.
Getting places around the world
To start building this memorable sentence, I grabbed a few thousand large cities from Wikidata, Wikipedia's structured-data sibling.
But as I started playing rigorously, I noticed that there were times when the sunrise was happening in the middle of the ocean. What can you call out then?
I turned to Wikimap, which plots Wikidata on a map. I saw the ocean was filled with:
- shipwrecks. The ocean has a lot of mapped ship wrecks. But I'm trying to show something happy, and no one wants to think of dead sailors at sea. Rejected ❌
- solar eclipses. Wikipedia has hundreds of years of eclipses, mapped to the coordinates of the maximum eclipse. This struck me as boring. Rejected ❌
- airports. WWII resulted in a lot of airports on tiny islands, and my target audience (my dad) loves planes. These would be a keeper ✅
- seamounts and undersea canyons. I'd never heard of these, but they sounded cool. They tend to be in the middle of the ocean with nothing else nearby. Keep ✅
I also ruled out:
- small towns. While it would be nice to include small towns with no airports like Edinburgh of the Seven Seas, there are 3 million civilized places and Claude couldn't write me a Wikidata query to easily extract them. I passed ❌
- islands. While they would include atolls like Nukuoro, the world has a lot of islands. The islands one might consider important probably already have an airport, and an island like Greenland is too big to be useful here ❌
- reefs. Reefs are larger than a single point. It's not legible to say "the sun is setting over the Great Barrier Reef" -- it covers 1,400 miles ❌
Sticking with just large-ish towns, airports, and seamounts, I came up with a list of 50,000 points that cover most of the planet. And indeed, on that day when it's sunset in Sydney, it's sunrise at Corvo Airport in the Azores and Tanquary Fiord Airport in Nunavut, Canada.
Finding places that mean something to someone
50,000 points of global coverge is great, but is too many for our visualization.
First, I had to decide the density of points I needed. On the day I was checking, San Francisco's sunset was about 5 minutes different from Stockton's (60 miles away); close enough to not need a separate point. But SF to Yosemite (150 miles) differed by 10 minutes, which felt like it should have a separate point. I settled on selecting points at least 100 miles apart.
Then, I'd need to rank the points. Ranking cities by largest population seemed obvious, but that seemed fraught: in the San Francisco Bay Area that would mean we call out San Jose and not San Francisco! Claude suggested that I show the city with Wikipedia articles in the most languages, and this worked well: San Francisco is covered in 80 more Wikipedias than San Jose.
I decided on a final ranking algorithm. The points that were the highest rank within 100 miles would go to the front end, and the UI would call out the highest ranked point for a given set of sunrise/sunset cities:
- cities first, ranked by number of Wikipedias, then population
- airports next, ranked by number of Wikipedias then annual passengers
- seamounts last, ranked by number of Wikipedias then depth
I discovered an emergent behavior I hadn't anticipated: the 100-mile rule chains. South Lake Tahoe is within 100 miles of Sacramento, so Tahoe gets excluded. Sacramento is within 100 miles of San Francisco, so Sacramento gets excluded too. This chaining found a good distribution of places throughout the world without needing hard cutoffs.
It works well. Thinking back to that troublesome sunset in Sydney, I've never heard of either Corvo or Tanquary Fiord, but Corvo Island has a Wikipedia article in 30 languages, whereas the Tanquary Fiord article is only in 6 languages. Probably calling out Corvo will mean more to more people.
Building with Claude
I used Claude Code throughout, and it handled the drudgery beautifully. Tasks like "move the program logic from old.html into the UI in new.html" were as simple as typing that sentence. It wrote Wikidata SPARQL queries with their arcane identifiers (wd:Q165357 instead of submarine_volcano). It imported CSVs into Postgres and exported query results to JSON, even handling details like rounding coordinates to 5 decimal places. But there were still some moments where I was glad I'd spent a few years doing it the hard way.
At one point, Gemini had grouped the UI elements into a sidebar div that worked on desktop but broke on mobile—the sliders appeared directly below the sentence, mid-screen, instead of anchored at the bottom where a thumb could reach them without covering the map. This was a UI problem because it meant the user's thumb would cover the map as they moved the sliders. Usually finding the bug is the hard part, but I spent several turns insisting Claude fix the responsive layout; it kept failing. After a bit of old fashioned debugging I suggested pulling the elements out of their parent div, it worked immediately.
Similarly, Claude needed help with Wikidata SPARQL extraction queries. Claude wrote the structure and successfully found common items like cities, but wasn't a help when the list came back with permafrost and not undersea mountains. While I'd never worked with Wikidata queries, I spent a few minutes debugging and realized Claude had found the wrong Q-number. I pointed this out with the correct example, Claude gave some Claude-isms ("Q179918 is permafrost, not submarine volcano!"), and proceeded to get the answer I expected.
Claude helped me hack the initial version in a day, then I spent a few more days playing with it and iterating on feedback from me and the friends who tried it. I added some more labels, will make the touch targets a bigger, etc. It's an exciting time to build.
Conclusion
I keep coming back to the map, sliding through the year. I had no idea Bhutan and San Francisco shared a sunset line, or that it would drift to Amsterdam by summer. The world is more connected than I thought.
You can find the map here.
- ← Previous
Finding the City Based On What's Open Now