square grid inverted glow (grids)

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  rect {
    fill: none;
    stroke: black;
    stroke-width: 1;
  }
</style>
<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 data = d3.range(1000).map(d3.randomBates(5));

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

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 = 20-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) + ")rotate("+2*radius(d.w * d.h)+")"; })

}

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