Repeat finder circle ruler arc genes line gen

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 = 80000
    
    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)*6.2;})
		    .endAngle(function(d, i){return (d.stop/genomelength)*6.2;})
			;

/*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
var r = d3.scale.linear()
    .domain([0, 1])
    .range([0, 200]);

//default accessor [[x1,y1]] => radian and angle
var line = d3.svg.line.radial()
    .radius(function(d){; return (r(d[1])); })  // will change between -1 and 1
    .angle(function(d) { ;return d[0];});
  
  
// radius axis
// cheat with CSS
var gr = chart.append("g")
  .attr("class", "r axis")
  .selectAll("g")
  .data(r.ticks(10).slice(0))
  .enter().append("g");
      
var thoutick = chart.append("g")
  .attr("stroke", "black")
  .selectAll("g")
    .data(d3.range(0, 355, (1000/genomelength)*355))
  .enter().append("g")
    .attr("transform", function(d) { return "rotate(" + (d-90) + ")"; });

var fhuntick = chart.append("g")
  .attr("stroke", "black")
  .selectAll("g")
    .data(d3.range(0, 355, (500/genomelength)*355))
  .enter().append("g")
    .attr("transform", function(d) { return "rotate(" + (d-90) + ")"; });

var fthotick = chart.append("g")
  .attr("stroke", "black")
  .selectAll("g")
    .data(d3.range(0, 355, (5000/genomelength)*355))
  .enter().append("g")
    .attr("transform", function(d) { return "rotate(" + (d-90) + ")"; });

fthotick.append("line")
    .attr("x2", 200);

fhuntick.append("line")
    .attr("x2", 160);
      
thoutick.append("line")
    .attr("x2", 175)
    .style("stroke", "black");
    
    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