Partition Tree

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>

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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js