Self-Rotating Analog Clock

This block uses D3.js to draw a clock that tells the time by rotating itself. No need for hands! It also uses chroma.js to color the background according to the time of day.

I learned how to calculate the points around a circle's circumference from this stackoverflow thread. Mathematicians call it the parametric equation for a circle.

<html>
  <head>
    <style>
    body {
      margin: 0;
      font-family: "Helvetica Neue", sans-serif;
    }
    .border {
      fill: #fff;
      stroke: #3a403d;
      stroke-width: 20px;
    }
    .tick {
      stroke: #3a403d;
    }
    .tick.hour {
      stroke-width: 4px;
    }
    .tick-minute {
      stroke-width: 1px;
    }
    .inner-circle {
      fill: #fff;
    }
    .text {
      fill: #fff;
      font-size: 10px;
    }
    .track {
      fill: #e74c3c;
    }
    .half {
      fill: #3a403d;
    }
    </style>
  </head>
  <body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.1/chroma.min.js"></script>
    <script>
    // declare a whole bunch of variable to draw with
    var borderWidth = 20,
      every = 144;
      svg = d3.select("body").append("svg"),
      g = d3.select("svg").append("g"),
      circle = g.append("circle"), // lch mode creates more saturated colors
      color = chroma.scale(["#281324", "#ffff00", "#281324"]).mode('lch'), // a color scale for the background
      ticks = [],
      text = [];
    for (let i = 1; i <= every; i++){
      ticks[i] = g.append("line");
      text[i] = g.append("text").attr("text-anchor", "middle");
    }
    var innerCircle = g.append("circle"),
      half = svg.append("text").attr("text-anchor", "middle"),
      track = svg.append("polygon");

function draw(){
      var width = window.innerWidth,
        height = window.innerHeight,
        radius = height < width ? height / 2 - borderWidth / 2 : width / 2 - borderWidth / 2; // the radius of the circle will change depending on the window orientation

// the big svg wrapper
      svg
          .attr("width", width)
          .attr("height", height);

// a square-shaped g element that can be rotated around its center
      g
          .attr("width", width > height ? height : width)
          .attr("height", width > height ? height : width);

// clock border
      circle
          .attr("class", "border")
          .attr("cx", width / 2)
          .attr("cy", height / 2)
          .attr("r", radius);

// calculate ticks
      for (let i = 1; i <= every; i++){

// The parametric equation for a circle is
        // x = cx + r * cos(a)
        // y = cy + r * sin(a)
        // Where r is the radius, cx,cy the origin, and a the angle in radians.

// A radian is 57.2958 degrees

var x = radius * Math.cos((360 * (i / every)) / 57.2958) + width / 2,
          y = radius * Math.sin((360 * (i / every)) / 57.2958) + height / 2;

// draw ticks, with thicker ticks for the hours
        ticks[i]
            .attr("class", "tick " + (i / 12 % 1 == 0 ? "hour" : "minute"))
            .attr("x1", width / 2)
            .attr("y1", height / 2)
            .attr("x2", x)
            .attr("y2", y);

// first, only select the hours, and then calculate the hours
        // (knowing that the 12 defaults to where the 3 should be)
        var t = i / 12 % 1 == 0 ? i / 12 >= 10 ? i / 12 - 9 : i / 12 + 3 : null;
        text[i]
            .attr("class", "text")
            .attr("x", x)
            .attr("y", y)
            .attr("dy", borderWidth / 5)
            .text(t);

}

// plop a white circle in the center to hide some of the tick lines
      innerCircle
          .attr("class", "inner-circle")
          .attr("cx", width / 2)
          .attr("cy", height / 2)
          .attr("r", radius / 1.2);

// use d3 timer to handle the gradual rotation
      d3.timer(function(elapsed){

// calculate rotation based on the current time
        var date = new Date(),
          hrs = date.getHours(),
          hrs = hrs > 12 ? hrs - 12 : hrs,
          min = date.getMinutes(),
          sec = date.getSeconds(),
          time = hrs * 3600 + min * 60 + sec,
          tot = 12 * 3600,
          rot = -((time * 360) / tot);

// AM or PM?
        half
            .attr("class", "half")
            .attr("x", width / 2)
            .attr("y", height / 2)
            .attr("dy", radius / 12)
            .style("font-size", radius / 3)
            .text(new Date().getHours() > 11 ? "PM" : "AM"); // update the AM/PM situation

// calculate the background color (0 and 1 are beginning and end of day, .5 is noon)
        var c = (date.getHours() * 3600 + min * 60 + sec) / (3600 * 24);

// svg background
        svg
            .style("background", color(c));

g.attr("transform", "rotate(" + rot + " " + width / 2 + " " + height / 2 + ")"); // rotate the clock

// rotate the text (backwards)
        for (let i = 1; i <= every; i++){
          var x = radius * Math.cos((360 * (i / every)) / 57.2958) + width / 2,
            y = radius * Math.sin((360 * (i / every)) / 57.2958) + height / 2;

text[i].attr("transform", "rotate(" + (-rot) + " " + x + " " + y + ")")
        };
      });

// now draw the track on top of the whole thing
      var topX = width / 2,
        topY = height < width ? 0 : height / 2 - radius - borderWidth / 2,
        a = (topX - 5) + "," + topY,
        b = (topX + 5) + "," + topY,
        c = topX + "," + (topY + radius / 6),
        tri = a + " " + b + " " + c;

// draw the track triangle
      track
          .attr("class", "track")
          .attr("points", tri);

} // end draw()

// allow for resizing
    window.onload = draw, window.onresize = draw;
    </script>
  </body>
</html>

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.1/chroma.min.js