D3 Examples - Wheel animated Repeat finder circle ruler arc genes line gen keystone numbering Tool tip repeat connect line random color tool tips

xxxxxxxxxx
 
-<!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.append("path")
  .attr("d", arcq)
  .transition().duration(4000)
  .style("opacity", 0)
chart.selectAll("path")
    .data(json)
    .enter().append("svg:path")
    .style("fill", "4B4B4B")
  .style("stroke", "black")
  .attr("d", arcg)
  .style("opacity", 1)
  .on('mouseover', tip.show)
  .on('mouseout', 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);
​
​
  
var tipRepeat = d3.tip()
  .attr('class', 'd3-tip1')
  .offset([0,0])
  .html(function(d) {
    return "<strong>Sequence:</strong> <span style='color:red'>" + d.sequence + "</span>"+"<br>"+"<strong>Width:</strong> <span style='color:red'>" + d.width+"</span>"+"<br>"+"<strong>E-value:</strong> <span style='color:red'>" + d.Evalue   ;
  });
 
var connectfunc = d3.svg.line()
  .x(function(d){
      return 230*(Math.sin(((d.start/genomelength)*6.2)+0.0436332));
    })
  .y(function(d){
      return -230*(Math.cos( ((d.start/genomelength)*6.2)+0.0436332));
    })
  .interpolate(function(points) { return points.join("A 1,1 0 0 0 "); })
    ;
  
var loc = chart.selectAll(".loc")
  .data(json)
  .enter()
  .append("svg:path")
    .attr("d", function(d) {
      return connectfunc(d.coordinates);})
    .attr("stroke", randomColor)
    .attr("fill", "none")
    .attr("stroke-width", 2)
    .style("opacity", 0)
    .on('mouseover', tipRepeat.show)
    .on('mouseout', tipRepeat.hide)
    .transition().duration(500).delay(1900)
    .style("opacity",1);
      
chart.call(tipRepeat);
  
   
    ;})
    
  </script>
</body>
​
    