var usv = d3.dsvFormat("_");
    var headers = [];

    // this is the parser
    
    var output = usv.parse(">NODE_length_135_cov_6.362500")
    //console.log(output)
    
    d3.request("test.fasta")
  		.mimeType("text/plain")
 			.response(function(xhr) { return usv.parse(xhr.responseText) }) 
    // function that access information from a URL
  		.get(function(data) {
      	//console.log("data: ", data)
      	data.forEach(function (d){
          if (d.node == ">NODE"){
            headers.push({name: d.id, size: +d.size, seq: "", gc: 0})
          }
          else {
            headers[headers.length-1].seq += d.node;
          }
          
        })
        headers.forEach(function (d) {
          d.gc = ((d.seq.match(/G/g) || []).length + (d.seq.match(/C/g) || []).length) / d.seq.length
        })
        var avg = d3.mean(headers, function (d){return d.gc;})
        console.log("Average GC:", avg);
       
       
       // console.log(headers);

 var margin = {top: 20, right: 15, bottom: 60, left: 60}
      , width = 960 - margin.left - margin.right
      , height = 500 - margin.top - margin.bottom;
    
     x = d3.scaleLinear()
              .domain([0, d3.max(headers, function(d) { return d.gc; })])
              .range([ 0, width ]);
    					
    
     y = d3.scaleLinear()
    	      .domain([0, d3.max(headers, function(d) { return d.size; })])
    	      .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')

    main = chart.append('g')
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
	.attr('width', width)
	.attr('height', height)
	.attr('class', 'main')   
        
    // draw the x axis
    var xAxis = d3.axisBottom()
	.scale(x);

    main.append('g')
	.attr('transform', 'translate(0,' + height + ')')
	.attr('class', 'main axis date')
	.call(xAxis);

    // draw the y axis
    var yAxis = d3.axisLeft()
	.scale(y);

    main.append('g')
	.attr('transform', 'translate(0,0)')
	.attr('class', 'main axis date')
	.call(yAxis);
      var formatCount = d3.format(",.0f");
       radius = 1
      
   var g = main.append("svg:g"); 
    
    g.selectAll("scatter-dots")
      .data(headers)
      .enter().append("svg:circle")
          .attr("cx", function (d,i) { return x(d.gc); } )
          .attr("cy", function (d) { return y(d.size); } )
          .attr("r", radius)
    
    avgLine = [[x(avg),0], [x(avg), height]];
      var lineGenerator = d3.line()
      var pathString = lineGenerator(avgLine);
      
      main.append('path')
      	.attr('d', pathString)
      	.attr("stroke", "black")
      	.attr("stroke-width", .1)
      	.attr("stroke-dasharray","5,8");
      
    });
    
    // Create Event Handlers for mouse
      function handleMouseOver(d, i) {  // Add interactivity

            d3.select(this).style("fill","darkviolet");
              d3.select(this).transition().style("r", radius * 4)
            });

            // Specify where to put label of text
            main.append("text")
              .text(function(){
              return "contig:" + d.name + "gc: " + d.gc + "size: " + d.size;
            }) 
              
              .attr("id", "t" + d.name)
               .attr("x", function() { return x(d.gc) - 125; })
               .attr ("y" function() { return yScale(d.size) - 15; })
            
            
          }

      function handleMouseOut(d, i) {
            // Use D3 to select element, change color back to normal
            d3.select(this).style("fill", "crimson")
            d3.select(this).transition().style("r", radius)
            });

            // Select text by id and then remove
            main.select("#t" + d.name).remove();  // Remove text location
          }
  			
      
      
      
  });

//var data = [[5,3], [10,17], [15,4], [2,8]];