digital & line clock by aaizemberg

index.html

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
  <meta charset="utf-8">
  <title>line clock</title>
</head>
<body>

<script>    
var timer = setInterval(update, 1000);

var svg = d3.select("body").append("svg").attr("width", 120).attr("height",80);
  
var cada15 = [0,15,30,45,60];
svg.selectAll('ticks').data(cada15).enter().append("line")
   .attr("stroke-width", 0.5)
   .attr("x1",function(d) {return d*2;})
   .attr("y1",20)
   .attr("x2",function(d) {return d*2;})
   .attr("y2",80)
   .attr("stroke","grey");
  
var d = new Date();
var s = d.getSeconds(); // 0 .. 60
var m = d.getMinutes(); // 0 .. 60
var h = d.getHours();   // 0 .. 23
var hScale = d3.scale.linear().domain([0,23]).range([0,120]);
  
var horas = svg.selectAll("horas").data([h]).enter()
   .append("line")
   .attr("stroke-width", 4)
   .attr("stroke","red")
   .attr("class", "horas")
   .attr("x1",hScale(h))
   .attr("y1",20)
   .attr("x2",hScale(h))
   .attr("y2",39);

var minutos = svg.selectAll("min").data([m]).enter()
   .append("line")
   .attr("stroke-width", 2)
   .attr("stroke","green")
   .attr("class", "min")
   .attr("x1",m*2)
   .attr("y1",40)
   .attr("x2",m*2)
   .attr("y2",59);

var segundos = svg.selectAll("sec").data([s]).enter()
   .append("line")
   .attr("stroke-width", 1)
   .attr("stroke","blue")
   .attr("class", "sec")
   .attr("x1",s*2)
   .attr("y1",60)
   .attr("x2",s*2)
   .attr("y2",79);

var hms = addZero(h) + ':' + addZero(m) + ':' + addZero(s);
  
var t_hms = svg.selectAll("t_hms").data([hms]).enter()
   .append("text")
   .attr("class", "t_hms")
   .attr("x",32)
   .attr("y",12)
   .text( function(d) {return d;} );

function update() {
  d = new Date();
  s = d.getSeconds();
  m = d.getMinutes(); 
  h = d.getHours();
  hms = addZero(h) + ':' + addZero(m) + ':' + addZero(s);

  horas.attr("x1",hScale(h)).attr("x2",hScale(h));
  minutos.attr("x1",m*2).attr("x2",m*2);
  segundos.transition().ease("bounce").attr("x1",s*2).attr("x2",s*2);

  t_hms.text( hms );
}

function addZero(s) {
  return ("0" + s).slice(-2);
}
</script>  

</body>
</html>