


var margin = {top: 40, right: 40, bottom: 40, left: 40},
    w = 6*50 - margin.left - margin.right,
    h = 9*50 - margin.top - margin.bottom;
 
var color = d3.scale.linear()
    .domain([0, 2000])
    .range(["yellow", "darkred"])
    .interpolate(d3.interpolateLab);
 
var x = d3.scale.linear()
    .domain([0, 5])
    .range([0, w]);
 
var y = d3.scale.linear()
    .domain([0, 9])
    .range([h, 0]);
 
var yinv = d3.scale.linear()
    .domain([0, 9])
    .range([0, h]);
 
var xAxis = d3.svg.axis()
    .scale(x)
	.tickValues([0,1,2,3,4,5])
    .tickFormat(d3.format(",.0d"))
	//.tickPadding()
    .orient("bottom");
 
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");
	
 
var side = 1;
 
var bins = d3.bin()
    .size([w, h])
    .side(side);
 
var svg = d3.select("body").append("svg")
    .attr("width", w + margin.left + margin.right)
    .attr("height", h + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" +margin.left+ "," +margin.top+ ")");
 
var points = [];
 
d3.csv("paired.csv", function(error, data) {
 
  data.forEach(function(d) {
    d.time = +d.f;
    d.intensity = +d.sz;
    points.push([d.time, d.intensity]);
  });
 		//console.log(points);  //debugging

//  svg.append("g")
//      .attr("class", "x axis")
//      .attr("transform", "translate(0," + h + ")")
//      .call(xAxis);
 
 var selX = svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + h + ")")
      .call(xAxis);
  selX.selectAll("text").attr("transform", "translate(25, 0)");
 
  var selY = svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);
  selY.selectAll("text").attr("transform", "translate(0, 25)");
 
 
  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);
 
 
svg.selectAll(".square")
      .data(bins(points))
      .enter().append("rect")
      .attr("class", "square")
      .attr("x", function(d) { return x(d.x)+2; })
      .attr("y", function(d) { return y(d.y)-yinv(side); })    
      .attr("width", x(side)-2)
      .attr("height", yinv(side)-2)
      .style("fill", function(d) { return color(d.length); })
	  // the function is called every time the event occurs
      .on("mouseover", function (d) {
		d3.select(this).classed("highlight", true)
      })
      .on("mouseout", function (d) {
            d3.select(this).classed("highlight", false)
       });
	   
	   
	  
});

@@ -1683,16 +1683,17 @@
 late(0, 
+-
 25)%22);%0A 
@@ -1697,16 +1697,18 @@
 ;%0A %0A %0A  
+//
 svg.appe
@@ -1709,32 +1709,34 @@
 g.append(%22g%22)%0A  
+//
     .attr(%22class
@@ -1743,32 +1743,34 @@
 %22, %22y axis%22)%0A   
+//
    .call(yAxis);

Update scatter.js