nimezhu/d3.bin.js

## d3.bin.js
(function() {

d3.bin = function() {
  var width = 1,
      height = 1,
      side,
      dx,
      dy,
      x = d3_binX,
      y = d3_binY;

  function bin(points) {
    var binsById = {};

    points.forEach(function(point, i) {
      var py = y.call(bin, point, i) / dy;
      var pj = trunc(py);
      var px = x.call(bin, point, i) / dx;
      var pi = trunc(px);

      var id = pi + "-" + pj;
      var bin = binsById[id];
      if (bin) bin.push(point); else {
        bin = binsById[id] = [point];
        bin.i = pi;
        bin.j = pj;
        bin.x = pi * dx;
        bin.y = pj * dy;
      }
    });
    return d3.values(binsById);
  }

  function square(side) {
    var dx = side,
          dy = side;
      return [dx, dy];
  }

  bin.x = function(_) {
    if (!arguments.length) return x;
    x = _;
    return bin;
  };

  bin.y = function(_) {
    if (!arguments.length) return y;
    y = _;
    return bin;
  };

  bin.square = function(sidel) {
    if (arguments.length < 1) side = sidel;
    return "m" + square(sidel).join("l") + "z";
  };


  bin.size = function(_) {
    if (!arguments.length) return [width, height];
    width = +_[0], height = +_[1];
    return bin;
  };

  bin.side = function(_) {
    if (!arguments.length) return side;
    side = +_;
    dx = side;
    dy = side;
    return bin;
  };

  return bin.side(1);
};

var d3_binX = function(d) { return d[0]; },
    d3_binY = function(d) { return d[1]; };

})();

