Tree Map Layout
Class TreeMapLayout is a layout algorithm that generates tree maps. A tree map visualizes hierarchical data as nested rectangles. The size of each rectangle represents a weight associated with the corresponding data item.
Tree maps are useful for visualizing the distribution of a weighted dimension across a hierarchy’s entities, while simultaneously displaying the hierarchical relationships. For example, tree maps can illustrate a file structure on a hard disk, where the weight represents the size of the files or folders.
Terminology
In yFiles, the nodes of the graph correspond to the rectangles in the tree map. Each node is assigned an area proportional to its associated weight. This means that the tree map layout algorithm changes the sizes of the nodes.
The hierarchical relationship between nodes is visualized by placing child nodes inside their parent nodes.
In a tree map layout, edges are not considered important and are not routed. Instead, they are reset to a straight line.
Input
TreeMapLayout supports two different kinds of inputs to create a tree map layout:
- A hierarchic grouping structure that defines the nesting. Note that the specified insets are considered for group nodes. If the graph is a tree graph, then the grouping structure is ignored; refer to the second input variant. To continue using the hierarchy information of the grouping structure on a tree graph, you can temporarily hide the tree edges before running the layout.
- A directed tree graph. The parent-child relationship is derived from the graph’s tree structure. If the graph also contains group nodes, the hierarchy relationship induced by them is ignored. The tree graph must be directed from the root node to the children. An undirected tree can be directed prior to the layout run; see Trees for details. Also note that a forest (a set of multiple trees) is not a valid input.
Defining the Weight of Nodes
The weight of a node is the main input that determines how the tree map is structured. This weight data is associated with the graph using the TreeMapLayoutData class. You can create this data using the factory method createLayoutData.
Each leaf node (a node without children) must have a positive weight value; otherwise, the input is invalid. Nodes with children should usually have a weight of zero. If a node with children has a positive weight, the algorithm creates free space inside the node’s rectangle. The size of this free space is proportional to the specified weight (i.e., the parent node becomes larger than its combined children).
If the range of the provided weights is large (i.e., the difference between the minimum and maximum weight value is significant), the resulting tree map might become very large, which can reduce readability. This is because the algorithm must consider the relative weight differences while still satisfying the minimum node size for the nodes with low weight. A solution is to interpolate the weight values before running the layout to constrain them to a narrower range.
Tiling Strategy
tilingStrategy defines the main layout style, specifying how rectangles are placed within the available area of their parent rectangle. The following tiling strategies are available:
- SLICE_AND_DICE
- Places the child nodes one after another inside the parent node. Child nodes are either tiled vertically (slice), one on top of the other with the width equal to the parent’s width, or they are tiled horizontally (dice), one next to the other with the height equal to the parent’s height. The tiling strategy alternates with the hierarchy levels. For example, level 1 uses slice, level 2 uses dice, level 3 uses slice, and so on.
- SQUARIFIED
- This strategy uses the 'squarify' algorithm. It tries to generate nodes with a size close to the specified aspectRatio. This increases the readability of the tree maps. The order is not strictly from top to bottom or from left to right; instead, it may differ for different subsets of children.
Figure Comparison of Tiling Strategies shows the difference between the two described strategies.
More Settings
There are several additional settings that allow you to customize the style of the tree map to your specific needs. See the following list for an overview, and consult the respective API documentation for details.
- preferredSize: Allows specifying the preferred size for the nodes in the tree map. It defines the desired dimensions of the nodes, which the layout algorithm tries to adhere to while still considering the weight of the nodes. This can help achieve a more uniform appearance across the tree map while maintaining the relative proportions of node sizes according to their weight.
- minimumNodeSize: The minimum node size setting ensures that no node in the tree map is smaller than a specified threshold. This is particularly useful when working with nodes that have very low weight values, as it ensures that even the smallest nodes are visually distinguishable and readable, improving the overall layout’s clarity.
- spacing: Controls the distance between adjacent nodes in the tree map. By adjusting the spacing, you can fine-tune the layout to prevent nodes from appearing too crowded or too far apart, optimizing the visual appeal and readability of the tree map.
- aspectRatio: The aspect ratio setting defines the ratio of width to height for nodes in the tree map. By specifying an aspect ratio, you can control the shape of the nodes, ensuring they maintain a balanced or rectangular form. This helps improve readability by ensuring that the nodes do not become overly stretched or distorted during the layout process.
- childNodeComparator: This layout data property allows you to define a custom comparison function that determines the order in which child nodes are placed inside their parent node. By specifying the comparison criteria, you can influence the layout to prioritize or reorder nodes based on specific attributes or values, ensuring that the tree map reflects the desired visual hierarchy and node arrangement.