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>