Genome Browser

<!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", 2000)
      .attr("height", 500)

// console.log("1000:", ruler_1000);
   // console.log("500:", ruler_500);
   // console.log("100:", ruler_100);
    
    
    //for ....
     // modulus
     //if modulus == 0 {
     //  ruler_100.push(...)
     //}
    
    console.log(gene);
    
    
    svg.selectAll("rect")
    	.data(gene)
    	.enter()
    	.append("rect")
    	.attr("y", function (d) { 
            if ( d.direction == "F") {
      return 100; 
    }
    else {
      return 300;
    }
    }) 
    	  	.attr("x", function (d) { 
            if ( d.direction == "F") {
      return -75; 
    }
    else {
      return 960;
    }
    })
    	.attr("width", function (d) {return d.size;})
    	.attr("height", 50)
    	.attr("fill", "black")
    	.attr("opacity", 0)
      
      
      
      .transition()
    .duration(1000)
    .attr("opacity", 1)
    .delay(function (d, i) { return i * 1000;})
    	.attr("fill", function (d) { 
            if ( d.direction == "F") {
      return "crimson"; 
    }
    else {
      return "darkgray";
    }
    })
    	.attr("x", function (d) { return d.start;})

svg.selectAll("text")
      .data(gene)
    	.enter()
    	.append("text")
       .attr("text-anchor","middle")
       .attr("alignment-baseline","middle")
       .attr("opacity", 0)
       .attr("fill", "white")
    	 .attr("x", function (d) { return (d.start + (d.size /2))
    
    })
      .attr("y", function (d) { 
            if ( d.direction == "F") {
      return 125; 
    }
    else {
      return 325;
    }
    }) 
      .text(function (d) { return d.name})
      .attr("font-size", 34)
      .attr("font-family", "Calibri")
    .transition()
    .duration(250 + (gene.lenth * 1000))
    .delay(function (d, i) { return i * 1000;})
       .attr("opacity", 1)
           
    ;

;
    
   svg.selectAll(".rect1000")
    .data(ruler_1000)
    .enter()
    .append("rect")
   	.classed("rect1000", true)
    .attr("fill", "black")
    .attr("width", 2)
    .attr("height", 50)
    .attr("y", 200)
    .attr("x", function(d) {return d /10});
    
    svg.selectAll(".rect500")
    .data(ruler_500)
    .enter()
    .append("rect")
   	.classed("rect500", true)
    .attr("fill", "black")
    .attr("width", 1)
    .attr("height", 25)
    .attr("y", 200)
    .attr("x", function(d) {return d /10});
    
        svg.selectAll(".rect100")
    .data(ruler_100)
    .enter()
    .append("rect")
   	.classed("rect100", true)
    .attr("fill", "black")
    .attr("width", .4)
    .attr("height", 25)
    .attr("y", 225)
    .attr("x", function(d) {return d /10});
    
    svg.selectAll(".rectaround")
    .append("rect")
    .classed("rectaround", true)
    .attr("fill","black")
    .attr("width",2000)
    .attr("height", 1)
    .attr("y",200)
    .attr("x", 0)

//.attr("width", function (d) { return d.end - d.start; })
   
    
    
    
  /*     var line = [{"x1":0, "y1":200,},
              {"x1":0, "y1":250,}];
    
    console.log(line);
    
    svg.selectAll("rect")
    	.data(line)
    	.enter()
    	.append("rect")
    	.attr("y", function (d) { return d.y1;})
    	.attr("x", function (d) { return d.x1;})
    	.attr("height", 10)
    	.attr("width", function (d) { return d.length;})
    */
	/*var flagfrance = [{"fill": "darkgreen", "x":100},
                	{"fill": "white", "x":300},
                	{"fill": "coral", "x":500}];
    
    console.log(flagfrance);
    
    svg.selectAll("rect")
    	.data(flagfrance)
    	.enter()
    	.append("rect")
    	.attr("y", 100)
    	.attr("x", function (d) { return d.x;})
    	.attr("width", 200)
    	.attr("height", 400)
    	.attr("fill", function (d) { return d.fill; });
 
    
      
      			svg.append("rect")
      	.attr("height", 200)
      	.attr("width", 100)
      	.attr("x", 200)
      	.attr("y", 50)
      	.attr("fill", "blue"),
      
      svg.append("rect")
      	.attr("height", 200)
      	.attr("width", 100)
      	.attr("x", 400)
      	.attr("y", 50)
      	.attr("fill", "red")
        */
    
  </script>
</body>

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