Repeat Visualizer

Built with blockbuilder.org

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

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

forked from grybnicky's block: Repeat finder circle ruler arc genes line gen keystone numbering

forked from grybnicky's block: Repeat finder circle ruler arc genes line gen keystone numbering path attempt1

forked from grybnicky's block: Repeat finder circle ruler arc genes line gen keystone numbering Tool tip repeat connect attempt1

forked from scresawn's block: Repeat finder circle ruler arc genes line gen keystone numbering Tool tip repeat connect attempt1

forked from grybnicky's block: Repeat finder circle ruler arc genes line gen keystone numbering Tool tip repeat connect attempt1

forked from grybnicky's block: Repeat finder circle ruler arc genes line gen keystone numbering Tool tip repeat connect line random color tool tips

forked from grybnicky's block: Wheel animated Repeat finder circle ruler arc genes line gen keystone numbering Tool tip repeat connect line random color tool tips

forked from grybnicky's block: Wheel animated Repeat finder circle ruler arc genes line gen keystone numbering Tool tip repeat connect line random color tool tips highlight selection

-<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.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% }
    /*tool tip*/    
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
    /* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
    }
    
 .d3-tip1 {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 1);
  color: #fff;
  border-radius: 2px;
}
  </style>
</head>

<body>
<script>
  var randomColor = (function(){
  var golden_ratio_conjugate = 0.618033988749895;
  var h = Math.random();

var hslToRgb = function (h, s, l){
      var r, g, b;

if(s == 0){
          r = g = b = l; // achromatic
      }else{
          function hue2rgb(p, q, t){
              if(t < 0) t += 1;
              if(t > 1) t -= 1;
              if(t < 1/6) return p + (q - p) * 6 * t;
              if(t < 1/2) return q;
              if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
              return p;
          }

var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
          var p = 2 * l - q;
          r = hue2rgb(p, q, h + 1/3);
          g = hue2rgb(p, q, h);
          b = hue2rgb(p, q, h - 1/3);
      }

return '#'+Math.round(r * 255).toString(16)+Math.round(g * 255).toString(16)+Math.round(b * 255).toString(16);
  };
  
  return function(){
    h += golden_ratio_conjugate;
    h %= 1;
    return hslToRgb(h, 0.5, 0.60);
  };
})();
</script>
  <script>
var genomelength = 80000
    
var keystone = d3.svg.arc()
  .innerRadius(230)
  .outerRadius(250)
  .startAngle(-0.0436332)
  .endAngle(0.0436332)
    
var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-5, 5])
  .html(function(d) {
    return "<strong>GP:</strong> <span style='color:red'>" + d.name + "</span>";
  })
    
var chart = d3.select("body").append("svg:svg")
	.attr("class", "chart")
	.attr("width", 700)
	.attr("height", 700).append("svg:g")
	.attr("transform", "translate(400,400)")  
	;    
d3.json("genes.json.txt", function(error, json) {
	if (error) return console.warn(error);
    
var arcg = d3.svg.arc()
	.innerRadius(function(d){if (d.name%2==0)
        return 290
      else if (d.name%2==1)
        return 250;})
	.outerRadius(function(d){if (d.name%2==0)
        return 330
      else if (d.name%2==1)
        return 290;})
	.startAngle(function(d, i){
      return ((d.start/genomelength)*6.2)+0.0436332;})
  .endAngle(function(d, i){
      return ((d.stop/genomelength)*6.2)+0.0436332;})
			;
      
chart.call(tip);

var arcq = d3.svg.arc()
  .innerRadius(250)
.outerRadius(320)
.startAngle(0)
 .endAngle(2*Math.PI)

chart.selectAll("path")
	.data(json)
	.enter().append("svg:path")
	.style("fill", "4B4B4B")
  .style("stroke", "black")
  .attr("d", arcg)
  .style("opacity", 1)
  .on('mouseover.tip', tip.show)
  .on("mouseover.arc", function(d) {
  d3.select(this).style("stroke", "gold");
})                  
.on("mouseout", function(d) {
  d3.select(this).style("stroke", "black");
})
  .on('mouseout.tip', tip.hide)
  .transition().duration(4000)
	.style("fill", function(d, i){
      if (d.direction=="forward")
				return "green"
      else if (d.direction=="reverse")
        return "red";
			})

chart.append("circle")
   .attr({cx: 0, cy: 0, r: 250})
   .style({ fill: "gray", opacity: 1})
   .attr({stroke: "black"});
    
 chart.append("circle")
  .attr({cx: 0, cy: 0, r: 230})
  .attr({stroke: "black"})
  .style({ fill: "white", opacity: 1})
  .transition().duration(4000)
  .style({ fill: "white", opacity: 0}); 
  
    //Keystone
chart.append("path")
   .attr("d", keystone)
   .attr("fill", "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(2.5, 357.5, (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(2.5, 357.5, (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(2.5, 357.5, (5000/genomelength)*355))
  .enter().append("g")
  .attr("transform", function(d) {
      return "rotate(" + (d-90) + ")"; });

fthotick.append("line")
  .attr("x2", 250);      
 
fhuntick.append("line")
  .attr("x2", 235)
  .style({opacity: 0})
  .transition().duration(2000).delay(2000)
  .style({opacity: 1});
      
thoutick.append("line")
  .attr("x2", 240)
  .style({opacity: 0})
  .transition().duration(2000).delay(2000)
  .style({opacity: 1});
    
chart.append("circle")
  .attr({cx: 0, cy: 0, r: 230})
  .attr({stroke: "black"})
  .style({ fill: "white", opacity: 0})
  .transition().duration(4000)
  .style({ fill: "white", opacity: 1});
      
fthotick.append("text")
  .attr("x", 240)
  .attr("dy", ".35em")
  .style("text-anchor", "middle")
  .text(function(d) { return Math.ceil(((d-2.5)/355)*genomelength/1000); })
  .style("fill", "white")
  .attr({stroke: "none"})
  .attr({"font-size": "14px", "font-family": "Arial"})
    ;      
      ;})

d3.json("repeats.json.txt", function(error, json) {
		  if (error) return console.warn(error);

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url

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

https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js