C O

A dendrogram is a node-link diagram that places leaf nodes of the tree at the same depth. In this example, the classes (leaf nodes) are aligned on the right edge, with the packages (internal nodes) to the left. Data shows the Flare class hierarchy, courtesy Jeff Heer.

Compare to this Cartesian layout.

forked from mbostock's block: Radial Cluster Dendrogram

---<!DOCTYPE html>
<meta charset="utf-8">
<title>Construction Cost Overruns Taxonomy</title>
<style>

.node circle {
  fill: red;
  stroke: black;
  
}

.node text {
  font: 18px sans-serif;
}

.node--internal circle {
  fill: Black;
}

.node--internal text {
  font: 18.0px sans-serif;
}

.link {
  fill: none;
  stroke: Black;
  stroke-opacity: 0.25;
  stroke-width: 1.5px;
}

</style>
<svg width="3700" height="3000"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    g = svg.append("g").attr("transform", "translate(" + (width / 2 - 5) + "," + (height / 2 + 5) + ")");

var stratify = d3.stratify()
    .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });

var tree = d3.cluster()
    .size([360, 900])
    .separation(function(a, b) { return (a.parent == b.parent ? 2 : 3) / a.depth; });

d3.csv("flare.csv", function(error, data) {
  if (error) throw error;

var root = tree(stratify(data)
      .sort(function(a, b) { return (a.height - b.height) || a.id.localeCompare(b.id); }));

var link = g.selectAll(".link")
    .data(root.descendants().slice(1))
    .enter().append("path")
      .attr("class", "link")
      .attr("d", function(d) {
        return "M" + project(d.x, d.y)
            + "C" + project(d.x, (d.y + d.parent.y) / 2)
            + " " + project(d.parent.x, (d.y + d.parent.y) / 2)
            + " " + project(d.parent.x, d.parent.y);
      });

var node = g.selectAll(".node")
    .data(root.descendants())
    .enter().append("g")
      .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
      .attr("transform", function(d) { return "translate(" + project(d.x, d.y) + ")"; });

node.append("circle")
      .attr("r", 5.0);

node.append("text")
      .attr("dy", ".160em")
      .attr("x", function(d) { return d.x < 180 === !d.children ? 9 : -9; })
      .style("text-anchor", function(d) { return d.x < 180 === !d.children ? "start" : "end"; })
      .attr("transform", function(d) { return "rotate(" + (d.x < 180 ? d.x - +90 : d.x + 90) + ")"; })
      .text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); });
});

function project(x, y) {
  var angle = (x - 90) / 180 * Math.PI, radius = y;
  return [radius * Math.cos(angle), radius * Math.sin(angle)];
}

</script>

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