Visualization of Hierarchical Data Stored in the

Download PDF
0 downloads 0 Views 473KB Size Report
Comment
disk as viewed from a multiple level directory or subdirectories and files. In this application ... Then it uploads it to the server, where a PHP script will put it in an ...
Visualization of Hierarchical Data Stored in the Newick Format Michael Burch*, Ahmed Ibrahim, Theodorus Bauke Gieles, Emre Cem Kaya, Tommie Kerssies, Kosta Shishkov, Diana Spahieva, T.A.A. Willems Eindhoven University of Technology

(a)

(b)

Figure 1: Hierarchy visualization with treemaps (a) and radial dendrograms (b).

A BSTRACT The goal of this work is to be able to visualize hierarchical data given in the Newick format in different perspectives. By displaying those side by side, an analyst can view and compare the data while interactions are applied to them. So far we support treemap visualizations and radial dendrograms both having benefits for smaller hierarchies, but also drawbacks if the data becomes much bigger. We create a web-based application that uses JavaScript with a combination of libraries including D3, using HTML/CSS with the Bootstrap library for the frontend, and PHP for the backend. Index Terms: Human-centered computing—Visualization— Visualization design and evaluation methods

in an easy way. The supported data format in this work is Newick for which many libraries exist to transform, order, or aggregate. Also a parsing functionality is supported making it an efficient data format to use in a hierarchy visualization tool. 2

The visualization tool can depict a hierarchical dataset given in the Newick format in two ways: as a treemap or as a radial dendrogram. Both approaches have benefits and drawbacks concerning structural clarity and visual scalability, but are best if the dataset is not too big. 2.1

1

I NTRODUCTION

In this paper we describe two different visualization techniques that were chosen to depict hierarchical data. The data will be visualized in tandem as to provide multiple viewpoints for the analyst viewing the data. From the many hierarchy visualizations available [20], we decided to use a standard treemap visualization [4, 17, 21] and a radial dendrogram. By combining those two, an observer can interactively view the data in both, an aesthetically pleasing and exploratory way. The visualizations are tested by applying them to a dataset that consists of more than 300,000 elements. With a treemap we can easily visualize huge data sets. With a dendrogram, however, the visualization is not that visually scalable anymore, in particular, if textual labels have to be placed in the diagram (see Figure 1). Interaction techniques like zooming into the visualization can help to focus on certain parts of the hierarchy. Moreover, paths from a start to a target vertex can be highlighted easily in a radial dendrogram. For the visualization tool we made use of the D3 library which is a prominent visualization library when using JavaScript. D3 allows to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. This allows for the user to input data and receive a visualization based on that data * e-mail:

[email protected]

V ISUALIZATION TOOL

Graphical User Interface

The GUI consists of two parts. In the first section, one can upload a dataset to the site. In the second section, all previously uploaded datasets are shown. One can click to delete it from the site again. When clicking on a file in the list, the data in this file will be visualized to the right. The nodes are highlighted by blue dots. When a node has a name, it is shown next to the node. When a node has a value, it is shown next to it with a special sign ’:’ in the center. There is one main view, which has everything encompassed in it. When clicking on a le, the visualization collapses next to the file list in the same view. 2.2

Visualization Techniques

One of the visualizations that is implemented is a dendrogram, mostly used when showing the hierarchical relationship between objects in a biological context [15] or as the output of a hierarchical clustering algorithm, for example, in computational biology to show gene clusters or the evolution tree of organisms. It starts with the main root node and branches off depending on the clusters provided from the dataset. We use a radial dendrogram version to create a more scalable variant. Another visualization supported by our tool is a tree map [17] originally designed to represent how the data is stored on a hard disk as viewed from a multiple level directory or subdirectories and files. In this application the files were displayed as leaf nodes and the subdirectories as parent nodes. The analyst can traverse the tree by clicking on the nodes.

2.3

Implementation Details

