D3 Examples - SVG Clock

xxxxxxxxxx
 
<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  </head>
​
  <body>
    <script>var chart = d3.select("body").append("svg:svg")
                .attr("class", "chart")
                .attr("width", 600)
                .attr("height", 600).append("svg:g")
                .attr("transform", "translate(200,200)");
        chart.append("svg:path").attr("fill","black").attr("d", d3.svg.arc().innerRadius(160).outerRadius(162).startAngle(0).endAngle(Math.PI*2));
        var hourRing = chart.append("svg:path").attr("fill","red");
        var minuteRing = chart.append("svg:path").attr("fill","yellow");
        var secondRing = chart.append("svg:path").attr("fill","green");     
        var millisecondRing = chart.append("svg:path").attr("fill","black");
        window.setInterval(function(){
            var a = new Date();
            hourRing.attr("d", d3.svg.arc().innerRadius(140).outerRadius(160).startAngle(0).endAngle(Math.PI*2/12*(a.getHours()%12)));
            minuteRing.attr("d", d3.svg.arc().innerRadius(120).outerRadius(140).startAngle(0).endAngle(Math.PI*2/60*(a.getMinutes())));
            secondRing.attr("d", d3.svg.arc().innerRadius(100).outerRadius(120).startAngle(0).endAngle(Math.PI*2/60*(a.getSeconds())));         
            millisecondRing.attr("d", d3.svg.arc().innerRadius(98).outerRadius(100).startAngle(0).endAngle(Math.PI*2/1000*(a.getMilliseconds())));
        },10)
    </script>
  </body>
    