Icicle Chart

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>

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>

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