Polar Clock

Based on PolarClock

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  background: #111;
  font: 10px Helvetica;
  margin: auto;
  position: relative;
  width: 960px;
}

text {
  text-anchor: middle;
  alignment-baseline: middle;
  fill: #fff;
}

.hours {
  stroke: none;
  fill: none;
}

.hour text {
  fill: #fff;
  font-size: 12px;
}

.hour line {
  stroke: #fff;
}

.minute text {
  fill: #666;
  font-size: 8px;
}

.minute line {
  stroke: #666;
}

</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

var width = 960,
    height = 500,
    radius = 94;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var field = svg.selectAll("g")
    .data(fields)
  .enter().append("g")
  .attr("class", "field");

field.append("path");

field.append("text");

// minute hands
var minutedomain = d3.range(60);
var minuteangle = d3.scale.linear()
  .domain([0,60])
  .range([180,-180])

var minutemarks = svg.selectAll(".minute.axis")
    .data(minutedomain)
  .enter().append("g")
    .attr("class", "minute")
    .attr("transform", function(d) { return "rotate(" + -minuteangle(d) + ")"; })

minutemarks
  .filter(function(d) { return d % 5 == 0; })
  .append("text")
    .attr("y", 190)
    .attr("transform", function(d) {
      return "rotate(" + minuteangle(d) + ",0,190)";
    })
    .text(String);

minutemarks
  .append("line")
  .attr("x1", 168)
  .attr("x2", 180)
  .attr("y1", 0)
  .attr("y2", 0);

// hour hands
var hourdomain = d3.range(12);
var hourangle = d3.scale.linear()
  .domain([0,12])
  .range([180,-180])

var hourmarks = svg.selectAll(".hour.axis")
    .data(hourdomain)
  .enter().append("g")
    .attr("class", "hour")
    .attr("transform", function(d) { return "rotate(" + -hourangle(d) + ")"; })

hourmarks
  .append("text")
    .attr("y", 142)
    .attr("transform", function(d) {
      return "rotate(" + hourangle(d) + ",0,142)";
    })
    .text(String);

hourmarks
  .append("line")
  .attr("x1", 156)
  .attr("x2", 180)
  .attr("y1", 0)
  .attr("y2", 0);

var counter = 0;
function tick() {
  if (counter++ % 3 != 0) return;    // ease up on cpu

field.data(fields)
    .select("path")
      .attr("d", arc)
      .style("fill", function(d) { return d.color; });
}

d3.timer(tick);

</script>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js