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>
	var ruler1000=[]
  var ruler100=[]
  var ruler500=[]
  var bleh=d3.range(10000)
  for (v in bleh)
    if (v%1000==0)(ruler1000.push[v])
    else if (v%500==0)(ruler500.push[v])
    else if (v%100==0)(ruler100.push[v])
  var Ruler={width:800,height:50}
	var Genes=[
{name:"1",start:50,sequence:"ATGCTAGCGGAT",direction:"F",function:"Hair cell gene"},			{name:"2",start:250,sequence:"ACTGCACGGGA",direction:"R",function:"Skin cell gene"},{name:"3",start:250,sequence:"GATAGCTGAC",direction:"F",function:"Hair color gene"},{name:"4",start:450,sequence:"TGAAGCTTAGTCTAGCTGAGCTAGGAC",direction:"F",function:"Stomach cell gene"}]
    var svg = d3.select("body").append("svg")
      .attr("width", 1000)
      .attr("height", 500)
		svg.selectAll("fool")
    	.data(Genes)
    	.enter()
    	.append("rect")
    	.attr("y",function(v){if (v.direction=="F"){return 100;}else{return 300;}})
    	.attr("x",function(v){if (v.direction=="F"){return 1000;}else{return -1-((v.sequence.length)*13);}})
    	.attr("width",function(v){return 20+(v.sequence.length)*11})
    	.attr("height",50)
    	.attr("fill",function(v){if (v.direction=="F"){return "green";}else{return "red";}})
    	.attr("fill-opacity",.5)
    	.attr("stroke","black")
    	.attr("stroke-width",1)
      .transition()
      .duration(1500)
    	.attr("x",function(v){return v.start;})
      .delay(function(v,i){return i*1000;})
    	;
    svg.selectAll("Sequences")
    	.data(Genes)
    	.enter()
    	.append("text")
    	.text(function(v){return v.sequence})
    	.attr("y",function(v){if (v.direction=="F"){return 130;}else{return 330;}})
    	.attr("x",function(v){if (v.direction=="F"){return 1000;}else{return -1-((v.sequence.length)*13);}})
    	.attr("font-size", 20)
      .attr("font-family", "monospace")
      .transition()
      .duration(1500)
    	.attr("x",function(v){return v.start+10})
      .delay(function(v,i){return i*1000;})
    	;
    svg.selectAll("Functions")
    	.data(Genes)
    	.enter()
    	.append("text")
    	.text(function(v){return v.function})
    	.attr("y",function(v){if (v.direction=="F"){return 90;}else{return 290;}})
    	.attr("x",function(v){if (v.direction=="F"){return 1000;}else{return -1-((v.sequence.length)*13);}})
    	.attr("font-size", 20)
      .attr("font-family", "monospace")
      .transition()
      .duration(1500)
    	.attr("x",function(v){return v.start})
      .delay(function(v,i){return i*1000;})
      ;
    svg.append("rect")
    	.attr("y", 200)
      .attr("x", 50)
    	.attr("width",Ruler.width)
      .attr("height",Ruler.height)
    	.attr("fill-opacity","0")
    	.attr("stroke","white")
    	.transition()
    	.duration(1500)
    	.attr("fill-opacity","0.3")
    	.attr("stroke","black")
    	;
    svg.selectAll("ruler")
     	.data(ruler1000)
    	.enter()
    	.append("rect")
    	.attr("fill","black")
    	.attr("width",2)
    	.attr("height",50)
    	.attr("y",200)
    	.attr("x", function(v) {return v/10})
      ;
    svg.append("text")
      .text("Genome Browser")
      .attr("y", 50)
      .attr("x", 120)
      .attr("font-size", 36)
      .attr("font-family", "monospace")
			;
    	
  </script>
</body>

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