square grid glow (grids)

<!DOCTYPE html>
<meta charset="utf-8">
<body>

var width = 400,
    height = 400,
    n = 20,
    m = 20,
    t = 100;

var x = d3.scaleLinear().rangeRound([0, width]);
var y = d3.scaleLinear().rangeRound([0, height]);

var raw_data = d3.range(1000).map(d3.randomBates(5));

var bins = d3.histogram()
    .domain(x.domain())
    .thresholds(x.ticks(n))
    (raw_data);

var data = cross(bins, bins);

var radius = d3.scaleSqrt()
    .range([0, width/n]);

radius.domain(d3.extent(data, function(d) { return d.h * d.w; }))

data.forEach(function(d) {
  d.w = d.h = radius(d.w * d.h);
})

var svgSquares = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
 .append("g");

function draw() {

var gridding = d3.gridding()
    .params(params);

svgSquares.selectAll(".square")
      .data(gridding(data))
    .enter().append("rect")
      .attr("class", "square")
      .attr("width", function(d) { return d.w; })
      .attr("height", function(d) { return d.h; })
      .attr("transform", function(d) { 
    		return "translate(" + (d.x - d.w/2) + "," + (d.y - d.h/2) + ")"; 
  		});
}

draw();
</script>
</body>

Modified http://d3js.org/d3.v4.js to a secure url

Modified http://romsson.github.io/d3-gridding/build/d3-gridding.js to a secure url

https://d3js.org/d3.v4.js

https://romsson.github.io/d3-gridding/build/d3-gridding.js