Repeat finder circle ruler arc genes

forked from grybnicky's block: Repeat finder circle ruler

forked from anonymous's block: Repeat finder circle ruler

forked from grybnicky's block: Repeat finder circle ruler arc genes

-<!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 genomelength = 8000
    
    d3.json("genes.json.txt", function(error, json) {
		  if (error) return console.warn(error);
    var arc = d3.svg.arc()
			.innerRadius(function(d){if (d.name%2==0)
          return 240
        else if (d.name%2==1)
          return 200;})
			.outerRadius(function(d){if (d.name%2==0)
          return 280
        else if (d.name%2==1)
          return 240;})
		    .startAngle(function(d, i){return (d.start/genomelength)*2*Math.PI;})
		    .endAngle(function(d, i){return (d.stop/genomelength)*2*Math.PI;})
			;

/*var "1000ticks" = d3.svg.arc()
        .radius (function(d){return})*/
      
	var chart = d3.select("body").append("svg:svg")
			.attr("class", "chart")
			.attr("width", 420)
			.attr("height", 420).append("svg:g")
			.attr("transform", "translate(400,400)")
			;

chart.selectAll("path")
			.data(json)
			.enter().append("svg:path")
			.style("fill", function(d, i){ if (d.direction=="forward")
				return "green"
        else if (d.direction=="reverse")
        return "red";
			})
      .style("stroke", "black")
			.attr("d", arc)
			
      
    chart.append("circle")
      .attr({cx: 0, cy: 0, r: 200})
      .style({fill: "gray", opacity: 1})
      .attr({stroke: "black"});
    
//Add code for line ticks

chart.append("circle")
      .attr({cx: 0, cy: 0, r: 150})
      .attr({stroke: "black"})
      .style({ fill: "white", opacity: 1});
      ;})

</script>
</body>

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