Java 8 API Hierarchy

Homework 4 Visualizations by Kaishvi Parikh
About Me »

Overview

The data used for these visualizations was the Java 8 API Hierarchy. These five visualizations focus mainly on a subset as the root node and explore its children rather than the full set to really understand how hierarchies work. The methods that I used here to visualize the hierarchies were using node, dendogram, treemap, icicle, and sunburst.

Traditional Node Layout, Straight Edges



This is a traditional node layout with straight edges that allows you to easily identify the root node. It is very easy to group together the parent/child relationships. With straight edges, there is a direct connection between two points making it easy for the eyes to travel from one point to the next. The straight edges also allow for us to explicitly see the height of the hierarchy. Hovering over each of them also allows us to see and easily read what the specific children belong to.

Circular Dendrogram Node Layout, Curved Edges



This circular dendogram with curved edges makes it very easy to see the final child of each of the parents all at one level. It gives us an idea of the total number of nodes at the end.The curved edges make it smoother on the eyes, rather than having straight, hard edges in a circular layout. Putting the root at the center gives us the ability to see where everything branches off of, and which parent nodes have the most number of children. It also gives us the chance to make a note of the different depth levels at the final child nodes, as made noticable by the different colors on the outermost level.

Treemap


This treemap layout packs rectangles and nests them within their parent node. This takes advantage of all the space available to it, making "space filling". This is a good way to see the sizes of each of the child/parent nodes. Also, this layout is colored by size, so the darker the color, the larger the size of the child. This makes it possible for us to point out all the different ranges of size within parent nodes.

Icicle Layout


In this icicle layout we use an extra dimension of length to encode each of the nodes. This gives us the same information as a traditional node layout, but it is more dense because it utilizes more space. It still allows us to see the placement of each node in the hierarchy and the height of the hierarchy is still very much visible, which is really important. This gives us context to how many children a node has.

Sunburst Layout


This sunburst layout is the radial version of the icicle layout, above. The center circle symbolizes the root - java.lang. Similar to an icicle layout, the length of each surrounding arc is determined by the amount of children it has. This is colored by size, so the darker the color is, the larger in size that particular node is. The click to zoom function here allows you to focus on specific children, if some areas are too dense to read in full view. After zooming, it is easy to see children than it is otherwise. Clicking outer arcs will zoom into that as the parent node, and clicking back in the center is what will bring you back to full view. It is easy to determine and point out the leaves, since they are on the outermost layer and very easy to point out. This means that they are even more deeper in the hierarchy.


Kaishvi Parikh Icon
About Me
I am currently pursuing a Finance major at the University of San Francisco with a Computer Science minor.
I have a passion for Disney, dance, and traveling to new places.
Visit my portfolio »

Adapted from Sophie Engle