signatures (grids)

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

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

var width = 400,
    height = 400;

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

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

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

var level = 0;

var line = d3.line().curve(d3.curveBasis);

line
  .x(function(d) { console.log(d.index); return d.cx; })
  .y(function(d) { return d.cy; });

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

data = d3.range(9).map(function(d, i) {
    return {index: i, value: Math.random()}
  })

var p = params;

if(depth == 2) {
    data = d3.range(50)
    params.mode = "coordinate"
  }

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

var griddingData = gridding(data);

level++;

if(depth === 2) {

var lines = svg.selectAll(".line_" + level)
    .data([griddingData]);

lines.enter().insert("path")
      .attr("class", "line_" + level)
      .attr("d", function(d) { return line(d); });

}

if(depth < max_depth) {

griddingData.forEach(function(d) {

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

generate_layout(node_params, data, depth+1);
    });
  }
}

generate_layout(root_params);

</script>

</body>

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

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

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