Skip to content

Instantly share code, notes, and snippets.

@romsson

romsson/.block

Last active January 7, 2018 17:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save romsson/b8123fa73cb4e219e2cb837442c83260 to your computer and use it in GitHub Desktop.
Save romsson/b8123fa73cb4e219e2cb837442c83260 to your computer and use it in GitHub Desktop.
Download ZIP
multiple Xs (grids)
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
rect, line {
fill: none;
stroke: black;
stroke-width: .5;
}
</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 = 600,
height = 600,
n = 5,
data = d3.range(n),
max_depth = 2,
root_grid = 36,
node_grid = 169;
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 draw_line(d, orient="bottom") {
if(orient === "vertical") {
svg.append("line")
.attr("x1", d.x + d.width/2)
.attr("x2", d.x + d.width/2)
.attr("y1", d.y)
.attr("y2", d.y + d.height)
} else if(orient === "horizontal") {
svg.append("line")
.attr("x1", d.x)
.attr("x2", d.x + d.width)
.attr("y1", d.y + d.height/2)
.attr("y2", d.y + d.height/2)
} else if(orient === "bottom") {
svg.append("line")
.attr("x1", d.x)
.attr("x2", d.x + d.width)
.attr("y1", d.y)
.attr("y2", d.y + d.height)
} else {
svg.append("line")
.attr("x1", d.x + d.width)
.attr("x2", d.x)
.attr("y1", d.y)
.attr("y2", d.y + d.height)
}
}
function generate_layout(params, data = d3.range(root_grid), depth = 0, id = 0) {
var gridding = d3.gridding()
.params(params);
var griddingData = gridding(data);
griddingData.forEach(function(d, i) {
if(depth === 1) {
draw_line(d, "top");
draw_line(d, "bottom");
} else {
var grid_type = "grid";
var node_params = {
"size": [d.width, d.height],
"offset": [d.x, d.y],
"mode": grid_type,
"padding": 1
};
node_grid = Math.pow(i, 2);
if(depth < max_depth-1) {
generate_layout(node_params, d3.range(node_grid), depth + 1, id++);
}
}
});
}
generate_layout(root_params);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment