6 Hierarchical Data Visualizations
Create a variety of data visualizations with hierarchical data
Hierarchical data is a type of data structure where data points are linked to each other through parent-child relationships which form a tree structure. Hierarchal data is a common data structure so it is important to know how to visualize it. The visualization techniques used for this vary from other data structures because of the need to maintain the hierarchical relationship. This article will show six types of visualizations.
Dataset
The dataset used is the flare dataset which shows the hierarchal relationship for the Flare ActionScript visualization library. It shows the class hierarchy and the connections between classes. The dataset can be downloaded as a json here.
Trees
A tree visualization displays hierarchical data with a collection of nodes (data points) and edges (hierarchical relations between nodes).
- Normal
A normal tree visualization is the most commonly used type of hierarchal visualization. It is easy to interpret since the traditional tree structure is widely known. However, large trees can become distorted to fit the screen or need the addition of a scroll feature to see the whole tree which makes the visualization more difficult to interpret.
2. Radial
A radial tree, sometimes known as a radial dendrogram, is the same as a normal tree visualization but in a circular format. A benefit of using a radial tree is it’s more compact than a normal tree so it is better for larger trees. A drawback of this format is the labels can be difficult to read depending on how they are shown.
Layered Diagram
Layered diagrams are good for showing spacial relationships otherwise called part-of-a-whole relationships.
1. Normal
The normally layered diagram shows the root node or starting point of the dataset as the far left column while the deepest leaf nodes are on the right-most side. This specific example using the flare dataset shows the hierarchal relationship within the flare class. The first column is the root which represents the size of the flare class overall and the second column is the sizes of classes within the flare case, and so on. A drawback of the normally layered diagram is if the size ratios are large the leaf nodes become hard to interpret especially in large trees.
2. Radial
A radial layered diagram is also known as a sunburst chart follows the same concept as the normal layered diagram except in a radial format. A pro of utilizing a radial format is that it is more compact so it is useful for larger datasets. Some cons are that the size can become skewed depending on location since the sections towards the outside of the circle will be larger compared to the same-size section closer to the inside. This is because the circumference of the inside circles are naturally smaller than the outside. Also, the angles created by the sections can make the size more difficult to interpret. The code for both layered diagrams can be found here.
Treemap
A treemap represents hierarchal data with a set of nested shapes. The shapes are used to show a size relative to its area. Treemaps are able to show how categories are divided based on each level of the hierarchy.
1. Normal
A normal treemap consists of nested rectangles. A benefit of a normal treemap is it provides a clear visual of hierarchical data. Since the spaces are divided into rectangles this allows the viewer to easily see the node sizes in proportion to their parents which in turn makes it very useful for comparisons. A drawback is that deep trees can make the static visual confusing, so a dataset with a depth greater than three could benefit from the addition of an interactive feature to improve readability.
2. Circular
A circular treemap, also known as circular packing, is similar to a normal treemap except it uses nested circles. The positive of using circular packing is it clearly highlights the hierarchical relationships between groups. The negatives are it doesn’t use space as efficiently as a normal treemap. Similar to a normal treemap it only shows three to four levels clearly and after that the visualization becomes unclear. If the data being used has a depth higher than four it is important to add interactive features.
Interactive Features
A common drawback of visualizing hierarchical data is readability, especially for large datasets. Wider and deeper the trees make it more difficult for the audience to understand the information being conveyed. A solution is to make the visualization interactive.
1. Sliders: Changes Depth
The first solution is creating a slider so the user can control the depth or the number of levels shown in the visual. This allows the user to interact with the visualization so they can see how it changes when more layers are added. The two types of sliders that can be used are simple sliders and range sliders. Simple sliders allow the user to control how many levels are shown in the visualization. The range slider only shows data points between two depth values. The interactive treemap above includes a simple slider.
2. Zoom: Focus on Details
A large hierarchical visualization can make some or all nodes difficult to see. Adding a zoom feature allows the user to click on a section to get a more detailed view. In the treemap above click on any node and it will zoom in to give a more detailed view of its descendants. Clicking on that same node again will zoom out to include the previous layer.
3. Tooltip: Hover for Additional Information
A tooltip allows for a user to hover over a section of the visualization and a popup with additional information will appear. This can also be used when there is no space to add labels to every node. In the example above you can hover your mouse above any node and the name and size will popup.
4. Highlight: Draw Attention to Specific Parts
A hierarchical visualization shows a good representation of the overall data, however, if there are specific sections that need to stand out a good way to do this would be to highlight the intended areas.
For a step-by-step tutorial on how to create this interactive treemap in Python check out my article below.
Citations
Bostock, M. (2017, November 15). Tree, radial tidy. Observable. Retrieved June 23, 2022, from https://observablehq.com/@d3/radial-tree
Bostock, M. (2021, October 27). A JSON file with the Flare Class Hierarchy. https://gist.github.com/mbostock/1044242#file-readme-flare-imports-json. license: gpl-3.0
Bostock, M. (2022, April 6). Tree, tidy. Observable. Retrieved June 23, 2022, from https://observablehq.com/@d3/tree
daktari. (2019, February 5). D3 Circle Packing. Observable. Retrieved June 23, 2022, from https://observablehq.com/embed/@tasqon/d3-circle-packing?cells=chart