function trunc(x) {
      return x < 0 ? Math.ceil(x) : Math.floor(x);
}

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="d3.bin.js"></script>
<style>
body {
  font: 12px sans-serif;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.square {
  stroke: #fff;
  stroke-width: .5px;
}
</style>
</head>
<body>
<script type="text/javascript">
var margin = {top: 40, right: 40, bottom: 40, left: 40},
    w = 380 - margin.left - margin.right,
    h = 380 - margin.top - margin.bottom;

var color = d3.scale.linear()
    .domain([0, 3])
    .range(["yellow", "darkred"])
    .interpolate(d3.interpolateLab);

var x = d3.scale.linear()
    .domain([0, 100])
    .range([0, w]);

var y = d3.scale.linear()
    .domain([0, 100])
    .range([h, 0]);

var yinv = d3.scale.linear()
    .domain([0, 100])
    .range([0, h]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var side = 10;

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("scatterplot01.csv", function(error, data) {

  data.forEach(function(d) {
    d.time = +d.time;
    d.intensity = +d.intensity;
    points.push([d.time, d.intensity]);
  });

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + h + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);


svg.selectAll(".square")
      .data(bins(points))
      .enter()
      .append("rect")
      .filter(function(d) {return d.length>1})
      .attr("class", "square")
      .attr("x", function(d) { return x(d.x); })
      .attr("y", function(d) { return y(d.y)-yinv(side); })
      .attr("width", x(side))
      .attr("height", yinv(side))
      .style("fill", function(d) { console.log(d);return color(d.length); })
      .append("title").text(function(d) {return "number: "+d.length})
      .on("mouseover",function(d){console.log(d)})
svg.selectAll(".point")
    .data(bins(points))
    .enter()
    .append("circle")
    .filter(function(d) {return d.length==1})
    .attr("class","point")
    .attr("cx",function(d) { return x(d[0][0])})
    .attr("cy",function(d) { return y(d[0][1])})
    .attr("r",3.5)
    .style("fill","green")

});
</script>
</html>

## scatterplot01.csv

          
            time
            intensity

            
              0
              0

            
              0
              2

            
              0
              40

            
              0
              70

            
              5
              6

            
              5
              6

            
              5
              6

            
              5
              80

            
              10
              30

            
              10
              90

            
              10
              44

            
              10
              60

            
              10
              77

            
              15
              15

            
              15
              15

            
              15
              15

            
              20
              19

            
              20
              19

            
              20
              19

            
              20
              19

            
              20
              19

            
              20
              100

            
              20
              80

            
              20
              60

            
              20
              40

            
              25
              26

            
              25
              26

            
              25
              26

            
              25
              50

            
              30
              75

            
              30
              10

            
              30
              90

            
              35
              34

            
              35
              34

            
              35
              50

            
              40
              88

            
              40
              11

            
              40
              60

            
              40
              40

            
              40
              40

            
              40
              40

            
              40
              25

            
              50
              6

            
              50
              51

            
              50
              51

            
              50
              51

            
              50
              30

            
              50
              70

            
              50
              80

            
              50
              90

            
              55
              38

            
              60
              8

            
              60
              56

            
              60
              56

            
              60
              21

            
              60
              28

            
              60
              82

            
              60
              93

            
              65
              30

            
              67
              69

            
              67
              69

            
              70
              12

            
              70
              51

            
              70
              90

            
              67
              69

            
              67
              69

            
              70
              40

            
              75
              75

            
              75
              75

            
              75
              75

            
              80
              45

            
              80
              82

            
              80
              82

            
              80
              82

            
              80
              30

            
              80
              10

            
              80
              60

            
              85
              87

            
              85
              87

            
              85
              33

            
              90
              92

            
              90
              55

            
              90
              92

            
              90
              92

            
              90
              92

            
              90
              70

            
              90
              40

            
              90
              20

            
              95
              94

            
              100
              88

            
              100
              10

            
              100
              30

            
              100
              50
	(function() {

	d3.bin = function() {
	var width = 1,
	height = 1,
	side,
	dx,
	dy,
	x = d3_binX,
	y = d3_binY;

	function bin(points) {
	var binsById = {};

	points.forEach(function(point, i) {
	var py = y.call(bin, point, i) / dy;
	var pj = trunc(py);
	var px = x.call(bin, point, i) / dx;
	var pi = trunc(px);

	var id = pi + "-" + pj;
	var bin = binsById[id];
	if (bin) bin.push(point); else {
	bin = binsById[id] = [point];
	bin.i = pi;
	bin.j = pj;
	bin.x = pi * dx;
	bin.y = pj * dy;
	}
	});
	return d3.values(binsById);
	}

	function square(side) {
	var dx = side,
	dy = side;
	return [dx, dy];
	}

	bin.x = function(_) {
	if (!arguments.length) return x;
	x = _;
	return bin;
	};

	bin.y = function(_) {
	if (!arguments.length) return y;
	y = _;
	return bin;
	};

	bin.square = function(sidel) {
	if (arguments.length < 1) side = sidel;
	return "m" + square(sidel).join("l") + "z";
	};


	bin.size = function(_) {
	if (!arguments.length) return [width, height];
	width = +_[0], height = +_[1];
	return bin;
	};

	bin.side = function(_) {
	if (!arguments.length) return side;
	side = +_;
	dx = side;
	dy = side;
	return bin;
	};

	return bin.side(1);
	};

	var d3_binX = function(d) { return d[0]; },
	d3_binY = function(d) { return d[1]; };

	})();

	function trunc(x) {
	return x < 0 ? Math.ceil(x) : Math.floor(x);
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="d3.bin.js"></script>
	<style>
	body {
	font: 12px sans-serif;
	}
	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}
	.square {
	stroke: #fff;
	stroke-width: .5px;
	}
	</style>
	</head>
	<body>
	<script type="text/javascript">
	var margin = {top: 40, right: 40, bottom: 40, left: 40},
	w = 380 - margin.left - margin.right,
	h = 380 - margin.top - margin.bottom;

	var color = d3.scale.linear()
	.domain([0, 3])
	.range(["yellow", "darkred"])
	.interpolate(d3.interpolateLab);

	var x = d3.scale.linear()
	.domain([0, 100])
	.range([0, w]);

	var y = d3.scale.linear()
	.domain([0, 100])
	.range([h, 0]);

	var yinv = d3.scale.linear()
	.domain([0, 100])
	.range([0, h]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");

	var side = 10;

	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("scatterplot01.csv", function(error, data) {

	data.forEach(function(d) {
	d.time = +d.time;
	d.intensity = +d.intensity;
	points.push([d.time, d.intensity]);
	});

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + h + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);


	svg.selectAll(".square")
	.data(bins(points))
	.enter()
	.append("rect")
	.filter(function(d) {return d.length>1})
	.attr("class", "square")
	.attr("x", function(d) { return x(d.x); })
	.attr("y", function(d) { return y(d.y)-yinv(side); })
	.attr("width", x(side))
	.attr("height", yinv(side))
	.style("fill", function(d) { console.log(d);return color(d.length); })
	.append("title").text(function(d) {return "number: "+d.length})
	.on("mouseover",function(d){console.log(d)})
	svg.selectAll(".point")
	.data(bins(points))
	.enter()
	.append("circle")
	.filter(function(d) {return d.length==1})
	.attr("class","point")
	.attr("cx",function(d) { return x(d[0][0])})
	.attr("cy",function(d) { return y(d[0][1])})
	.attr("r",3.5)
	.style("fill","green")

	});
	</script>
	</html>
	time	intensity
	0	0
	0	2
	0	40
	0	70
	5	6
	5	6
	5	6
	5	80
	10	30
	10	90
	10	44
	10	60
	10	77
	15	15
	15	15
	15	15
	20	19
	20	19
	20	19
	20	19
	20	19
	20	100
	20	80
	20	60
	20	40
	25	26
	25	26
	25	26
	25	50
	30	75
	30	10
	30	90
	35	34
	35	34
	35	50
	40	88
	40	11
	40	60
	40	40
	40	40
	40	40
	40	25
	50	6
	50	51
	50	51
	50	51
	50	30
	50	70
	50	80
	50	90
	55	38
	60	8
	60	56
	60	56
	60	21
	60	28
	60	82
	60	93
	65	30
	67	69
	67	69
	70	12
	70	51
	70	90
	67	69
	67	69
	70	40
	75	75
	75	75
	75	75
	80	45
	80	82
	80	82
	80	82
	80	30
	80	10
	80	60
	85	87
	85	87
	85	33
	90	92
	90	55
	90	92
	90	92
	90	92
	90	70
	90	40
	90	20
	95	94
	100	88
	100	10
	100	30
	100	50