Skip to content

Instantly share code, notes, and snippets.

@romsson
Last active December 18, 2017 13:34
Show Gist options
  • Save romsson/f29e046fd956b55c06b1ccca07f282a1 to your computer and use it in GitHub Desktop.
Save romsson/f29e046fd956b55c06b1ccca07f282a1 to your computer and use it in GitHub Desktop.
random layouts (grids)
license: mit
<!DOCTYPE html>
<meta charset="utf-8">
<style>
rect {
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;
var n = 9,
data = d3.range(n),
max_depth = 5;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
var root_params = {
"size": [width, height],
"offset": [0, 0],
"mode": "grid",
"padding": 7
};
function draw_rect(d) {
svg.append("rect")
.attr("width", d.width)
.attr("height", d.height)
.attr("transform", "translate(" + d.x + "," + d.y + ")");
}
function generate_layout(params, data = d3.range(81), depth = 0) {
var gridding = d3.gridding()
.params(params);
var griddingData = gridding(data);
if(depth < max_depth) {
griddingData.forEach(function(d, i) {
draw_rect(d);
var data = d3.range(3).map(function(d, i) {
return {id: d, index: i}
})
var grid_type = (i % 2) === 0 ? "vertical": "horizontal";
var node_params = {
"size": [d.width, d.height],
"offset": [d.x, d.y],
"mode": grid_type,
};
var datasets = [[1], [1, 2], [1, 1, 1], [2, 1]];
var data = datasets[Math.floor(Math.random() * datasets.length)];
if(grid_type === "vertical") {
node_params.valueWidth = function(d) { return d["__value"]; }
} else {
node_params.valueHeight = function(d) { return d["__value"]; }
}
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