Concentric Clock

A concentric clock adapted from Mike Bostock's "Arc Tween (clock)".

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Windows 8 Like Timer</title>
		<script src="https://d3js.org/d3.v3.min.js"></script>
  </head>

var fields = [
	  {name: "seconds", value: 0, size: 60, order: 0},
	  {name: "minutes", value: 0, size: 60, order: 1},
	  {name: "hours", value: 0, size: 24, order: 2}
	];

var outerRadiusInit = w / 2.2;
	var arcWidth = 35;
	var innerRadiusInit = outerRadiusInit - arcWidth;

var svg = d3.select("#chartArea").append("svg:svg")
	    .attr("width", w + margin.left + margin.right)
	    .attr("height", h + margin.top + margin.bottom)
	  .append("svg:g")
	    .attr("transform", "translate(" + margin.left + "," +(margin.top + h/2)+ ")");

var startBool = true;

svg.append("text")
		.text("start")
		.attr("id", "valueOutput")
		.attr("text-anchor", "middle")
		.attr("transform","translate(" + w / 2 + ",0)")
		.on("click", function(){
			d3.select(this)
				.attr("fill", "teal");
			startBool = !startBool;
			console.log(startBool);
		});

setInterval(function() {
	  var d = new Date();

fields[0].previous = fields[0].value; fields[0].value = d.getSeconds();
	  fields[1].previous = fields[1].value; fields[1].value = d.getMinutes();
	  fields[2].previous = fields[2].value; fields[2].value = d.getHours();

var timeString = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
	  d3.select('#valueOutput').html(timeString);

var path = svg.selectAll("path")
	      .data(fields.filter(function(d) { return d.value; }), function(d) { return d.name; });

path.enter().append("svg:path")
	      .attr("transform", function(d, i) { return "translate(" + h/2 + ",0)"; })
	    .transition()
	      .ease("linear")
	      .duration(1000)
	      .attrTween("d", arcTween);

path.transition()
      .ease("linear")
      .duration(1000)
      .attrTween("d", arcTween);

path.exit().transition()
      .ease("ease")
      .duration(750)
      .attrTween("d", arcTween)
      .remove();

}, 1000);

function arcTween(b) {
	  var i = d3.interpolate({value: b.previous}, b);
	  return function(t) {
	    return arc(i(t));
	  };
	}
</script>
</html>

https://d3js.org/d3.v3.min.js