again newer work on genome thing

forked from zaccagbj's block: newer work on genome thing

<!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>
  <style>
  .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>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see!

d3.json("genes.json.txt", function(error, json) {
		  if (error) return console.warn(error);    
    
    
        var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<strong>Pham:</strong> <span style='color:red'>" + d.pham + "</span>";
  })
    
    
var svg = d3.select("body")
  .selectAll(".svg")
  .data(json)
	.enter()
  .append("svg")
	.attr("width", function(d)
        {if (d.phageName !=0)
  					{return d.genomelength/10}
  			else {return 0}})
	.attr("height",function(d)
        {if (d.phageName !=0)
  					{return 250}
  			else {return 0}})
	.attr("x",0)
	
   svg.call(tip);

var ruler = svg 
  .selectAll(".space")
	.data(function (d){return d.genes})
	.enter()
	.append("rect")
	
 var rulerActual = ruler
 	.attr({x: 0, y: 100, width: function(d){return d.genomelength/10}, height: 30})
  .style({"stroke-width": "2px", "fill": "white", "stroke": "black"});

///    genome_positions.forEach(function(currentValue, index, myArray){
///      if (currentValue % 1000 === 0) {
//        tickMarks.thousand.push(currentValue);
 //     }
 //     else if (currentValue % 500 === 0) {
   //     tickMarks.fivehundred.push(currentValue);
//
     // }
    //  else if (currentValue % 100 === 0) {
      //  tickMarks.onehundred.push(currentValue);
     // }
   // });    
    
  var group = svg.selectAll(".a")
      .data(function(d){
        var tickmark = {thousand:[]}
        var genome_positions = [];
        for (var i = 1; i <= d.genomelength; i++) {
    				genome_positions.push(i);}
        
        genome_positions.forEach(function(currentValue, index, myArray){
      	if (currentValue % 1000 === 0){tickmark.thousand.push(currentValue);}
       })
        return tickmark.thousand
       })
      .enter()
	    .append("g");
    group.append("rect")
     	.style({"fill": "black"})
      .attr({x: 0, y: 100, width: "1px", height: 30})
			.transition().duration(3000)
	    .attr("transform", function (d) { return "translate(" + d/10 + ",0)"; });
    group.append("text")
    	.text(function (d) {return d/1000})
    	.attr("x", function(d){return d/10 })
      .attr({y: 112, width: "1px", height: 30})
			.attr("text-anchor", "end")
    	.attr("font-size", "13px")
   
 var group2 = svg.selectAll(".b")
      .data(function(d){
        var tickmark = {fivehundred:[]}
        var genome_positions = [];
        for (var i = 1; i <= d.genomelength; i++) {
    				genome_positions.push(i);}
        genome_positions.forEach(function(currentValue, index, myArray){
      	if (currentValue % 500 === 0 && currentValue % 1000 !=0){tickmark.fivehundred.push(currentValue);}
      })
        return tickmark.fivehundred}  
       )
      .enter()
	    .append("g");
    group2.append("rect")
     	.style({"fill": "black"})
      .attr({x: 0, y: 100, width: "1px", height: 15})
     	.transition().duration(2000)
      .attr("transform", function (d) { return "translate(" + d/10 + ",0)"; });
		var group3 = svg.selectAll(".c")
      .data(function(d){
        var tickmark = {onehundred:[]}
        var genome_positions = [];
        for (var i = 1; i <= d.genomelength; i++) {
    				genome_positions.push(i);}
        genome_positions.forEach(function(currentValue, index, myArray){
      	if (currentValue % 100 === 0 && currentValue % 1000 !=0 && currentValue %500 !=0){tickmark.onehundred.push(currentValue);}})
        return tickmark.onehundred}  )
      .enter()
	    .append("g");
    group3.append("rect")
     	.style({"fill": "black"})
      .attr({x: 0, y: 115, width: "1px", height: 15})
    	.transition().duration(1000)
      .attr("transform", function (d) { return "translate(" + d/10 + ",0)"; });
		
    
    var rects = svg.selectAll(".stank")
    	.data(function (d){return d.genes})
    	.enter()
			.append("rect")
    
    var rectAttributes = rects
  	  .attr("x", function (d) {if (d.direction == "forward")
          	{return (0-((d.stop-d.start)/10)-2);}
             else if (d.direction == "reverse") {
             return (d.genomelength/10)+2;}
                })
    	 .attr("y", function (d) {if (d.direction == "forward" && d.name%2!=0)
             {return 30}
              else if (d.direction == "forward" && d.name%2==0)
             {return 70}
              else if (d.direction =="reverse" && d.name%2!=0)
             {return 130} 
              else if (d.direction =="reverse" && d.name%2==0)
             {return 170}
              else {return 0}})
      .attr("height", function(d) { return 30;})
      .attr("width", function (d) { return (d.stop-d.start)/10; })
      .style({"fill":function(d)
              {if (d.direction == "forward")
              {return "blue"} 
               else if (d.direction =="reverse")
              {return"darkOrange"} 
               else {return "black"}},"stroke":"black", "stroke-width": "2px"})
    	.on('mouseover', tip.show)
      .on('mouseout', tip.hide)
   		.transition().delay(3000).duration(1000)
     	.attr("x", function (d) { return d.start/10; });
    	
    
    var pham = svg.selectAll(".frosty")
    	.data(function (d){return d.genes})
    	.enter()
			.append("text")
    
    
    var nameAttributes = pham
      .attr("x", function (d) { return ((d.stop+d.start)/2)/10})
      .attr("y", function (d) {if (d.direction == "forward" && d.name%2!=0)
              {return 25}
               else if (d.direction == "forward" && d.name%2==0)
              {return 65}
               else if (d.direction =="reverse" && d.name%2!=0)
              {return 180} 
               else if (d.direction =="reverse" && d.name%2==0)
              {return 220}
               else {return 0}})
    	.text(function (d) {return d.pham})
    	.attr("text-anchor", "middle")
      .attr("font-family", "sans-serif")
      .attr("font-size", "20px")
      .attr("fill", "black")
    	.attr("stroke", "black")
    	.attr("stroke-width",".5px");
    
    var name = svg.selectAll(".baggy")
    	.data(function (d){return d.genes})
    	.enter()
			.append("text")
    
    var nameAttributes = name
      .attr("x", function (d) { return ((d.stop+d.start)/2)/10})
      .attr("y", function (d) {if (d.direction == "forward" && d.name%2!=0)
              {return 50}
               else if (d.direction == "forward" && d.name%2==0)
              {return 90}
               else if (d.direction =="reverse" && d.name%2!=0)
              {return 150} 
               else if (d.direction =="reverse" && d.name%2==0)
              {return 190}
               else {return 0}})
    	.text(function (d) {return d.name})
    	.attr("text-anchor", "middle")
      .attr("font-family", "sans-serif")
      .attr("font-size", "20px")
      .attr("fill", "black")
    	.attr("stroke", "black")
    	.attr("stroke-width",".5px");
    
    
    
  })
    
  </script>
</body>

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