genes

forked from baker4cs'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", 500);
    
 var genes_data = 	[{"name": "1", "start": 400, "end": 450, "direction": "F", "function": "f"},
               {"name": "2", "start": 460, "end": 480, "direction": "F","function": "f"},
               {"name": "3", "start": 530, "end": 600, "direction": "F","function": "f"}, 
                {"name": "4", "start": 420, "end": 460, "direction": "R", "function": "f"},
               {"name": "5", "start": 500, "end": 600, "direction": "R","function": "f"}];

svgEnter = svg.selectAll("rect")
      .data(genes_data)
      .enter()
    
      svgEnter.append("rect")
      .attr("x", function(d) {if (d.direction === "F") {return -100} else 					{return 1000}})
      .attr("y", function(d) {if (d.direction === "F") {return 100} else 					{return 150}})
    	.attr("fill", function (d) {if (d.direction === "F") {return "green"} else {return "red"}})
    	.attr("width", function(d) {return d.end - d.start})
      .attr("height", 30)
      .transition()
    	.duration(1000)
      .attr("x", function(d) {return d.start})

svgEnter.append("text")
    	.text(function(d) {return d.name})
    	.attr("text-anchor", "middle")
    	.attr("alignment-baseline", "middle")
    	.attr("font-size", 20)
    	.attr("font-family", "monospace")
     	.attr("y", function(d) {if (d.direction == "F") {return 100 + 15} else 							{return 150 + 15}})
    	.attr("x", function(d) {return (d.start + d.end)/2})
     	.attr("opacity", 0)
    	.transition()
    	.delay(500)
    	.duration(1000)
    	.attr("opacity", 1)
    
    
    
var ruler_100 = []
var ruler_500 = []
var ruler_1000 = []

var numbers = d3.range(10000)

for (i in numbers) {
  if (i % 1000 == 0) {
  	ruler_1000.push(numbers[i])}
  else if (i % 500 == 0) {
  	ruler_500.push(numbers[i])}
  else if (i % 100 == 0) {
  	ruler_100.push(numbers[i])}
}
    
svg.selectAll(".rect1000")
   	 	.data(ruler_1000)
    	.enter()
   	 	.append("rect")
			.classed("rect1000", true)
    	.attr("fill", "black")
    	.attr("width", "2")
    	.attr("height", "50")
    	.attr("y", 100)
			.attr("x", function(d) {return d/10})

svg.selectAll(".rect500")
   	 	.data(ruler_500)
    	.enter()
   	 	.append("rect")
			.classed("rect500", true)
    	.attr("fill", "black")
    	.attr("width", "2")
    	.attr("height", "20")
    	.attr("y", 100)
			.attr("x", function(d) {return d/10})

svg.selectAll(".rect100")
   	 	.data(ruler_100)
    	.enter()
   	 	.append("rect")
			.classed("rect100", true)
    	.attr("fill", "black")
    	.attr("width", "2")
    	.attr("height", "10")
    	.attr("y", 140)
			.attr("x", function(d) {return d/10})

</script>
</body>

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