Clock

A clock, constructed using nested components with d3-component.

Since we're not confined to physical limitations, why not have a "millisecond hand"?!

This is an optimized and refactored version of the first-pass implementation: Poorly Performing Clock.

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/d3@4"></script>
  <script src="https://unpkg.com/d3-component@3"></script>
</head>
<body>
  <script>
    var clock = (function (){
      var timerLocal = d3.local();
      return d3.component("svg")
      	.create(function (selection, d){
        	var width = d.width,
              height = d.height,
              side = Math.min(width, height),
              outerCircleStrokeWidth = side * d.outerCircleThickness,
              centralCircleRadius = side * d.centralCircleSize,
              midnight = d3.timeDay(new Date()).getTime(),
              second = 1000,
              minute = second * 60,
              hour = minute * 60,
              day = hour * 12;
        
        	// Update SVG dimensions.
          selection
              .attr("width", width)
              .attr("height", height);
          
        	// Outer circle.
        	selection.append("circle")
            	.attr("cx", width / 2)
              .attr("cy", height / 2)
              .attr("r", side / 2 - outerCircleStrokeWidth)
              .attr("fill", "none")
              .attr("stroke", "black")
              .attr("stroke-width", outerCircleStrokeWidth);
        
          // Central circle.
        	selection.append("circle")
            	.attr("cx", width / 2)
              .attr("cy", height / 2)
              .attr("r", centralCircleRadius);
        	
          function hand(handLength, handWidth, color){
            var spindle = selection.append("g")
                .attr("transform", "translate(" + width/2 + "," + height/2 + ")")
              .append("g");
            spindle.append("line")
                .attr("x2", side / 2 * handLength)
                .attr("stroke", color || "black")
                .attr("stroke-width", side * handWidth);
            return spindle;
          }
        
        	var hourHand = hand(d.hourHandLength, d.hourHandWidth),
        	    minuteHand = hand(d.minuteHandLength, d.minuteHandWidth),
        	    secondHand = hand(d.secondHandLength, d.secondHandWidth),
        	    millisecondHand = hand(d.msHandLength, d.msHandWidth, "white");
          
          function angle(ms, timespan){
            return (ms / timespan % 1) * 360 - 90;
          }

timerLocal.set(selection.node(), d3.timer(function (){
            var ms = Date.now() - midnight;
            hourHand.attr("transform", "rotate(" + angle(ms, day) + ")");
            minuteHand.attr("transform", "rotate(" + angle(ms, hour) + ")");
            secondHand.attr("transform", "rotate(" + angle(ms, minute) + ")");
            millisecondHand.attr("transform", "rotate(" + angle(ms, second) + ")");
          }));
        })
      	.destroy(function (selection){
        	timerLocal.get(selection.node()).stop();
        });
    }());

d3.select("body")
      .call(clock, {
        width: 960,
        height: 500,
        outerCircleThickness: 0.01,
        centralCircleSize: 0.04,
        hourHandLength: 0.7,
        hourHandWidth: 0.03,
        minuteHandLength: 0.85,
        minuteHandWidth: 0.015,
        secondHandLength: 0.9,
        secondHandWidth: 0.005,
        msHandLength: 0.08,
        msHandWidth: 0.004
      });

</script>
</body>

https://unpkg.com/d3@4

https://unpkg.com/d3-component@3