JSFiddle - React, Tailwind, and code Playground

by Kristopher Johnson

HTML

<body></body>

CSS

svg.clock {
    stroke-linecap: round;
}

.face {
    stroke: #aac;
    stroke-width: 6;
}

.hourtick.face {
}

.minutetick.face {
    stroke-width: 2;
}

.hand {
    stroke: #336;
    stroke-width: 8;
}

.hour.hand {
    stroke-width: 12;
}

.minute.hand {
}

.second.hand {
    stroke: red;
    stroke-width: 4;
}

JavaScript

var showD3Clock = function() {

  var w = 320             // Width of SVG element
  var h = 320             // Height of SVG element

  var cx = w / 2          // Center x
  var cy = h / 2          // Center y
  var margin = 4
  var r = w / 2 - margin  // Radius of clock face

  var svg = d3.select("body").append("svg")
    .attr("class", "clock")
    .attr("width", w)
    .attr("height", h)

  makeClockFace()

  // Create hands from dataset
  svg.selectAll("line.hand")
    .data(getTimeOfDay())
    .enter()
    .append("line")
    .attr("class", function (d) { return d[0] + " hand"})
    .attr("x1", cx)
    .attr("y1", function (d) { return cy + handBackLength(d) })
    .attr("x2", cx)
    .attr("y2", function (d) { return r - handLength(d)})
    .attr("transform", rotationTransform)

  // Update hand positions once per second
  setInterval(updateHands, 1000)

  function makeClockFace() {
    var hourTickLength = Math.round(r * 0.2)
    var minuteTickLength = Math.round(r * 0.075)
    for (var i = 0; i < 60; ++i) {
      var tickLength, tickClass
      if ((i % 5) == 0) {
        tickLength = hourTickLength
        tickClass = "hourtick"
      }
      else {
        tickLength = minuteTickLength
        tickClass = "minutetick"
      }
      svg.append("line")
        .attr("class", tickClass + " face")
        .attr("x1", cx)
        .attr("y1", margin)
        .attr("x2", cx)
        .attr("y2", margin + tickLength)
        .attr("transform", "rotate(" + i * 6 + "," + cx + "," + cy + ")")
    }
  }

  function getTimeOfDay() {
    var now = new Date()
    var hr = now.getHours()
    var min = now.getMinutes()
    var sec = now.getSeconds()
    return [
      [ "hour",   hr + (min / 60) + (sec / 3600) ],
      [ "minute", min + (sec / 60) ],
      [ "second", sec ]
    ]
  }

  function handLength(d) {
    if (d[0] == "hour")
      return Math.round(0.45 * r)
    else
      return Math.round(0.90 * r)
  }

  function handBackLength(d) {
    if (d[0] ==...