D3 Examples - Repeat finder circle ruler arc genes line gen

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 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>
​
    