D3.js 4.x Data Visualization - Third Edition

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() ...