simple analog clock using d3js

simple sample clock using d3js - using timer.

by plouffe514

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<h2>Simple Analog clock using D3Js - by Atul</h2>

<div id="mainDiv" style="width:800px; height:500px">
        <div id="menuTop" >
            <a id="startStop" style="font-size:x-large" href="javascript:StartStop()" >Start</a> |
            Speed : 
            <select id='speed' onchange="OnSpeedChange()" >
                <option value="5000" selected="selected">Very Slow</option>
                <option value="2000" selected="selected">Slower</option>
                <option value="1500" selected="selected">Slow</option>
                <option value="1000" selected="selected">Normal</option>
                <option value="500">Fast</option>
                <option value="100">Faster</option>
                <option value="20">Ver Fast</option>
            </select>
        </div>
        <div id="drawArea" style="width:100%; height:100%; border:1px solid gray">
        </div>
</div>

JavaScript

var cx; // center x of clock
    var cy; // center y of clock
    var gContainerId;
    var gCanvasId;
    var gTopGroupId;
    var radius; // radius of clock
    var intervalId = null;
    var granularity = 30;
    // draw line with length and angle
    function ReDrawNiddle(niddle, angle) {
        var svg = d3.select("#" + gTopGroupId);
        var line = svg.select('#' + niddle);
        var savedX2 = parseFloat(line.attr("x2Saved"));
        var savedY2 = parseFloat(line.attr("y2Saved"));
        var lineLength = parseFloat(line.attr("lineLength"));
        offsetX = savedX2 - (lineLength * Math.cos(angle + Math.PI/2));
        offsetY = savedY2 - (lineLength * Math.sin(angle + Math.PI/2));
        line
            .transition()
            .duration(100)
            .attr("x2", offsetX)
            .attr("y2", offsetY);
    }
    // as second niddle moves, it hightlights dot
    function HighLightDot(second) {
        var svg = d3.select("#" + gTopGroupId);
        var dot = svg.select('#' + "second_pos_" + second);
        var oldr = dot.attr("saver");
        var newr = parseInt(oldr) + 4;
        dot.attr("r", newr)
            .transition()
            .duration(100)
            .attr("r", oldr)
                ;
    }
    // create dial by putting dots and number 12, 3, 6 and 9
    function DrawDots() {
        for (var a = 0; a < 60; ++a) {
            var t = a * Math.PI / granularity;
            var lineLength = radius - 10;
            var offsetX = cx - (lineLength * Math.cos(t + Math.PI / 2));
            var offsetY = cy - (lineLength * Math.sin(t + Math.PI / 2));
            var svg = d3.select("#" + gTopGroupId);
            svg.append("circle")
                .attr("id", "second_pos_" + a)
                .attr("cx", offsetX)
                .attr("cy", offsetY)
                .attr("r", function () {
                    if (a % 5 == 0)
                        return 2;
                    else return 1;
                })
               ...