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