Tree Graph with Phases Below Leaf Nodes

<html>
<meta charset="utf-8">
<style>
    text {
        font-size: 12px;
        font-family: san-serif;
    }
    .phase text {
        font-size: 5px;
        font-family: san-serif;
    }
    .link {
        fill: none;
        stroke: #000;
    }
</style>
<body>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
    var testData = {
        name: "root",
        children: [
            {
                name: "child1",
                children: [
                    {
                        name: "child1.1",
                        children: [
                            {
                                name: "child1.1.1",
                                phases: [
                                    {
                                        name: "phase1.1.1-1",
                                        value: 10
                                    },
                                    {
                                        name: "phase1.1.1-2",
                                        value: 300
                                    }
                                ]
                            },
                            {
                                name: "child1.1.2",
                                phases: [
                                    {
                                        name: "phase1.1.2-1",
                                        value: 80
                                    },
                                    {
                                        name: "phase1.1.2-2",
                                        value: 100
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        name: "child1.2",
                        children: [
                            {
                                name: "child1.2.1",
                                phases: [
                                    {
                                        name: "phase1.2.1-1",
                                        value: 120
                                    },
                                    {
                                        name: "phase1.2.1-2",
                                        value: 230
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        name: "child1.3",
                        children: [
                            {
                                name: "child1.3.1",
                                phases: [
                                    {
                                        name: "phase1.3.1-1",
                                        value: 120
                                    },
                                    {
                                        name: "phase1.3.1-2",
                                        value: 20
                                    }
                                ]
                            },
                            {
                                name: "child1.3.2",
                                phases: [
                                    {
                                        name: "phase1.3.2-1",
                                        value: 150
                                    },
                                    {
                                        name: "phase1.3.2-2",
                                        value: 290
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                name: "child2",
                children: [
                    {
                        name: "child2.1",
                        children: [
                            {
                                name: "child2.1.1",
                                phases: [
                                    {
                                        name: "phase2.1.1-1",
                                        value: 100
                                    },
                                    {
                                        name: "phase2.1.1-2",
                                        value: 200
                                    }
                                ]
                            },
                            {
                                name: "child2.1.2",
                                phases: [
                                    {
                                        name: "phase2.1.2-1",
                                        value: 50
                                    },
                                    {
                                        name: "phase2.1.2-2",
                                        value: 90
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        name: "child2.2",
                        children: [
                            {
                                name: "child2.2.1",
                                phases: [
                                    {
                                        name: "phase2.1.1-1",
                                        value: 100
                                    },
                                    {
                                        name: "phase2.1.1-2",
                                        value: 200
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    };

var width = 1200,
        height = 600;

var tree = d3.layout.tree().size([width, height/2]);
    var nodes = tree.nodes(testData);
    var links = tree.links(nodes);

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

var nodeSelection = svg.selectAll(".node").data(nodes, function(d) {
        return d.name;
    });

var groupNodes = nodeSelection.enter().append("g")
        .attr("transform", function(d) {
            return "translate(" + d.x + ", " + d.y + ")";
        })
        .attr("class", function(d) {
            return d.phases ? "phases" : "node";
        });

groupNodes.append("circle")
        .attr("r", 8)
        .attr("fill", "black")
        .attr("stroke", "black")
        .attr("stroke-weight", 1);

groupNodes.append("text")
        .text(function(d) { return d.name; })
        .attr("text-anchor", "right")
        .attr("transform", "translate(10, 5)");

nodeSelection.exit()
        .remove();

var linkSelection = svg.selectAll("path.link")
        .data(links, function(d) {
            return d.source.name + "-" + d.target.name;
        })
        .enter()
        .append("path")
        .attr("class", "link")
        .attr("d", d3.svg.diagonal());

var phaseSelection = nodeSelection.filter(function(d) { return d.phases; }).selectAll("g.phases")
        .data(function(d) { return d.phases; }, function(d) { return d.name; });

var phaseNodes = phaseSelection.enter().append("g")
        .attr("class", "phase")
        .attr("transform", function(d, i) {
            return "translate(" + ((i*30)-15) + ", 35)";
        });

phaseNodes.append("circle")
        .attr("r", 5)
        .attr("fill", "blue")
        .attr("stroke", "blue")
        .attr("stroke-weight", 1);

phaseNodes.append("text")
        .text(function(d) { return d.name; })
        .attr("text-anchor", "middle")
        .attr("transform", "translate(0, 15)");

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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