title: Rotation wheel with 12 fields like a chart
body: <p>I have to create a rotation wheel with 12 fields like in the image below link :<a href="http://www.resilienciacomunitaria.org/" rel="nofollow">http://www.resilienciacomunitaria.org/</a>
  How i create through which approach?
  I used canvas for this but not successful i used d3.js svg but not successful .</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;canvas id="canvas" width="600" height="600" 
  style="background-color:#ffff"&gt;
  &lt;/canvas&gt;
  &lt;script type="text/javascript"&gt;
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var radius = canvas.height /2; //400
  //alert(radius);
  
  //draw a circle again and agian 
    ctx.translate(radius, radius);
  
  
      radius =radius*0.85;
      setInterval(drawCircle, 50);
      function drawCircle() {
          var pos = .01;
          var length = 100;
          var width = 40;
              drawFace(ctx, radius);
              drawHand(ctx, pos, length, width); 
  
  
   }
  function drawFace(ctx,radius){
  
        ctx.beginPath();
        ctx.arc(0, 0, 50, 0, 2 * Math.PI, false);
        ctx.fillStyle = '#ffff';
        ctx.strokeStyle = 'blue';
        ctx.fill();
        ctx.stroke(); 
  
  
        ctx.beginPath();
        ctx.arc(0, 0, radius, 0, 2 * Math.PI, false);
        ctx.strokeStyle = 'yellow';
         ctx.fillStyle = 'blue';
        ctx.lineWidth = 50;  
        ctx.fill();
        ctx.stroke();
  
  }
  function drawHand(ctx, pos, length, width) {
  
    ctx.beginPath();
      ctx.lineWidth = 30;
  
  
      ctx.moveTo(-radius,0);
      ctx.lineTo(radius, 0);
      ctx.moveTo(-radius,150);
      ctx.lineTo(radius, -150);
      ctx.moveTo(-radius,-150);
      ctx.lineTo(radius, 150);
      ctx.moveTo(-radius,380);
      ctx.lineTo(radius, -380);
      ctx.moveTo(-radius,-380);
      ctx.lineTo(radius, 380);
      ctx.moveTo(0, -radius);
      ctx.lineTo(0, radius);
  
      ctx.stroke();
  /*
      ctx.globalCompositeOperation='destination-over';
      ctx.font="20px Verdana";
      ctx.fillStyle = 'white';
      ctx.fillText("Explore Zero",180,180);
  
      ctx.stroke();
  
      ctx.globalCompositeOperation='source-over';*/
      ctx.rotate(-pos);
  
  }
  
  
  &lt;/script&gt;   
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks in advance</p>