Consume graph draft

gistfile1.js

http://jsfiddle.net/ym5w0gk5/6/

width = 200 ;
height = 200 ;

    //svg
var svg = d3.select("body").append("svg").attr("id","vis")
            .attr("width", width )
            .attr("height", height );

var rotate=90;
   
svg.selectAll('rect').data([0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100,110,120,130,140,150,160,170,180,190, 200, 210, 220,230,240,250,260,270,280,290,300]).enter().append("rect")
       .attr("id","myRect")
       .attr("fill","red")
       .attr("width",30).attr("height",5)
       .attr("x",-60)
       .attr("y",-5)
       .attr("transform", function(d, i) {
          return "translate("+width/2+","+height/2+")rotate("+ (rotate + d) +")"
        });

svg.selectAll('text').data([0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100,110,120,130,140,150,160,170,180,190, 200, 210, 220,230,240,250,260,270,280,290,300]).enter().append("text")
       
       .attr("x",-90)
       .attr("y",-5)
       .attr("transform", function(d, i) {
          return "translate("+width/2+","+height/2+")rotate("+ (rotate + d) +")"
        })
.text( function (d) { return d; })
                .attr("font-family", "sans-serif")                .attr("font-size", "10px")
              .attr("fill", "yellow");

    svg.append("circle").attr("cx",width/2).attr("cy",height/2).attr("r","30");
svg.append("circle").attr("cx",width/2).attr("cy",height/2).attr("r","60").style("fill", "none")
          .style("stroke", "black")
          .style("stroke-width",".5px");