When one uploads a file, Javascript will first check if it is in the right format (.tre). Then it uploads it to the server, where a PHP script will put it in an uploads folder. When one clicks on an uploaded file, JavaScript will make an AJAX request to the webserver with the file name, then PHP will serve the contents of this file back to the client. JavaScript will then parse the contents of this file using the BioJS Newick Parser. This parser will turn the Newick string into a JSON object so it can be used with the D3 library. In the D3 Javascript code, a canvas with SVG (Scalable Vector Graphics) is defined for both visualizations for which we have also implemented functions that allow to expand and collapse nodes by hiding their children. Hidden children are renamed as children so the d3 script ignores them. For the dendrogram, in the initialization phase the first visualization uses a cluster layout that produces node-link diagrams that place leaf nodes of the tree at the same depth. The layout is then fixed in its correct HTML container. The coordinates for the root node are set and the whole tree is collapsed before it is visualized. Then the actual visualization begins with an update function which is called at the end of the initialization and after each click on a node. The update function begins with setting the height of each level by counting the total children of the root node. Links between the nodes are added using d3.svg.diagonal which generates the curved lines. Both the nodes and the links between them undergo a transition animation when new nodes appear or some are collapsed. For the treemap, in the initial rendering the treemap only renders the children of the root. We do this by keeping the other nodes hidden until we will use them. We show only the unhidden nodes with filtering and remove the others. The colors of each rectangle are given randomly from a scaling of 10 colors by the d3 library. Coordinates are given as the nodes do not overlap and fit in the correct HTML container. When a node is clicked, an update function is called which clears the canvas and makes the children of the clicked node unhidden while removing the previous layer of nodes. This visualizes only the children of the node that we click, because we only visualize the unhidden nodes with each rendering. The reset button clears the whole canvas and re-initializes the visualization. 3

C ONCLUSION

AND

F UTURE W ORK

In this work we showed a hierarchy visualization tool making use of a standard treemap visualization and a radial dendrogram. Both views are linked and can be changed interactively. For the implementation of this web-based visualization we used JavaScript with a combination of libraries including D3, using HTML/CSS with the Bootstrap library for the frontend, and PHP for the backend. The tool is able to load hierarchy data in the Newick format. For future work we plan to evaluate the visualization tool by means of eye tracking [1, 6, 9, 18]. Moreover, we plan to compare different hierarchy visualizations like generalized Pythagoras trees [3] or cushion treemaps [21]. The recorded eye movement data [22] might be analyzed for scanpath similarities [5, 10] or even differences [19] in order to find efficient hierarchy visualizations for such a tool. A similar approach might be investigated for other typical data visualization tools in information visualization, for example, dynamic graph data [2]. The best grouping of the graph vertices [7, 8, 11–14, 16] might be evaluated, although this is a challenging task. R EFERENCES [1] G. Andrienko, N. Andrienko, M. Burch, and D. Weiskopf. Visual analytics methodology for eye movement studies. IEEE Transactions on Visualization and Computer Graphics, 18(12):2889–2898, 2012. [2] F. Beck, M. Burch, S. Diehl, and D. Weiskopf. A taxonomy and survey of dynamic graph visualization. Computer Graphics Forum, 36(1):133–159, 2017.

