romsson/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  rect, line {
    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 = 600,
    height = 600,
    n = 4,
    data =  d3.range(n),
    max_depth = 3,
    root_grid = 2,
    node_grid = 400;

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

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

function draw_rect(d) {
  svg.append("rect")
      .attr("width", d.width)
      .attr("height", d.height)
      .attr("transform", "translate(" + d.x + "," + d.y + ")");
}

function draw_line(d, orient="bottom") {

  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)
  }
}

var id = 0;

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, id % 2 === 0 ? "bottom": "top");
      }
      var grid_type = "grid";

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

      if(depth < max_depth-1) {
        generate_layout(node_params, d3.range(node_grid), depth + 1, id++);
      }

    });

}

generate_layout(root_params);

</script>
<p>Inspired by
  <a href="https://twitter.com/jenniferdaniel/status/926121740689801216">https://twitter.com/jenniferdaniel/status/926121740689801216</a>
</p>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	rect, line {
	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 = 600,
	height = 600,
	n = 4,
	data = d3.range(n),
	max_depth = 3,
	root_grid = 2,
	node_grid = 400;

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

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

	function draw_rect(d) {
	svg.append("rect")
	.attr("width", d.width)
	.attr("height", d.height)
	.attr("transform", "translate(" + d.x + "," + d.y + ")");
	}

	function draw_line(d, orient="bottom") {

	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)
	}
	}

	var id = 0;

	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, id % 2 === 0 ? "bottom": "top");
	}
	var grid_type = "grid";

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

	if(depth < max_depth-1) {
	generate_layout(node_params, d3.range(node_grid), depth + 1, id++);
	}

	});

	}

	generate_layout(root_params);

	</script>
	<p>Inspired by
	<a href="https://twitter.com/jenniferdaniel/status/926121740689801216">https://twitter.com/jenniferdaniel/status/926121740689801216</a>
	</p>
	</body>