Updated on Jun 3rd, 20211 min readd3graphics

D3 Visualization | High School Clock

Clock Size

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.

Original High School Clock
Original High School Clock
  • 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}`

Check out the source code on Observable

Benjamin Brooke Avatar
Benjamin Brooke

Hi, I'm Ben. I work as a full stack developer for an eCommerce company. My goal is to share knowledge through my blog and courses. In my free time I enjoy cycling and rock climbing.