Simple proof of concept showing how you can use the D3 partition layout to draw a tree.
This is using d3v3 because I needed to make it quick and I had a d3v3 icicle chart sitting around.
<!DOCTYPE html>
<head>
<title>Partition Tree</title>
</head>
<meta charset="utf-8">
<style>
svg {
height: 500px;
width: 1000px;
}
</style>
<body>
<div id="viz">
<svg></svg>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js" charset="utf-8" type="text/javascript"></script>
<script>
d3.json("d3.json", partition);
function partition(data) {
partition = d3.layout.partition();
var partitionWidth = 1000;
var partitionHeight = 500;
partition
.children(function(d) {return d["children"]})
.value(function(d) {return 1})
var chartG = d3.select("svg")
.append("g")
.attr("class", "partition")
.attr("transform", "translate(0,0)");
var partitionData = partition(data)
chartG.selectAll("line")
.data(partitionData.filter(d => d.parent))
.enter()
.append("line")
.attr("x1", function (d) {return d.x * partitionWidth + d.dx * partitionWidth / 2})
.attr("y1", function (d) {return d.y * partitionHeight + d.dy * partitionHeight / 2})
.attr("x2", function (d) {return d.parent.x * partitionWidth + d.parent.dx * partitionWidth / 2})
.attr("y2", function (d) {return d.parent.y * partitionHeight + d.parent.dy * partitionHeight / 2})
.style("stroke", "black")
.style("stroke-opacity", 0.5)
chartG.selectAll("circle")
.data(partitionData)
.enter()
.append("circle")
.attr("r", d => Math.min(d.dx * partitionWidth / 2, d.dy * partitionHeight / 2) * .95)
.style("fill", function (d) {return d.leafColor ? d.leafColor : "#DDD"})
.style("stroke", function (d) {return d.leafColor ? "none" : "black"})
.attr("cx", function (d) {return d.x * partitionWidth + d.dx * partitionWidth / 2})
.attr("cy", function (d) {return d.y * partitionHeight + d.dy * partitionHeight / 2})
}
</script>