genome browser

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see!
    var genomelength = 7800;
    
    var tickMarks = {thousand: [], fivehundred: [], onehundred: []};
    
		var genome_positions = [];
		for (var i = 1; i <= genomelength; i++) {
    	genome_positions.push(i);
		}
    
    genome_positions.forEach(function(currentValue, index, myArray){
      if (currentValue % 1000 === 0) {
        tickMarks.thousand.push(currentValue);
      }
      else if (currentValue % 500 === 0) {
        tickMarks.fivehundred.push(currentValue);

}
      else if (currentValue % 100 === 0) {
        tickMarks.onehundred.push(currentValue);
      }
    });    
    var svg = d3.select("body").append("svg").attr({width:genomelength});
    svg.append("rect")
      .attr({x: 0, y: 60, width: (genomelength) / 10, height: 30})
    	.style({"stroke-width": "2px", "fill": "white", "stroke": "purple"});
      //.style({ fill: "#a72d1a"})
      //.transition().duration(3000).ease("bounce")
      //.style({ fill: "#5db9e3"})
    
    console.log(tickMarks);
    
		var group = svg.selectAll(".a")
      .data(tickMarks.thousand)
      .enter()
	    .append("g");
    group.append("rect")
     	.style({"fill": "green"})
      .attr({x: 0, y: 60, width: "1px", height: 30})
			.transition().duration(3000)
	    .attr("transform", function (d) { return "translate(" + d/10 + ",0)"; })
    group.append("text")
    	.attr({x: function(d){return 3+ d/10}})
    	.attr({y: 85})
    	.text(function(d){return d/1000})
		var group2 = svg.selectAll(".b")
      .data(tickMarks.fivehundred)
      .enter()
	    .append("g");
    group2.append("rect")
     	.style({"fill": "red"})
      .attr({x: 0, y: 60, width: "1px", height: 16})
     	.transition().duration(2000)
      .attr("transform", function (d) { return "translate(" + d/10 + ",0)"; });
		var group3 = svg.selectAll(".c")
      .data(tickMarks.onehundred)
      .enter()
	    .append("g");
    group3.append("rect")
     	.style({"fill": "blue"})
      .attr({x: 0, y: 74, width: "1px", height: 16})
    	.transition().duration(1000)
      .attr("transform", function (d) { return "translate(" + d/10 + ",0)"; });
var genes = [
	{
		name: 1,
		start: 50,
		stop: 300,
		direction: "forward"
	},
	{
		name: 2,
		start: 400,
		stop: 950,
		direction: "forward"
	},
	{
		name: 3,
		start: 1500,
		stop: 2500,
		direction: "forward"
	},
  	{
		name: 4,
		start: 2000,
		stop: 4000,
		direction: "backward"
	},
   	{
		name: 5,
		start: 4000,
		stop: 5500,
		direction: "backward"
	}
  
];
   
    var generect = svg.selectAll(".d")
                          .data(genes)
                          .enter()
                          .append("g");
    
      var rectAttributes = generect
      .append("rect")
     	//.style({"fill": "red"})
      .attr("fill", function(d) 
             {
        			if (d.direction === "forward") return "green"
            else if 
              (d.direction === "backward") return "red"})
      //.attr({x: 0, y:20, width: function(d){return (d.stop-d.start)/10}, height: 10})
     	.attr({x: 0, y:function(d)
               {
        			if (d.direction === "forward" && d.name % 2 === 0) return 20
           		 else if 
              (d.direction === "forward" &&  d.name % 2 === 1) return 40
               else if
              (d.direction ==="backward" &&  d.name %2 === 0) return 110
 							else if (d.direction ==="backward" &&  d.name %2 === 1) return 90                                                   
                }, 
               
       width: function(d){return (d.stop-d.start)/10}, height: 20})
      .style({"stroke":"black", "stroke width":"0px"})
     	.transition().duration(2000)
      .attr("transform", function (d) { return "translate(" + d.start/10 + ",0)"; });
    var gentext = svg.selectAll("texta")
    		.data(genes)
    		.enter()
    		
    
    .append("text")
    	.attr("text-anchor", "middle")
    	.attr("x", function (d){return (d.start+d.stop)/2/10})
    	.attr("y", function(d)
               {
        			if (d.direction === "forward" && d.name % 2 === 0) return 35;
           		 else if 
              (d.direction === "forward" &&  d.name % 2 === 1) return 55;
               else if
              (d.direction ==="backward" &&  d.name %2 === 0) return 125;
 							else if (d.direction ==="backward" &&  d.name %2 === 1) return 105;                                                   
                } )
    	.text( function(d){return d.name;})
    	.attr("fill", "black")
    	.attr("font-size", "18px");

</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js