I went through several iterations before settling on Planet-ock. Here are some original sketches.
Because I’m obsessed with astronomy and astronomical data visualizations, I thought it would be fun to build some sort of celestial clock. From suncalc.js, we can get not only sunrise, sunset, moonrise and moonset but also the altitude and azimuth of those objects. At the very least, I could build a clock that showed the current azimuth (direction) in the sky that the Sun and Moon are. This concept is inline with another site/app that I’ve been trying to build called LODClock (length of day clock) that shows the incremental changes in day length as the seasons progress.
ultimately, the clock would look something like this
Features
-
position in sky of Sun and Moon
-
position in sky of other planets (nice to have)
-
the position of the sunrise
-
the position of the sunset
-
the lines could represent brightness (wish list)
-
maybe sky could change color depending on time of day or weather (wish list)
Main Resources:
d3.js
suncalc.js
I found this reference on a discussion by Stephen R. Schmitt. He allows use of the calculator that does find the azimuth of the planets. This is a more complicated problem than I anticipated – the discussion on CodePen (https://codepen.io/lulunac27/full/NRoyxE) and calculator are included in my repo – http://atlas.local/cc/proj3/planets.html
Other Resources
The code outputs and is exactly what I’m looking for but I would like to understand it more and incorporate the methods into my clock.
I first started by building up several layers of clock look and feel. I had worked through a tutorial on making a clock in d3.js and used that as a base for my clock.
I wanted a face that showed directions every 15 degrees which would coorespond to N NNE NE ENE E etc., as well as ticks for each degree as a compass. These I appended to my scale, by adding scales to various functions that I might need using range and domain. I then added vars for each of the “hands” of the clock providing data for length and which scale they would be related with. Like a normal clock they were all associated with an “hour” scale.
I wanted the clock to show azimuths of sunrise and sunset (and therefore show length of day). What’s cool is that equinox occurs Tuesday, September 22, 2020 so the azimuth’s for both sunrise and sunset are close to 90 and -90 degrees. Those numbers will inch south toward winter solstice (less sunlight) and open up as we approach summer solstice. To show that, I used d3.arc() function with sunriseAzimuth and sunsetAzimuth to fulfill startAngle and endAngle and used clockRadius – 45 to set the outerRadius of the arc. and filled it with a blue.
Then I laid out the hands using the appropriate data to point in the correct direction. azimuth can be given two different ways; one north related the other south related. The data out of heavens-above.com for planetary azimuths are south related so they needed a subtraction of 180 degrees to flip them around. Also, suncalc.js provides azimuth in radians. So I had to convert that output to degrees (azimuth*180/Math.PI).
One issue that I ran across was initializing variables. I solved this by having two sets of the same variables for init and then for updating the clock. Not super efficient but workable.
Final Clock – https://www.terrazoom.com/atlas/cc/proj3/
One thing that would be cool is to do this clock from a 3D perspective, looking down and slightly to the west of Earth.
