Treemaps Test by pstuffa

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { 	
      margin:0;
/*       position:fixed; */
      top:0;
      right:0;
      bottom:0;
      left:0; 
    }
    
    .parent {
      background-color: #f4f4f4;
      border: 1px solid #000;
      width: 100px;
      max-width: 100px
      height: 100px;
      display: inline-table;
      margin: 2px;
    }
    
    .child {
      background-color: #d3d3d3;
      width: 10px;
      height: 10px;
      border: 1px solid #afafaf;
      padding: 2px;
      margin: 2px;
      display: inline-table;
    }
    
 
  </style>
</head>

<body>
  <script>
   	var n = 30,
        width = window.innerWidth,
        height = window.innerHeight;
    
    var parents = d3.select("body").selectAll(".parent")
    	.data(d3.range(n).map(Object))
    .enter().append("div")
    	.attr("class", "parent")
    	.each(function() {
        	
        var thisParent = d3.select(this);
        
        var children = thisParent.selectAll(".child")
        		.data(d3.range(Math.ceil(Math.random()*n)).map(Object))
        	.enter().append("div")
        		.attr("class", "child");

      });

  </script>
</body>