D3 Examples - Repeat finder circle ruler arc genes

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic">
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>
​
<body>
  <script>
    var svg = d3.select("body").append("svg")
    svg.append("circle")
      .attr({cx: 300, cy: 300, r: 200})
      .style({ fill: "green", opacity: 1})
      .attr({stroke: "black"});
    
//Add code for line ticks
    
  
     
    svg.append("circle")
      .attr({cx: 300, cy: 300, r: 150})
      .attr({stroke: "black"})
      .style({ fill: "white", opacity: 1});
​
    d3.json("genes.json.txt", function(error, json) {
          if (error) return console.warn(error);
            var genes = svg.selectAll(".genes")
        .data(json)
          .enter()
        .append("g")
        .attr("transform", "translate (300,300)");
    
    //outer circle
      var r = 250
      var p = Math.PI *2;
    
      var arc = d3.svg.arc()
        .innerRadius(r-30)
        .outerRadius(r)
          .startAngle(0)
          .endAngle(p)
      
          genes.append("path")
        .attr("d", arc)
        .style({fill: "red"})
        .attr("stroke", "black");      
      
      
      
      ;})
​
     
    
  </script>
</body>
​
    