Fake Genes (02/08/18)

<!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>
    
var svg = d3.select("body").append("svg")
      .attr("width", 3000)
      .attr("height", 1000)
    
  var genemap= [{"name": "Gene 1", "start": 50, "end": 100, "direction":"F", "function": "function 1", },{"name": "Gene 2", "start": 150, "end": 300, "direction":"F", "function": "function 2", },{"name": "Gene 3", "start": 250, "end": 400, "direction":"R", "function": "function 3", },{"name": "Gene 4", "start": 350, "end": 600, "direction":"F", "function": "function 4", },]
    
    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])}}
    
   /* console.log(ruler_100)
    console.log(ruler_500)
    console.log(ruler_1000)*/
    
      
    var svgEnter= svg.selectAll("rect")
    	.data(genemap)
    	.enter()
    
svg.selectAll("rect")
    	.data(genemap)
    	.enter()
    	.append("rect")
    	.attr("x", function(d) {if (d.direction=="F") {return 0-(d.end-d.start);} else{return 1000;}})
			.attr("width", function(d) {return d.end - d.start;})
			.attr("y", function(d) {if (d.direction =="F") {return 100;} else{return 225;}})
    	.attr("height", 50)
    	.attr("fill", function(d) {if (d.direction=="F") {return "cyan";} else{return "pink";}})
    	.attr("stroke", "black")
			.transition()
			.duration(2000)
			.delay (function (d, i) {return i *1000})
			.attr("x", function(d) {return d.start;})

svgEnter.append("text")
	.text(function (d) {return d.name})
	.attr("x", function(d) {return (d.start+d.end)/2})
	.attr("y", function (d) {if (d.direction=="F") {return 100+25;} else{return 225+25;}})
	.attr("font-family", "Times New Roman")
	.attr("text-anchor", "middle")
	.attr("alignment-baseline", "middle")
	.attr("font-size", 15)
	.attr("font-color", "black")
	.attr("opacity", 0)
	.transition()
	.delay(500 + genemap.length * 1000)
	.duration(500)
	.attr("opacity", 1)
	
svg.selectAll(".rect1000")
	.data(ruler_1000)
	.enter()
	.append("rect")
	.classed("rect1000", true)
	.attr("fill", "black")
	.attr("width", 2)
	.attr("height", 35)
	.attr("y", 150)
	.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", 150)
	.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", 175)
	.attr("x", function(d) {return d/10})

//.attr("fill", function(d) {if (d.direction=="F", d.name=="1") {return "green";} else if(d.name=="2") {return "yellow";} else if(d.name=="4") {return "purple";} else {return "blue"}})
    
  </script>
</body>

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