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
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)
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.
For the project, I examined the charting of sunspot numbers comparing the usual visualizations of line charts which because of the compressed nature of the x-axis don’t clearly show any cyclical activity except for the well-known 11-year solar cycle. Radial charts, conversely, are well suited to expose other cyclical data. By visualizing individual years, using sunspot number data from the National Solar Observatory between 1945-2017 (1), radial visualizations of sunspot numbers appear to show an underlying cycle.
Link to ZIP File [Files and Data] Link to Demo Intro Challenges Takeaways What's Next for App What's Next for John API Notes Other Notes Last Minute Updates Introduction Hi. I'm John Williams. I have a passion for science and nature, particularly astronomy. I've...