genome browser

genome browser 2/1
<!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_data = 
[{"name": "1", "start": 100, "end": 200, "Direction":"F","Function":"Function 1"},
 {"name": "2", "start": 300, "end":400,"Direction":"F","Function":"Function 2"},
 {"name": "3", "start": 500, "end":600, "Direction":"R","Funtion":"Function 3"},
 {"name":"4", "start": 700,"end":800,"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(gene_data);
    
    /*svgEnter = svg.selectAll("rect")
      .data(gene_data)
      .enter()*/
     svg.selectAll("rect")
     	.data(gene_data)
     	.enter()
     	.append("rect")
     	.attr("y", function(d) {if (d.Direction =="F") {return 125;} else{return 39;}})
    	.attr("x", function(d) {if (d.direction == "F"){return -75;} else {return 497;}})
      .attr("width", function(d) {return d.end-d.start})
      .attr("height", 50)
    	.attr("opacity",0)
      .attr("stroke", "black")
    	
			.attr("fill", function(d) {if (d.Direction=="R") {return "red";} else if (d.Direction=="F") {return "green"}})
  		.transition()
  		.duration(1000)
    	.delay (function(d,i){return i * 1000;})
			.attr("opacity",50)
      .attr("x", function(d){if (d.Direction=="F") {return d.end} else if (d.Direction=="R"){return d.end}});

svg.selectAll("text")
      .data(gene_data)
   		.enter()
   		.append("text")
    	.attr("text-anchor","middle")
    	.attr("alignment-baseline","middle")
   		.attr("opacity",0)
   		.attr("fill","black")
      .attr("x", function(d) {return ((d.start + d.end)/2)+100})
    	.attr("y", function(d) {if (d.Direction =="F") {return 153} else 									{return 65}})
    	.text(function (d) {return d.name})
     	.attr("font-size", 25)
    	.attr("font-family", "monospace")
    	.attr("opacity",0)
      .transition()
    	.duration(500 + (gene_data.length * 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",3)
   	.attr("height",28)
   	.attr("y", 93)
   	.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", 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",.4)
    .attr("height",25)
    .attr("y",95)
    .attr("x", function(d){return d/ 10});
    
    svg. append("rect")
    .attr("y",90)
    .attr("x",0)
    .attr("width",1000)
    .attr("height",35)
    .attr("stroke","black")
    .attr("fill-opacity",0)
    .attr("stroke-opacity",1)
    
     
  </script>
</body>

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