Muster the cluster!

Another type of similar diagram is a dendrogram, which uses D3's cluster layout and puts all leaf nodes of a tree at the same depth. Let's create that now. Comment out the westerosChart.init() line in main.js and add this beneath it:

westerosChart.init('cluster', 'data/GoT-lineages-screentimes.json');

Go back to chapter6/index and add the following:

westerosChart.cluster = function Cluster(_data) { 
  const data = getMajorHouses(_data); 
  const stratify = d3.stratify() 
    .parentId(d => d.fatherLabel) 
    .id(d => d.itemLabel); 

  const root = stratify(data); 

  fixateColors(houseNames(root), 'id'); 

  const layout = d3.cluster() 
    .size([ 
      this.innerWidth - 150, 
      this.innerHeight, 
    ]); 

  const links = layout(root) 
    .descendants() 
    .slice(1); 
}

This should look familiar already--we get our data, create a stratify generator, then use it on our data. We then create a cluster layout, give it a size (though, here we subtract 150 pixels...