what I've been working on all night by dhoboy

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
	.axis path, 
	.axis line {
		fill: none;
		stroke: black;
		shape-rendering: crispEdges;
	}
	
	.axis text {
		font-family: sans-serif;
		font-size: 11px;
	}
</style>
<body>
<script src="//d3js.org/d3.v3.js"></script>
<script>

var margin = {top: 20, right: 30, bottom: 30, left: 90, axis_label: 5}, 
	w = 960 - margin.left - margin.right,
	h = 500 - margin.top - margin.bottom,
	r = 2, // r of scatterplot points drawn
	key_area = 150;
	
var xScale = d3.scale.linear()
	.range([0, w]);

var yScale = d3.scale.linear()
	.range([h, 0]);

var color = d3.scale.category20();

var keyScale = d3.scale.ordinal()
	.rangeRoundBands([0,h]);
	
var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(10);

var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(10);

var svg = d3.select("body")
	.append("svg")
	.attr("height", h + margin.top + margin.bottom)
	.attr("width", w + margin.right + margin.left + key_area);

var plot = svg.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("chr1-17.csv", form_the_data, function(error, data) {
  xScale.domain([d3.min(data, function(d){ return d.x; }), 
  	d3.max(data, function(d){ return d.x; })]);
  yScale.domain([d3.min(data, function(d){ return d.y; }),
  	d3.max(data, function(d){ return d.y; })]);
  	  	  
  plot.selectAll("circle")
  	  .data(data)
    .enter()
      .append("circle")
      .attr("cx", function(d){ return xScale(d.x); })
      .attr("cy", function(d){ return yScale(d.y); })
      .attr("r", r)
      .style("fill", function(d){ return color(d.chrom_val); })
      .append("title")
      	.text(function(d){
      	  return d["#name"] + " " + d.strand;
      	}); 
	
  plot.append("g")
  	.attr("class", "x axis")
  	.attr("transform", "translate(0," + h + ")")
  	.call(xAxis)
  	.append("text")
	.attr("transform", "translate(" + (w - margin.axis_label) + "," + margin.bottom + ")")
   	.style("text-anchor", "start")
   	.style("fill", "blue")
   	.text("txStart");
   	
  plot.append("g")
  	.attr("class", "y axis")
  	.call(yAxis)
  	.append("text")
	.attr("transform", "translate(" + margin.axis_label*-16 + "," + margin.axis_label*-2 + ") rotate(-90)")
	.style("text-anchor", "end")
	.style("fill", "blue")
	.text("txEnd");

  // the key
  keyScale.domain(color.domain());
  
  var keyData = toObjArr(keyScale.domain());
		 
  var key = svg.append("g")
  	.attr("transform", "translate(" + (w + margin.left + margin.right*2) + "," + margin.top + ")");
  	
  var entries = key.selectAll("g")
  	.data(keyData)
  .enter()
  	.append("g")
  	.attr("transform", function(d){ 
  		return "translate(0," + keyScale(d.valueOf()) + ")"; 
  	});

  	entries.append("circle")
  	  .attr("cx", 0)
  	  .attr("cy", 0)
  	  .attr("r", 5)
  	  .attr("fill", function(d){ return color(d.valueOf()); });

  	entries.append("text")
  	  .attr("x", 7)
  	  .attr("y", 4)
  	  .text(function(d){ return "chr" + d.valueOf(); })
  	  
});

function form_the_data(d) {
  d.x = +d.txStart;
  d.y = +d.txEnd;
  d.chrom_val = (d.chrom.length == 4) ? d.chrom.slice(-1) : d.chrom.slice(-2);
  return d;
}

function toObjArr(arr) {
  var objArr = [], i = 0;
  while(arr.length != 0) { 
  	objArr.push(Object(arr.shift()));
  	i+= 1;
  }
  return objArr;
}

</script>