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

var genes = [
      {"name": "gene1","size":120, "start": 15, "Orientation": "F", "function" : 				"1"},
      {"name": "gene2","size":342, "start": 190, "Orientation": "F","function" : 				"2"},
      {"name": "gene3","size":203, "start": 300, "Orientation": "R", "function" : 				"3"},
      {"name": "gene4","size":221, "start": 689,"Orientation": "F", "function" : 			 	 "4"}];
   //creating a variable to equal the selectAll function allows for multiple types of appends within it
   svgEnter =  svg.selectAll("rect")
    .data(genes)
    .enter()
    svgEnter.append("rect")
    //RECTANGLES
    .attr("y", function(d) {
      if (d.Orientation == "F") {
        return 100} 
      else {return 200}})
   	.attr("height", 50)
    
    .attr("x", function(d) {
      if (d.Orientation == "F") {
      	return 0-d.size} 
      else {
        return 960}})
    
    .attr("width", function(d) {
      return d.size})
    
    .attr("fill", "white")
    
    .attr("stroke", function(d) {
      if (d.Orientation == "F") {
        return "green"} 
      else {
        return "red"}})

.transition()
    .duration(500)
    .attr("x", function(d) {return d.start})
   
    //TEXT
    svgEnter.append("text")
    .text(function(d) {return d.name})
    .attr("text-anchor", "middle")
    .attr("alignment-baseline","middle")
    .attr("y", function(d) {
      if (d.Orientation == "F") {
        return 100 + 25} 
      else {
        return 200 +25}})
    .attr("opacity",0)
    /*.attr("x", function(d) {
      if (d.Orientation == "F") {
      	return 0-d.size} 
      else {
        return 960}})*/
    .attr("x", function(d) {return d.start + d.size/2})
    .attr("font-family", "arial")
    
    .transition()
    .delay(genes.length * 250)
    .duration(500)
    .attr("opacity", 1)
    //.attr("x", function(d) {return d.start + d.size/2})
    
    svgEnter.append("rect")
    .attr("y",163)
    .attr("x", 0)
    .attr("height", 25)
    .attr("width", 960)
    .attr("fill", "white")
    .attr("stroke", "black")
    
  var ruler_100 = [];
  var ruler_500 = [];
  var ruler_1000 = [];
  var range = d3.range(10000);
    
  for (i in range){
    if(i % 1000 == 0){
      ruler_1000.push(range[i]);

}
    else if (i % 500 == 0){
    	ruler_500.push(range[i]);
    }
    else if (i % 100 == 0){
      ruler_100.push(range[i]);  
    }
  }

svg.selectAll(".rect1000")
 .data(ruler_1000)
 .enter()
 .append("rect")
 .classed("rect1000",true)
 .attr("fill","black")
 .attr("width", 2)
 .attr("height",25)
 .attr("x", function(d){return d/10})
 .attr("y", 163)
svg.selectAll(".rect500")
 .data(ruler_500)
 .enter()
 .append("rect")
.classed("rect500",true)
 .attr("fill","black")
 .attr("width", 2)
 .attr("height",12.5)
 .attr("x", function(d){return d/10})
 .attr("y", 163)
 svg.selectAll("rect100")
 .data(ruler_100)
 .enter()
 .append("rect")
 .classed("rect100",true)
 .attr("fill","black")
 .attr("width", 2)
 .attr("height",6)
 .attr("x", function(d){return d/10})
 .attr("y", 163+19)
    
    
    
    
    
    
    
    
    
    
    
    /* var Ruler = [{"width": 25, "y":175, "array":"1,96"},{"width": 12.5, "y":169, "array":"1,47.5"},{"width": 6, "y":186, "array":"1,8.7"}];
    
    svg.selectAll("line")
    .data(Ruler)
    .enter()
    .append("line")
    .attr("y1", function(d) {return d.y})
    .attr("x1", 0)
    .attr("y2", function(d) {return d.y})
    .attr("x2",960)
    .attr("stroke","black")
    .attr("stroke-width", function(d) {return d.width})
    .attr("stroke-dasharray", function(d) {return d.array})

.append("text")
    .text(function(d) {return d.function})
    .attr("y", function(d) {if (d.Orientation == "F") {return 130} else {return 					230}})
    .attr("x", function(d) {return d.start})
    .attr("font-family", "arial")
    */
  </script>
</body>

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