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