The pack layout produces charts similar to treemaps, but using round nodes. This is probably the best of the last three charts in this section for representing this hierarchy -- remember how we needed to use a ludicrous amount of padding in our treemap to make the parent nodes more visible? Since circle packing diagrams use more space, the parent nodes are more visible and that relationship is more pronounced.

Like before, comment out the other westerosChart.init() lines in main.js and add this:

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

Next, add the following to chapter6/index.js:

westerosChart.pack = function Pack(_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(valueComparator); 

  const houseColors = color.copy().domain(houseNames(root)); 
  fixateColors(data, 'itemLabel'); 

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

  layout(root); 

  const nodes = this.container.selectAll('.node') 
    .data(root.descendants().slice(1)) 
    .enter() 
    .append('circle') 
      .attr('class', 'node') 
      .attr('cx', d => d.x) 
      .attr('cy', d => d.y) 
      .attr('r', d => d.r) 
      .attr('fill', d => descendantsDarker(d, color, true, 5)); 

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

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

This is pretty much the exact same as the last chart, but we put the legend closer to the bottom and are appending circles instead of rectangles. You should now have something like this: