Spacetree

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    .node circle {
  		fill: #999;
		}
    .node text {
      font: 10px sans-serif;
    }
    .node--internal circle {
  		fill: #555;
		}

.node--internal text {
  		text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
		}
    .link {
  		fill: none;
  		stroke: #555;
  		stroke-opacity: 0.4;
  		stroke-width: 1.5px;
    }
    .rect{
      fill:red;
      stroke:black;
      stroke-width:2;
      opacity:0.5
    }
}

</style>
</head>

<body>
  <svg width="400" height="400"></svg>
  <script>
		var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    g = svg.append("g");
    
    var tree = d3.tree()
    .size([height, width]);
    
    var stratify = d3.stratify()
    .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });

d3.csv("data.csv", function(error, data) {
  		if (error) throw error;
           
      var root = stratify(data).sort(function(a, b) {
        return (a.height - b.height) || a.id.localeCompare(b.id); 
      });
      
      function collapse(d) {
        if(d.children) {
          d._children = d.children;
          d._children.forEach(collapse);
          d.children = null;
        }
      }
      root.children.forEach(collapse);

tree(root);
      
      var link = g.selectAll(".link")
      .data(root.descendants().slice(1))
    	.enter().append("path")
      .attr("class", "link")
      .attr("d", function(d,i) {
            return "M" + d.x + "," + d.y
            + "C" + (d.x + d.parent.x)/2  + "," + d.y/2
            + " " + (d.x + d.parent.x)/2  + "," + (d.parent.y/2)
            + " " + d.parent.x + "," + (d.parent.y/2); 
      });
      
      
      var node = g.selectAll(".node")
      .data(root.descendants())
    	.enter().append("g")
      .attr("class", function(d) { return "node" + (d.children ? " node--internal" : 				" node--leaf"); })
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y/2 + ")"; 				});
      
      
            
      node.append("rect")
      	.attr('x',function(d){
        		if(d.children){
            	return d.children +8;                  
          	}
      		})
      	.attr('y',function(d){return d.children -8;})
      	.attr('width',50)
      	.attr('height',20)
      	.attr('class','rect');
      
       node.append("text")
      	.attr("dy", 3)
      	.attr("x", function(d) { return d.children ? -8 : 8; })
      	.style("text-anchor", function(d) { return d.children ? "end" : "start"; })
      	.style('fill', 'yellow')
      	.text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); });

});
    
  </script>
</body>

https://d3js.org/d3.v4.min.js