An icicle chart based off the D3 API using d3.layout.partition.
<!DOCTYPE html>
<head>
<title>D3 API Icicle Chart</title>
</head>
<meta charset="utf-8">
<style>
svg {
height: 500px;
width: 500px;
}
</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 = 500;
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)");
chartG.selectAll("rect")
.data(partition(data))
.enter()
.append("rect")
.attr("x", function (d) {return d.x * partitionWidth})
.attr("y", function (d) {return d.y * partitionHeight})
.attr("width", function (d) {return d.dx * partitionWidth})
.attr("height", function (d) {return d.dy * partitionHeight})
.style("fill", function (d) {return d.leafColor ? d.leafColor : "grey"})
.style("fill-opacity", function (d) {return d.leafColor ? 1 : .1})
.style("stroke", function (d) {return d.leafColor ? "none" : "black"})
chartG.selectAll("text")
.data(partition(data))
.enter()
.append("text")
.attr("x", function (d) {return d.x * partitionWidth})
.attr("y", function (d) {return (d.y * partitionHeight) + 15})
.text(function (d) {return d["name"] ? d["name"].substr(0, parseInt((d.dx * partitionWidth) / 8)) : ""})
}
</script>