var data = [[2.16,-1], [3,-1], [4,-1], [5,-1]];
   
    var margin = {top: 64, right: 1, bottom: 18, left: 1}
      , width = 774
      , height = 0;
    
    var x = d3.scale.linear()
              .domain([0, d3.max(data, function(d) { return d[0]; })])
              .range([ 0, width ]);
    
    var y = d3.scale.linear()
    	      .domain([0, d3.max(data, function(d) { return d[1]; })])
    	      .range([ height, 0 ]);
 
    var chart = d3.select('body')
	.append('svg:svg')
	.attr('width', width + margin.right + margin.left)
	.attr('height', height + margin.top + margin.bottom)
	.attr('class', 'chart')

    var main = chart.append('g')
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
	.attr('width', width)
	.attr('height', height)
	.attr('class', 'main')   
        
    var g = main.append("svg:g"); 
    
    g.selectAll("scatter-dots")
      .data(data)
      .enter().append("svg:circle")
          .attr("cx", function (d,i) { return x(d[0]); } )
          .attr("cy", function (d) { return y(d[1]); } )
          .attr("r", 8);

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: 10, width: (genomelength) / 10, height: 30})
    	.style({"stroke-width": "2px", "fill": "white", "stroke": "black"});
      //.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": "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.onehundred)
      .enter()
	    .append("g");
    group3.append("rect")
     	.style({"fill": "black"})
      .attr({x: 0, y: 24, width: "1px", height: 16})
    	.transition().duration(1000)
      .attr("transform", function (d) { return "translate(" + d/10 + ",0)"; });