Random Gene

<!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", 960)
      .attr("height", 500)
    
  
var gene = [{"name":"L","start": 50,"end":100, "length":50, "direction": "forward", "function": "1"},{"name": "K", "start":110, "end":200, "length":90, "direction": "reverse", "function": "2"},{"name": "W", "start": 250, "end": 350,"length":100, "direction": "forward", "function": "3"},{"name": "O", "start": 400, "end": 550,"length": 150, "direction": "forward", "function": "4"}]

svg.append("rect")
   .attr("y",135)
      .attr("x", -64)
    	.attr("width", 877)
    	.attr("height",70)
   		.attr("fill","white")
   		.attr("stroke","black")

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", 3)
			.attr("height", 50)
			.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", 3)
			.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", 3)
			.attr("height", 20)
			.attr("y", 180)
			.attr("x", function(d) { return d/10 });

console.log(gene)

svgEnter = svg.selectAll(".gene")
    	.data(gene)
    	.enter();

svgEnter.append ("rect")
  .classed ("gene", true)
    .attr("y", function(d) {if (d.direction == "forward"){return 100;}
         
         else {return 200;}})
         
    .attr("x", function(d) {
  		if (d.direction == "forward") {
        return 0 -(d.length);
      } 
  		else {
        return 960;
      }
		})
    .attr("width", function(d) {return d.end - d.start;})
    .attr("height", 50)
		.attr( "stroke", "black")
		.attr("fill", function(d) {if (d.direction == "forward") {return "green";} else {return "red";}})

.attr ("opacity", 0)
.transition()
.duration(1500)
.delay(function(d, i){return i  *1000;})
.attr ("opacity", 1)
.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", 26)
   // .attr("opacity", 0)
    .attr("font-family", "monospace")
  	.attr ("y", function (d) { if (d.direction == "reverse") { return 220 +5;} else {return 100 +25;}})
  
    .attr ("x", function (d) { return (d.start + d.end)/2;})
     .transition()
          .delay(250 + (gene.length * 1000))
          .duration(500)
          .attr("opacity", 1)

</script>
</body>

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