Skip to content

Instantly share code, notes, and snippets.

@romsson
Last active December 29, 2017 04:21
Show Gist options
  • Save romsson/113f9ceb8a45cee0592b20f5e1e84507 to your computer and use it in GitHub Desktop.
Save romsson/113f9ceb8a45cee0592b20f5e1e84507 to your computer and use it in GitHub Desktop.
signatures (grids)
license: mit
<!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>
<script src="http://d3js.org/d3.v4.js"></script>
<script src="http://romsson.github.io/d3-gridding/build/d3-gridding.js"></script>
<script>
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment