These next few charts are just going to fly by; they're really similar and we don't have anything else in terms of common functions to write.

Adjacency diagrams are similar to treemaps, but are intended to fill the available space. They tend to be useful for visualizing things such as disk usage. They are created by the partition layout.

Here's our example code in full:

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

  const root = stratify(data) 
    .sum(d => d.screentime) 
    .sort(heightOrValueComparator); 

  const layout = d3.partition() 
    .size([ 
      this.innerWidth - 100, 
      this.innerHeight, 
    ]) 
    .padding(2) 
    .round(true); 

  layout(root); 

  const nodes = this.container.selectAll('.node') 
    .data(root.descendants().slice(1)) 
    .enter() 
    .append('g') 
      .attr('class', 'node'); 

  nodes.append('rect') 
    .attr('x', d => d.x0) 
    .attr('y', d => d.y0) 
    .attr('width', d => d.x1 - d.x0) 
    .attr('height', d => d.y1 - d.y0) 
    .attr('fill', d => descendantsDarker(d, color, false)); 

  this.container 
    .append('g') 
    .attr('id', 'legend') 
    .attr('transform', `translate(${this.innerWidth - 100}, 0)`) 
    .call(legend.legendColor().scale(houseColors)); 

  nodes.call(tooltip(d => d.data.itemLabel, this.container)); 
};

Any of this look new or unfamiliar to you? I am guessing not by now! Like treemaps, we slice off the root node and get rectangle sides by subtracting the top left corner from the bottom right corner. Add this to main.js as before, commenting out the other times we've initialized westerosChart:

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

It comes out looking like this:

Kinda cool, I guess? I like treemaps more, personally.