[3] F. Beck, M. Burch, T. Munz, L. D. Silvestro, and D. Weiskopf. Generalized pythagoras trees for visualizing hierarchies. In Proceedings of the 5th International Conference on Information Visualization Theory and Applications, IVAPP, pp. 17–28, 2014. [4] M. Burch. Interactive similarity links in treemap visualizations. In Proceedings of 18th International Conference on Information Visualisation, IV, pp. 34–39, 2014. [5] M. Burch. Visual analysis of eye movement data with fixation distance plots. In Proceedings of Conference on Intelligent Decision Technologies, pp. 227–236, 2017. [6] M. Burch, G. L. Andrienko, N. V. Andrienko, M. H¨oferlin, M. Raschke, and D. Weiskopf. Visual task solution strategies in tree diagrams. In Proceedings of IEEE Pacific Visualization Symposium, pp. 169–176, 2013. [7] M. Burch, F. Beck, and D. Weiskopf. Radial edge splatting for visualizing dynamic directed graphs. In Proceedings of the International Conference on Computer Graphics Theory and Applications (IVAPP), pp. 603–612, 2012. [8] M. Burch, M. Fritz, F. Beck, and S. Diehl. Timespidertrees: A novel visual metaphor for dynamic compound graphs. In Proceedings of the IEEE Symposium on Visual Languages and Human-Centric Computing, VL/HCC, pp. 168–175, 2010. [9] M. Burch, N. Konevtsova, J. Heinrich, M. H¨oferlin, and D. Weiskopf. Evaluation of traditional, orthogonal, and radial tree diagrams by an eye tracking study. IEEE Transactions on Visualization and Computer Graphics, 17(12):2440–2448, 2011. [10] M. Burch, A. Kumar, and K. Mueller. The hierarchical flow of eye movements. In Proceedings of the 3rd Workshop on Eye Tracking and Visualization, ETVIS@ETRA, pp. 1–5, 2018. [11] M. Burch, C. M¨uller, G. Reina, H. Schmauder, M. Greis, and D. Weiskopf. Visualizing dynamic call graphs. In Proceedings of the Vision, Modeling, and Visualization Workshop 2012, pp. 207–214, 2012. [12] M. Burch, T. Munz, and D. Weiskopf. Edge-stacked timelines for visualizing dynamic weighted digraphs. In Proceedings of International Conference on Information Visualization Theory and Applications, pp. 93–100, 2015. [13] M. Burch, B. Schmidt, and D. Weiskopf. A matrix-based visualization for exploring dynamic compound digraphs. In Proceedings of the International Conference on Information Visualisation, IV, pp. 66–73, 2013. [14] M. Burch, C. Vehlow, F. Beck, S. Diehl, and D. Weiskopf. Parallel edge splatting for scalable dynamic graph visualization. IEEE Transactions on Visualization and Computer Graphics, 17(12):2344–2353, 2011. [15] J. Heinrich, R. Seifert, M. Burch, and D. Weiskopf. Bicluster viewer: A visualization tool for analyzing gene expression data. In Proceedings of Advances in Visual Computing - 7th International Symposium, ISVC, pp. 641–652, 2011. [16] M. Hlawatsch, M. Burch, and D. Weiskopf. Visual adjacency lists for dynamic graphs. IEEE Transactions on Visualization and Computer Graphics, 20(11):1590–1603, 2014. [17] B. Johnson and B. Shneiderman. Tree maps: A space-filling approach to the visualization of hierarchical information structures. In Proceedings IEEE Visualization ’91, pp. 284–291, 1991. [18] K. Kurzhals, B. D. Fisher, M. Burch, and D. Weiskopf. Evaluating visual analytics with eye tracking. In Proceedings of the Fifth Workshop on Beyond Time and Errors: Novel Evaluation Methods for Visualization, BELIV, pp. 61–69, 2014. [19] K. Kurzhals, M. Hlawatsch, F. Heimerl, M. Burch, T. Ertl, and D. Weiskopf. Gaze stripes: Image-based visualization of eye tracking data. IEEE Transactions on Visualization and Computer Graphics, 22(1):1005–1014, 2016. [20] H. Schulz. Treevis.net: A tree visualization reference. IEEE Computer Graphics and Applications, 31(6):11–15, 2011. [21] J. J. van Wijk and H. van de Wetering. Cushion treemaps: Visualization of hierarchical information. In IEEE Symposium on Information Visualization 1999 (INFOVIS’99), pp. 73–78, 1999. [22] A. L. Yarbus. Eye Movements and Vision (Translated from Russian by Basil Haigh. Original Russian edition published in Moscow in 1965.). New York: Plenum Press, 1967.