grid jitter (grids)

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    font-family: Helvetica;
    font-size: 20px;
  }

rect {
    fill: none;
    stroke: black;
    stroke-width: 1;
  }
</style>
<body>

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

var res = d3.range(n);

res.forEach(function(d, i) {
  res[i] = d3.range(m).map(function(e, j) {
    return {x:i * n/width + (Math.random()/t), y: j * m/height + (Math.random()/t), w: n/width + (Math.random()/t), h: m/height + (Math.random()/t)};
  });
});

var data = [].concat.apply([], res)

var params = {
  "size": [width, height],
  "offset": [0, 0],
  "mode": "coordinate",
  "valueX": "x",
  "valueY": "y",
  "valueWidth": function(d) { return d["w"]},
  "valueHeight": function(d) { return 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")
		  .style("fill", "white")
      .attr("width", function(d) { return d.width; })
      .attr("height", function(d) { return d.height; })
      .attr("transform", function(d) { 
    		return "translate(" + d.x + "," + d.y + ")"; 
  		});

}

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