D3 Visualization | High School Clock
The High School Clock design is based on a photo I found after Googling high school clock
, oddly enough. While most clocks of this ilk generally look alike, I was intrigued by the small details of the clock hand shapes.
I built the project with D3, a JavaScript data visualization library. The coolest thing is that this clock actually keeps accurate time by using setInterval
and the native Date
object. I update the position of the hands every second and use different animations to achieve a realistic look.
- The hour hand is basic, a simple rectangle
- The minute hand is tapered, a bit more modern looking
- The second hand is mainly thin, with an interesting trapezoid balancing feature
The implementation of these hands uses SVG Polygon elements. To code each hand a function my output a set of points mathematically related to each other. The radius
of the clock and various contacts are used to maintain proportion.
The Polygon coordinates for the hour hand are generated by the function below.
function hourHand() {
var w = radius / 30
var b = radius / 7.5
var t = radius / 2.1
return `${-w},${b} ${w},${b} ${w},${-t} ${-w},${-t} ${-w},${b}`
}