billdwhite/index.html

## index.html
<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="http://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>
	<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="http://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>