d3-heatmap

Rectangular binning with d3-heatmap based on d3-hexbin demo

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/fabid/d3-heatmap/heatmap.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>

<body>
  <script>
   var margin = {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0
      },
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

var randomX = d3.random.normal(width / 2, 80),
      randomY = d3.random.normal(height / 2, 80),
      points = d3.range(1000).map(function() {
        return [randomX(), randomY()];
      });
    console.log(points);
		var size = 4;
    var heatmap = d3.heatmap()
			.std(5)
    	.dx(size)
      .dy(size);

// the result of the heatmap layout
    var heatmapData = heatmap(points);

var color = d3.scale.linear()
      .domain([0, d3.max(heatmapData, function(d) {
        return d.v;
      })])
      .range(["white", "steelblue"])
      .interpolate(d3.interpolateLab);

var x = d3.scale.identity()
      .domain([0, width]);

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

var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
      .selectAll(".square")
      .data(heatmapData)
      .enter().append("rect")
       .attr("class", "square")
      .attr("x", function(d) { return x(d.x); })
      .attr("y", function(d) { return y(d.y) - yinv(size); })    
      .attr("width", x(size))
      .attr("height", yinv(size))
      .style("fill", function(d) {
        return color(d.v)
      })
      .style("stroke", "none");
  </script>
</body>

Updated missing url https://cdn.rawgit.com/fabid/d3-heatmap/master/heatmap.js to https://cdn.jsdelivr.net/gh/fabid/d3-heatmap/heatmap.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdn.rawgit.com/fabid/d3-heatmap/master/heatmap.js