square grid overlap (grids)

<!DOCTYPE html>
<meta charset="utf-8">
<style>
rect {
  fill: none;
  stroke: black;
  stroke-width: 1;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://romsson.github.io/d3-gridding/build/d3-gridding.js"></script>
<script>

var width = 400,
    height = 400;

var init_params = {
  size: [width, height],
  mode: "grid",
  padding: 6.9
}

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

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

function draw(n = 9, params = init_params) {

var data =  d3.range(n);

svgSquares.append("g").selectAll(".square")
      .data(gridding(data))
    .enter().append("rect")
      .attr("class", "square")
      .style("fill", "none")
      .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(1);
draw(2*2);
draw(4*4);
draw(5*5);
draw(6*6);

</script>
<p>
  <a href="https://thegridsystem.net/">https://thegridsystem.net/</a>
</p>
</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