Homework 4 -- Trees

Description

The visualization dataset comes from Java 8 API Hierarchy. The visualization below shows use use node link layouts (traditional, dendrogram) with different edge types (straight, curved) in different coordinate systems (Cartesian/rectangular vs polar/circular), and space-filling techniques (circle packing, treemap, partition/icicle, sunburst). The code are modified from here.

D3 Visualization

Traditional Node Layout, Straight Edges

This is a traditional node link layouts with straight edge types in rectangular system. The advantage of using this structure is that child nodes are placed below parent nodes by level and root is at top, and connected by straight lines, which makes it obviously to count the level of nodes and see the hierarchy structures. Also, the edges connect to its adjacent nodes. The disadvantage about this type of layout is that it used up the sceen space easily if the data are distributed. It will be a bit difficult to view a specific node if it happens that each parent node have too many children node.

Circular Dendrogram Node Layout, Curved Edges

The visualization is a circular dendrogram node-link layout with curved edge types in polar/circular systems. The root is in the center of the circle. The advantage of this visualization is that it doesnt take much screen space, and it is easy to view the nodes` hierarchy and inherit at different levels. However, from the visualization, we can clearly see the disadvantage that unlike tradiational node-link layout, the position of some parent nodes and child nodes exist in same leve, which is messed up in circlular dendrogram node-link layout.

Circle Packing

Circle packing is one of the most common space-filling techniques. The biggest outer circle is the root, and hierarchies layout is colored based on the either similarly to others in the same category, or nested within larger groups. The advanatage of circle packing diagram is to show the various groups and hierarchical structures vary in size and other properties. The confusing part about the visualization is the size of the circles. If you look at the details closer, you will find that some child node size is even bigger than the parent nodes from other category or even same level child nodes.

Icicle Layout

Icicle layout is one of the most common space-filling techniques. From the hierarchy structure, it is actually similar to the traditional node-link layout, but the only differences between them is just the technique. Compared to the traditional node-link layout, icicle layout is easier to observe the size of child node based on the width of each parent nodes.

Zoomable Sunburst

Sunburst tree diagram is a radial space-filling visualisation. The structure of hierarchy layout is similar to the icicle layout, but in a circular system. The root is in the center of the diagram, and children is surrounding around the parent nodes. Sunburst combines some advantages from other tree layouts. It is easy to see the node-link hierarchies and nodes`s size based on the structure/layout and colors. The disadvantage is that it occupies up the screen space just like traditional node link diagram.

About Author

I am Yuanyuan Ruan, who just graduate in data science major from University of San Francisco. I love data visualization class, because it makes me proud of myself when I managed to get all these beautiful visualizations. In my free time, I like to take online courses about data science, because my short term goal for the near future is to be a good data scientist.