scale bar 2/23

<!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>
    var genomelength = 7850;
    
    var tickMarks = {thousand: [], fivehundred: [], onehundred: []};
    
    var genome_position = [];
    for (var i = 1; i <= genomelength: i ++) {        
      genome_positon.push(i);    
    }
		genome_positon.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){
        
      }
    });
    var svg = d3.select("body").append("svg").attr({width:genomelength});
    svg.append("rect")
    	.attr({x: 0, y:10, width: (genomelenght)/ 10, height: 30})
			.style({"stroke-width": "2px", "fill": "white", "stroke": "red"});

console.log(tickMarks);
    
    var group = svg.selectAll(".a")
    	.data(tickMarks.thousand)
    	.enter()
    	.append("g");
    group.append("rect")
    	.style({"fill": "black"})
    	.attr({x: 0, y: 10, width: "1px", height: 30})
    	.transition().duration(3000)
    	.attr("transform", function (d) { return "translate(" + d/10 + ",0)"; });
    var group2 = svg.selectAll(".b")
    	.data(tickMarks.fivehundred)
    	.enter()
    	.append("g");
    group2.append("rect")
      .style({"fill": "black"})
    	.attr({x: 0, y: 10, width: "1px", height: 16})
    	.transition().duration(2000)
    	.attr("transform",) function (d) { return "translate(" + d/10 + ",0)"; });
    var group3 = svg.selectAll(".c")
    .data(tickMarks.fivehundred)
    	.enter()
    	.append("g");
    group3.append("rect")
      .style({"fill": "black"})
    	.attr({x: 0, y: 10, width: "1px", height: 16})
    	.transition().duration(1000)
    	.attr("transform",) function (d) { return "translate(" + d/10 + ",0)"; });
  </script>
</body>

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