genome browser

forked from TylerVaughan's block: fresh block

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 1000)
      .attr("height", 400)
		
    var gene_data = [{"name": "Gene 1", "start": 25, "end": 100, "direction": "F", "function": "function 1"},
                     {"name": "Gene 2", "start": 120, "end": 220, "direction": "F", "function": "function 2"},
                     {"name": "Gene 3", "start": 250, "end": 350, "direction": "R", "function": "function 3"},
                     {"name": "Gene 4", "start": 375, "end": 450, "direction": "F", "function": "function 4"}];

console.log(gene_data)    
    
    svgEnter = svg.selectAll("rect")
    	.data(gene_data)
    	.enter();
    
    	svgEnter.append("rect")
    	.attr("x", function (d) {if (d.direction == "F") {return 0-(d.end-d.start)}
                              else if (d.direction == "R") {return 700}})
    	.attr("width", function(d) {return d.end-d.start}) 
    	.attr("height", 50)
    	.attr("y", function(d) {if (d.direction=="F") {return 100}
                             else {return 250}})
    	.attr("fill", function(d) {if (d.direction == "F") {return "#556b2f";}
        	else if (d.direction == "R") {return "#800020";} })
    	.attr("opacity", 0)
      .attr("stroke", "black")
      .transition()
      .duration(2500)
    	.attr("opacity", 1)
    	.delay (function(d, i) {return i*10})
      .attr("x", function(d) {if (d.direction == "F") {return d.start}
                               else if (d.direction == "R") {return d.start}})
   
    svgEnter.append("text")
      .text(function (d) {return d.name})
      .attr("text-anchor", "middle")
    	.attr("alignment-baseline", "middle")
      .attr("font-size", 14)
			.attr("font-family", "monospace")
     	.attr("y", function(d) {if (d.direction=="F") {return 125}
                             else {return 275}})
      .attr("x", function (d){return (d.start+d.end)/2})
    	.attr("opacity", 0)
      .transition()
    	.duration (2500)
    	.attr("opacity", 1)
   
    svg.append("rect")
      .attr("y", 175)
      .attr("x", 0)
      .attr("height", 50)
      .attr("width", 700)
      .attr("fill", "white")
      .attr("stroke", "black")
      .attr("stroke-width", 2)		
    svg.append("rect")
      .attr("x", 100)
      .attr("y", 175)
      .attr("height", 50)
      .attr("width", 2)
      .attr("fill", "black")    
    svg.append("rect")
      .attr("x", 200)
      .attr("y", 175)
      .attr("height", 50)
      .attr("width", 2)
      .attr("fill", "black")        
    svg.append("rect")
      .attr("x", 300)
      .attr("y", 175)
      .attr("height", 50)
      .attr("width", 2)
      .attr("fill", "black")    
    svg.append("rect")
      .attr("x", 400)
      .attr("y", 175)
      .attr("height", 50)
      .attr("width", 2)
      .attr("fill", "black")     
    svg.append("rect")
      .attr("x", 500)
      .attr("y", 175)
      .attr("height", 50)
      .attr("width", 2)
      .attr("fill", "black")      
    svg.append("rect")
      .attr("x", 600)
      .attr("y", 175)
      .attr("height", 50)
      .attr("width", 2)
      .attr("fill", "black")    
    svg.append("rect")
      .attr("x", 50)
      .attr("y", 175)
      .attr("height", 15)
      .attr("width", 2)
      .attr("fill", "black")    
    svg.append("rect")
      .attr("x", 150)
      .attr("y", 175)
      .attr("height", 15)
      .attr("width", 2)
      .attr("fill", "black")      
   svg.append("rect")
      .attr("x", 250)
      .attr("y", 175)
      .attr("height", 15)
      .attr("width", 2)
      .attr("fill", "black")  
    svg.append("rect")
      .attr("x", 350)
      .attr("y", 175)
      .attr("height", 15)
      .attr("width", 2)
      .attr("fill", "black")     
   svg.append("rect")
      .attr("x", 450)
      .attr("y", 175)
      .attr("height", 15)
      .attr("width", 2)
      .attr("fill", "black")  
    svg.append("rect")
      .attr("x", 550)
      .attr("y", 175)
      .attr("height", 15)
      .attr("width", 2)
      .attr("fill", "black")  
   svg.append("rect")
      .attr("x", 650)
      .attr("y", 175)
      .attr("height", 15)
      .attr("width", 2)
      .attr("fill", "black")  
    svg.append("rect")
      .attr("x", 10)
      .attr("y", 175)
      .attr("height", 5)
      .attr("width", 2)
      .attr("fill", "black")  
    svg.append("rect")
      .attr("x", 20)
      .attr("y", 175)
      .attr("height", 5)
      .attr("width", 2)
      .attr("fill", "black")  
    svg.append("rect")
      .attr("x", 30)
      .attr("y", 175)
      .attr("height", 5)
      .attr("width", 2)
      .attr("fill", "black")  
    svg.append("rect")
      .attr("x", 40)
      .attr("y", 175)
      .attr("height", 5)
      .attr("width", 2)
      .attr("fill", "black")  
    svg.append("rect")
      .attr("x", 60)
      .attr("y", 175)
      .attr("height", 5)
      .attr("width", 2)
      .attr("fill", "black")  
    svg.append("rect")
      .attr("x", 70)
      .attr("y", 175)
      .attr("height", 5)
      .attr("width", 2)
      .attr("fill", "black")  
    svg.append("rect")
      .attr("x", 80)
      .attr("y", 175)
      .attr("height", 5)
      .attr("width", 2)
      .attr("fill", "black")  
    svg.append("rect")
      .attr("x", 90)
      .attr("y", 175)
      .attr("height", 5)
      .attr("width", 2)
      .attr("fill", "black")  
    
   
   
   
  </script>
</body>

https://d3js.org/d3.v4.min.js