Java 8 API Hierarchy Data Visualization

Datasets


Datasets

The dataset used in this homework is about Java 8 API Hierachy. The dataset can be download at Java 8 API Hierachy It contain 1774 rows and 2 columns. The column "id" represent the Java 8 API file name and the "size" represent the associated HTML file size. This dataset are used to create traditional tree, radial dendrogram, circle packing, treemap and sunburst layouts for data visualization.


Data Visualization


Traditional Tree Node Layout (Straight Edges)

Description

The data visualization below is about Java 8 API Hierachy using Traditional Tree Node Layout with Straight Edges . Each node here is colored by depth level, with root has depth level of 0 down to the bottommost node of depth level 5. The color chosen here is using d3-chromatic scale with red to purple color scheme (d3.schemeRdPu) , the light pink represent the root with depth 0 and the deeper the level the color become more the darker purple at the bottom. The advantage of using tree node layout here is we can see the entire hierachy of Java 8 API with the parent and children relationship. The straight line connect the parent and children give us an intuitive way of seeing this hierachy structure layout. The limitation of this layout is that we can't reveal the size of the file based on node (package name), because all the node circle we using here is using the same size. But in overall, tree layout is great at seeing the whole Java 8 API hierachy at a glance.


Usage - Introduction

This data visualization is starting with root (Java) to its 14 package classes. The reason I made this design is to allow user to interact with the node, while trying to learn and implement node transition with user interaction. As you see that there are two button (Expand All and Collapse All) on top-left corner of the visualization and their features is describe below:

  • Expand All:

    - When you click on this button, the tree layout expand all Java 8 API hierachy from root to leaves, which let you see the whole hierachy layout at once.

  • Collapse All:

    - When you click on this button, the tree layout collapse everything and left with a root (Java) node on the layout. From here, you can explore the Java 8 API hierachy by clicking the node.


  • Usage - Details
    1. I would recommend that first click the Expand All button too see the whole tree layouts structure, find out the main package class you want to explore and remember the package name.
    2. Then click Collapse All button to make the layout only left a root node. From there
    3. After that, we can explore the package class by click and interact with the layout.
    4. Of course you don't need to follow the procedure above, this is just a suggestion, feel free to explore more and interact by mouse clicking the node or button.

    Radial Dendrogram (Curved Edges)

    Description

    The Radial Dendrogram with Curved Edges below are used to presenting the Java 8 API hierachy. The color encoding of each node is still based on depth level. The radial dendrogram is good at presenting the leaves' node of the hierachy but has limitation that it can't reveal the size of the files by nodes and there will some overlapping issue of adjacent leave node when the hierachy contains tremendous amount of leave nodes. In overall, it is still good at visualizing the parent and child node relationship and also a quick glance of the total leave nodes within this Java 8 API hierachy. The edges of this layout is curved because it looks pretty in this radial dendrogram especially when the animtion started!

    Animation

    I've try to add some animation to this radial dendrogram because it is pleasing to watch how the radial dendrogram is formed with the animation. The animation is basically built up with the transition(), delay(), duration() function call using D3 on the nodes and edges. Here is the link to the D3 transition documentation page: D3 Transition . If the animation is not working, it is probably ended since this animation is started when webpage is loaded. Please referesh and see the animation! Because of the limited time, I'm still not able to implement the scroller to animation effect with D3 but it's definitely worth learning in the future, if you are interested in learning this technique, you can click on this Demo by Tony Chu to learn the details.


    Circle Packing

    Description

    This circle packing visualization contains the information of the size of the files on Java 8 API hierachy. The color and size of each node/circle is encoded based on the size attribute, with the root Java has the most html files size of 58760708. The color coding is starting at light pink which represent the largest file size at root (Java) and approaching darker purple when the file size is smaller. As we can see that from this data visualization, excluding the root (Java) file size, the java.awt and java.util class package has bigger file size compared to other class package. The limitation of circle packing is that we lost the tree like hierachy layout because all the edges is removed, and replaced with circle and color to reveal data information instead.


    Zooming Effect

    This circle packing contain the zooming effect when you click on the the circle. The zooming effect is implement using d3.interpolateZoom() and learnt from Mike Bostock's Zoomable Circle Packing sample.


    Treemap

    Description

    This data visualization is created using Treemap layout which contains the information of the size of the files on Java 8 API hierachy. The color and area/size of each node/rectangle is still encoded based on the size attribute. It used the similar technique as of Circle Packing but it is using rectangle now instead. It reveals the the structure of Java 8 API hierachy and also the size of each packages. As we can see that this data visualization has label on it which give a quick glance of the name of the major class package of this Java 8 API but it is harder to see the label in the smaller file size package due to its limitation. The long label is clipped using the clipPath technique. In conclusion, Treemap is a good choice of diagram for filling the space in the form of nested rectangle.


    Sunburst

    Description

    This data visualizations is created using Sunburst layout and visualize the Java 8 API by showing the hierarchy with rings and circles. Each ring corresponds to a level in the hierarchy, with the center circle representing the root node and the hierarchy moving outwards from it, which reveals the parent and child relationship. The arc size and color is encoded based on the size attribute In this data visualization, we can achieve multiple data information such as the hierachy structure and file size based on ring and arc size.


    Design Process

    This Sunburst diagram has the zooming effect and also labeling on each arc. In order to reveal the data information but not losing the aesthetic point of view when visualize it, I decided to only display the major parent label on the center of circle and first level children label on the following outward rings. If you would like to see more information about the nested children, you can hover on the arc or click on any first level children node to explore more hierachy and data information


    Zooming Effect

    This Sunburst diagram has the zooming effect when you click on the parent or child node of the inner circle and outer ring. It reveals the parent and child node data information. The zooming technique using here is by tweening and scaling the angle and radius from the clicked node during transition using the d3.interpolate() , transition.tween() , and for the ring's arc path using transition.attrTween() .


    Labeling

    The labeling here is using autosizing, by compute the text length and the specific arc size, then we can scale the font size by arc size / text length * ratio. The reason I'm choosing autosizing on labeling here is because I wanted to play with different option instead of clipped the label like in the Treemap diagram. The disadvantage of labeling using this technique is that some font is really small when the arc size is small and the text size inconsistency issue, but the advantage of using it is we can try to display the full text by fitting it inside the arc.


    Animation

    This Sunburst diagram also has animation on it. Same as the dendrogram animation, if the animation is not working, it is because the animation is ended when page load. Check it out by refresh the page.


    Conclusion


    All these 5 different hierarchy data visualization have its own advantages and limitation but still capable in conveying useful information and intuitive data display of Java 8 API. The option of choosing which data visualization type is based on the what's the problem or goal you are trying to solve, for example if we want to see the entire hierarchy structure quickly, the preferred one would be tree layout; while the information you looking for is about the trend, or specific data attributes, the Sunburst maybe a good choice of selection. Finally, I appreciate the creator of these diagram which allow us to convey useful hierachy data information based on these diagram.