A Billiard Metaphor for Exploring Complex Graphs Elio Ventocilla Juhee Bae University of Skövde University of Skövde Sweden Sweden elio.ventocilla@his.se juhee.bae@his.se Maria Riveiro Alan Said University of Skövde University of Skövde Sweden Sweden maria.riveiro@his.se alan.said@his.se ABSTRACT In this paper we propose what we call a bottom-up alterna- Exploring and revealing relations between the elements is a fre- tive based on a billiard metaphor, where a small part of the visual quent task in exploratory analysis and search. Examples include representation is given and from which the user can interactively that of correlations of attributes in complex data sets, or faceted construct what s/he finds of interest. In this way we aim at relieving search. Common visual representations for such relations are di- the user from the noise complex graphs could entail. rected graphs or correlation matrices. These types of visual encod- In the billiard metaphor, a given element has a stronger relation ings are often - if not always - fully constructed before being shown with others it is able to push farther. Elements which are pushed the to the user. This can be thought of as a top-down approach, where least are analogously the least related ones. Based on this metaphor, users are presented with a full picture for them to interpret and the user can choose which relations to see by directing and car- understand. Such a way of presenting data could lead to a visual oming (striking) a cue ball towards the elements of interest. overload, specially when it results in complex graphs with high We carried out a preliminary evaluation of a prototype through degrees of nodes and edges. We propose a bottom-up alternative which we aimed at getting an idea of its usability as well as to know called Billiard where few elements are presented at first and from how the metaphor was perceived in the context of correlations. We which a user can interactively construct the rest based on what observe that the majority of respondents find the prototype to be s/he finds of interest. The concept is based on a billiard metaphor useful and the metaphor to be coherent with the task at hand i.e. where a cue ball (node) has an effect on other elements (associated exploring correlations. We also received suggestions for improve- nodes) when stroke against them. ment from our participants, which will be taken into account for future work. CCS CONCEPTS • Information systems → Search interfaces; • Human-centered computing → Graph drawings; 2 RELATED WORK KEYWORDS Visualization of relations among multiple elements has taken differ- Visualization, interaction, correlation ent forms. Azzopardi [1] used a wave metaphor where different data points generate ripples that, when coming across, create varied pat- 1 INTRODUCTION terns. In another work, concentric circles are used for categorizing historical information by applying different angles between edges, Relations between elements of data, such as correlations, links while also encoding time as length [4]. Here, category clusters are between pages or news topic similarities, are often depicted by shown all at once, thus introucing the issue of cluttering labels. means of directed graphs or correlation matrices. In both cases, For location-based and time varying correlations, Chen et al. [3] visual elements are fully constructed before shown to the user. developed a 3D static solution where, due to the computational We call this a top-down visual approach, in which a user is given intensive nature of their task, data needed to be sampled by domain an overall picture to browse, decompose and understand. This is experts. regardless of the complexity –in terms of the amount of elements In the domain of causal relations, Kadaba et al. [5] found that and relations– a visual representation might have. Such is specially participants were 5% more accurate and 8% faster when working the case of data that produces complex graphs with high degrees of with animated visualizations rather than static. Visualization of nodes and edges (e.g. complete graphs). Common visual approaches complex search results has similarly taken a wide variety of forms, for such cases can be argued to lead, at times, to cluttering elements e.g. Ahn and Brusilovsky [9] propose an adaptive visualization and visual overload. based search system that allows its users to interact with search CHIIR 2017 Workshop on Supporting Complex Search Tasks, Oslo, Norway. results in order to reach their final information goal. Chau [2] Copyright for the individual papers remains with the authors. Copying permitted instead explores the effect of using glyphs when presenting search for private and academic purposes. This volume is published and copyrighted by its editors. Published on CEUR-WS, Volume 1798, http://ceur-ws.org/Vol-1798/. results, the findings indicate that glyphs alleviate understanding in complex tasks, but do not help when the task is simple. 3 THE BILLIARD PROTOTYPE elaborated an online questionnaire dividing it in: perceived useful- The billiard metaphor is used as a way to depict the relations among ness, views and interface, perceived easy to use and learning, and elements by means of distance. As described before, the user is to opinions/additional comments. Answers were given on a Likert start with a simple visual representation containing only elements scale from 1 to 5 (Table 1), where 1 represented Not easy / Not clear (nodes) with which s/he can interact. Relations (edges) –or in this / Not really, whereas 5 Very easy / Very clear / Yes it is. Opinions case, correlations– are to be later constructed based on what the and comments were given as free text. user chooses to explore. A prototype was implemented using Java 8 and JavaFX. For the 4.2 Results following example as well as for the evaluation we used a weather We describe the results in two categories regarding the perceived data set from the National Oceanic and Atmospheric Administration usefulness of the prototype: positive (useful) or negative (not useful), (NOAA) [7]. For evaluation purposes, the data was pre-loaded into where the former represents answers over 3 in the 1 to 5 Likert the tool. The exploratory process in this data set is similar to that of scale, whereas the latter represents answers which are equal or exploring search results. However, due to the complexity of search, below 3. this data set was used in order to mitigate effects based on query The results from the perceived usefulness show that over 60% selection and the suitability of results. of the respondents find the prototype to be useful for the task of The initial setting when running the prototype can be seen in finding the highest (positive and negative) correlated elements to Figure 1 (a), where elements (gray circles) are arranged around a the attribute of interest. Some related comments were: “drop zone” (blue circle). Here the user is to drag and drop into the • “The position of the nodes/the length of the lines instantly drop zone any element whose correlations/relations are of interest. tells me which nodes are correlated and to what degree.” On release, all other elements will be pushed away based on their • “At first, I thought that the shorter the distance between correlated value to the dropped one (Figure 1: (b) and (c)). In our the nodes, the stronger the correlation” example, temperature is the element of interest while the others Regarding users’ perception on views and interface, over 60% of are subjects of its “influence”. Dew, latitude and longitude, in this the respondents replied that the metaphor would have advantage case, are the most highly correlated elements. Latitude, however, is over directed graphs. However, there is a spread opinion on how negatively correlated and this is represented by the red line. well elements are presented i.e. there are positive and negative The user can further explore other correlation/relation values responses alike with a slight tendency towards the positive side: among the remaining elements after dragging and dropping a first • The prototype “naturally guides a path among attributes.” element of interest. By hovering over a second element (Figure • “It becomes messy when I explore too many nodes.” 1 (d)) the user will see the possibility of expanding its associated correlations with the remaining elements. At this point, there is no Similarly, the perceived ease of use and learning aspects received need for dragging and dropping. The user can now expand other varied opinions with also a tendency to the positive side: relations by clicking on any other element of interest (Figure 1, (e) • “It was very intuitive and graphically pleasing.” and (f)). The last two steps, hovering and clicking, can be repeated • “at first, did not understand the meaning of colors and until there are no more elements to strike/expand. thickness of edges.” The prototype allows zooming and panning at any time. Further- Most negative feedback relates to cluttering issues when too more, it is possible to highlight other already expanded paths by many nodes have been expanded. Many critics came along with selecting an element of interest. In a highlighted family of elements, plausible solutions: ancestors are always shown in blue whereas children in green. All • “an option to collapse a explored node could increase the other elements are demoted with gray color and lower opacity. flexibility of the exploration”. Finally, to contribute to the billiard metaphor experience, all • “maybe provide legends?” expanding correlations are animated i.e. the user will see elements The results provide insight on the usefulness of the metaphor as moving away after dropping or clicking. well as the needed improvements for a viable implementation. 4 EVALUATION 5 DISCUSSION The goal of our qualitative study was to evaluate the usability of From the participants’ responses, we find that many agree that the prototype tool and to learn how the metaphor was perceived the information was clearly shown and the prototype was an in- for the task of exploring correlations. tuitive way to perceive correlation. However, more than half of the participants stated that it was not easy to browse through the 4.1 Procedure elements. A formative evaluation of the prototype was carried out with 9 As mentioned by one of the participants, the prototype supports participants. Contextual information, questions, and answers were iterative searches on relationships but there seems to be a limitation given and taken using Google forms. The aim of the evaluation when the number of relations of each element increases. It seems was to collect the impressions of the participants about the func- clear that, by keeping the history of played steps, we deviated from tionality and usability of the prototype, and the intuitiveness and our goal of avoiding visual overload. It is only at the beginning, understandability of the billiard metaphor for exploring correla- when not many correlations have been explored, that the prototype tions. Inspired by the ten heuristics presented by Nielsen [6], we tool is found to be truly clear and easy to understand. These negative Figure 1: Billiard prototype sequence: (a) shows the initial setup where all data attributes are placed around a “drop zone”. The dashed red arrow is a reference to the action taken by the user (drag and drop temp into the drop zone). (b) shows the effect temp will have on the other elements. (c) depicts temp correlations with other elements. (d) hovering over dew will show the possibility of expanding its correlations with the remaining elements. (e) illustrates the effect that clicking on dew has on other elements. (f) depicts dew’s correlations by means of distance. Table 1: Survey results. Numbers in colored boxes represent percentage of users who selected a given option for a given ques- tion. In total, 57% of the answers were positive whereas 43% negative. impressions can also be, in our opinion, associated to the given task. • Carry out an extended evaluation which includes perfor- It is possible that exploring correlations does not intuitively lead to mance metrics as well as a larger number of participants. the creation of paths. To create a better prototype, we need to better manage the vi- sual overloading issue by hiding unnecessary information which the user is not interested anymore. This can be solved by having a expand/collapse button for each element. From the result, our ACKNOWLEDGMENTS prototype helps in showing a path of correlated attributes, but The authors would like to thank all the participants that took part not in displaying an overview. It made clear the importance of an in the study. overview thumbnail at the corner of the prototype [8]. Many participants expect that the metaphor will show better performance than directed graphs. This is still merely a subjective opinion and would have to be further investigated. REFERENCES [1] L. Azzopardi. 2000. Wave Motion: A New Metaphor for 2D Information Visualiza- 6 CONCLUSIONS AND FUTURE WORK tion The Exploration of a Metaphor. University of Newcastle. [2] Michael Chau. 2011. Visualizing Web Search Results Using Glyphs: Design and We have described a visual metaphor to depict and explore relations Evaluation of a Flower Metaphor. ACM Trans. Manage. Inf. Syst. 2, 1, Article 2 among different elements in high-dimensional data. A prototype (March 2011), 27 pages. DOI:http://dx.doi.org/10.1145/1929916.1929918 was developed and an evaluation was conducted to have a first im- [3] Cheng-Kai Chen, Chaoli Wang, Kwan-Liu Ma, and Andrew T Wittenberg. 2011. Static correlation visualization for large time-varying volume data. In Pacific pression on its usability as well as the intuitiveness of the metaphor. Visualization Symposium (PacificVis), 2011 IEEE. IEEE, 27–34. So far, the results from the evaluation show that both the metaphor [4] M. Ishihara, K. Misue, and J. Tanaka. 2006. Ripple Presentation for Tree Struc- and the prototype can bring potential benefits to the visualization tures with Historical Information. In Asia Pacific Symposium on Information Visualization. 77–84. and exploration of high-dimensional data. To exploit and under- [5] N.R. Kadaba, P.P. Irani, and J. Leboe. 2009. Analyzing animated representations stand such potential, the following actions should take place: of complex causal semantics. In Proceedings of the 6th Symposium on Applied Perception in Graphics and Visualization. 77–84. • Enable expand and collapse functions for each element so [6] J. Nielsen. 1994. Usability Engineering. Number ISBN 0-12-518406-9. Academic that the user can hide unnecessary information. Press, San Diego. [7] U.S. Department of Commerce. 2016. National Oceanic and Atmospheric Ad- • Perform a study comparing our solution to correlation ministration. (2016). http://www.noaa.gov/. matrices as well as directed graphs. [8] Ben Shneiderman. 1996. The Eye Have It: A Task by Data Type Taxonomy for • Evaluate the billiard metaphor using other types graph Information Visualizations. In IEEE Visual Languages. [9] Jae wook Ahn and Peter Brusilovsky. 2013. Adaptive visualization for exploratory related data such as links between web pages, news topic information retrieval. Information Processing & Management 49, 5 (2013), 1139 – similarities or post sharing in social networks. 1164. DOI:http://dx.doi.org/10.1016/j.ipm.2013.01.007