random circles nested (grids)

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

circle {
    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;

// params to play with
var n = 4,
    data =  d3.range(n),
    max_depth = 3;

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

var root_params = {
  "size": [width, height],
  "offset": [0, 0],
  "mode": "grid"
};

function generate_layout(params, data = d3.range(9), depth = 0) {

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

var griddingData = gridding(data);

griddingData.forEach(function(d) {

var is_next = Math.random() > .05;

var node_params = {
      "size": [d.width, d.height],
      "offset": [d.x, d.y],
      "mode": "grid"
    };

var data = d3.range(Math.floor(Math.random() * 10));

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

var griddingData2 = gridding(data);

if(is_next && depth < max_depth) {

generate_layout(node_params, data, depth + 1);

} else {
      draw(griddingData2);
    }

});

}

function draw(griddingData) {

var id = Math.floor(Math.random(100) * 10000000000);

var circles = svg.selectAll("#circle_" + id)
      .data(griddingData);

circles.enter().append("circle")
      .attr("class", "circle")
      .attr("id", "circle_" + id)
      .attr("r", function(d) { return d.width / 2; })
      .attr("transform", function(d) {
        return "translate(" + d.cx + ","
                            + d.cy + ")";
      });

}

generate_layout(root_params);

</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