All hierarchical layouts are based on an abstract hierarchy layout designed for representing hierarchical data: a recursive parent-child structure. As mentioned earlier, imagine a tree or an organization chart.

All the code for the partition, tree, cluster, pack, and treemap layouts are defined in the d3-hierarchy module, and they all follow similar design patterns. The layouts are very similar and share lots of common aspects; so, to avoid repeating ourselves a whole bunch, we'll look at the common stuff first, and then focus on the differences.

First of all, we need some hierarchical data. In the book repository, I've provided a file called GoT-lineages-screentimes.json that contains all the character lineages (by father), the amount of time spent on screen, and the number of episodes a character is in. We'll use genealogies of each character as a way of creating a hierarchy, then time on screen to size various page elements in layouts that necessarily need them (I don't bother in the tree or cluster examples to keep them shorter and easier to read).

Each item in GoT-lineages-screentimes.json is an object in the following format:

  { 
    "itemLabel": "Lysa Arryn", 
    "fatherLabel": "Hoster Tully", 
    "screentime": 16.3, 
    "episodes": 5 
  },

As our data isn't already in a tree format, we will use d3.stratify() to create a hierarchy from it, using itemLabel for each node's unique ID, and fatherLabel as the ID of each node's parent.