title: Adding clock points to d3 pie chart
body: <p>I'm very new to D3 - in fact I only started yesterday - have a donut pie chart here:</p>
  
  <pre><code>var dataset = new Array();
  
  dataset[0] = {"value":"50","color":"red"};
  dataset[1] = {"value":"20","color":"blue"};
  
  var pie = d3.layout.pie().sort(null).value(function(d){return d.value;});
  
      var h = w = 500;
      var center = w / 2;
      var outerRadius = ((h/2)-5);
      var innerRadius = outerRadius-10;
      var arc = d3.svg.arc()
          .innerRadius(innerRadius)
          .outerRadius(outerRadius);
  
      var arcOutter = d3.svg.arc()
          .innerRadius(outerRadius)
          .outerRadius(outerRadius + 1);
  
      var arcInner = d3.svg.arc()
          .innerRadius(innerRadius)
          .outerRadius(innerRadius - 1);
  
  
      //Create SVG element
      var svg = d3.select("body")
          .append("svg")
          .attr("width", w)
          .attr("height", h);
  
      //Set up groups
      var arcs = svg.selectAll("g.arc")
          .data(pie(dataset))
          .enter()
          .append("g")
          .attr("class", "arc")
          .attr("transform", "translate(" + center + ", " + center + ")");
  
  
      //Set up outter arc groups
      var outterArcs = svg.selectAll("g.outter-arc")
          .data(pie(dataset))
          .enter()
          .append("g")
          .attr("class", "outter-arc")
          .attr("transform", "translate(" + center + ", " + center + ")");
  
      //Set up outter arc groups
      var innerArcs = svg.selectAll("g.inner-arc")
          .data(pie(dataset))
          .enter()
          .append("g")
          .attr("class", "inner-arc")
          .attr("transform", "translate(" + center + ", " + center + ")");
  
  
      //Draw arc paths
      arcs.append("path")
          .attr("fill", function (d, i) 
          {
          return d.data.color;
      }).attr("d", arc);
  
      //Draw outter arc paths
      outterArcs.append("path")
          .attr("fill", 'green')
          .attr("d", arcOutter).style('stroke', 'white')
          .style('stroke-width', 0);
  
      //Draw inner arc paths
      innerArcs.append("path")
          .attr("fill", 'green')
          .attr("d", arcInner).style('stroke', 'white')
          .style('stroke-width', 0);
  </code></pre>
  
  <p><a href="http://jsfiddle.net/uowe8vhb/" rel="nofollow noreferrer">jsFiddle chart</a></p>
  
  <p>But I'm struggling to add 4 clock points and their time tables to it, (12am, 3pm, 6pm, 9pm), I've tried searching clock examples but they're all working clocks, not just the points.</p>
  
  <p>I want it to look pretty much like this:</p>
  
  <p><img src="https://i.stack.imgur.com/ZYLrM.jpg" alt="enter image description here"></p>
  
  <p>Any help would be greatly appreciated.</p>