Old school D3 from simpler times

All examples By author By category About

zaccagbj

Full window Github gist

future work on genome stuff

Built with blockbuilder.org

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

forked from zaccagbj's block: again 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!

var svg = d3.select("body")
  .append("svg")
	.attr("height",1100)
 
    
    
    
  d3.json("genes.json.txt", function(error, json) {
		  if (error) return console.warn(error);    
    
    
    
svg.attr("width", function(d){return d3.max(json, function(d){return d.genomelength/10})});

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<strong>Pham:</strong> <span style='color:darkcyan'>" + d.pham + "</span>";
  })

svg.call(tip);

var stuff = svg.selectAll(".genes")
	.data(json)
	.enter()
	.append("g")
  stuff.attr("transform", function(d, i) { return "translate(0," + (100 + (i*225)) + ")"; });
	
 var rulerActual = stuff.append("rect")
 	.attr({x: 0, y: 100, width: function(d){return d.genomelength/10}, height: 30})
  .style({"stroke-width": "2px", "fill": "white", "stroke": "black"});
	
        
    
  var group = stuff.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 = stuff.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 = stuff.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 = stuff.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 = stuff.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 = stuff.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