Gene coding

<!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>

var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
    
		var gene = [{"name": "1","start": 50,"end": 121,"direction": "F","function":"function 1"},
            		{"name": "2","start": 195,"end": 250,"direction": "F","function":"function 2"},
            		{"name": "3","start": 370,"end": 450,"direction": "F","function":"function 3"},  
                {"name": "4","start": 252,"end": 295,"direction": "R","function":"function 4"},
               	{"name": "5","start": 80,"end": 145,"direction": "R","function":"function 5"},
               	{"name": "6","start": 330,"end": 385,"direction": "R","function":"function 6"}
               ];

var ruler_100=[100];
var ruler_500=[500];
var ruler_1000=[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]);
  }
}
//Start of the ruler code
svg.append("rect")
     	.attr("y", 202)
     	.attr("x", 0)
			.attr("width", 960)
   		.attr("height", 36)
   		.attr("fill", "yellow")
   		.attr("stroke","black")
   		.attr("stroke-width", 1)

svg.selectAll(".rect1000")
		.data(ruler_1000)
		.enter()
		.append("rect")
		.classed("rect1000", true)
		.attr("fill","black")
		.attr("width", 3)
		.attr("height",36)
		.attr("y",202)
		.attr("x",function(d){return d/10});

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

svg.selectAll(".rect100")
		.data(ruler_100)
		.enter()
		.append("rect")
		.classed("rect1000", true)
		.attr("fill","black")
		.attr("width", 2)
		.attr("height",10)
		.attr("y",229)
		.attr("x",function(d){return d/10});
//end ruler code
    
    
    console.log(gene);
    
    svgEnter = svg.selectAll(".rect")// creates a selection
    	.data(gene)// reads gene var
    	.enter()
    ; //does something about the above function.
        
            
    svgEnter.append("rect")
    		.attr("x", function(d) 
              {if ( d.direction=="F") 
              		{return 0 - (d.end-d.start);}
               else
               		{return 960;}
              })
				.attr("width", function(d) {return d.end-d.start;})
    		.attr("y", function(d) 
              {if ( d.direction=="F") 
              		{return 160;}
               else
               		{return 240;}
              })
    		.classed("gene", true)
    		.attr("d", function(d) {return d.direction;})
    		.attr("fill", function(d) {return d.fill;})
    		.attr("f", function(d) {return d.function;})
				.attr("stroke","black")
    		.attr("stroke-width", 2)
    		.attr("fill", function (d) 
              {if (d.direction=="F")
              		{return "green";}
               else
               		{return "red";}
              })
    		.attr("n", function(d) {return d.name;})
    		
    		.attr("opacity",0)
    		.transition()
    			.duration(2000)
    			.attr("height", 40)
    			.delay(function(d,i){return i *500})
    			.attr("opacity", 1)
					.attr("width", function(d) {return d.end-d.start;})
					.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("opacity",0)
      	.attr("font-family", "monospace")
      	.attr("x", function(d) {return (d.start + d.end)/2})
      	//with the begining of the text . we need a text-achor
    		.attr("y", function(d) {if ( d.direction=="F") {return 180;} else {return 				260;}}) 
      	.transition()
      		.delay(500+(gene.length*100))
      		.duration(2500)
      		.attr("opacity",1)
      ;
    
    
    ; // end code line
 
    
  </script>
</body>

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