Exploring and revealing relations between the elements is a frequent task in exploratory analysis and search. Examples include that of correlations of attributes in complex data sets, or faceted search. Common visual representations for such relations are directed graphs or correlation matrices. These types of visual encodings are often - if not always - fully constructed before being shown to the user. This can be thought of as a top-down approach, where users are presented with a full picture for them to interpret and understand. Such a way of presenting data could lead to a visual overload, specially when it results in complex graphs with high degrees of nodes and edges. We propose a bottom-up alternative called Billiard where few elements are presented at rst and from which a user can interactively construct the rest based on what s/he nds of interest. The concept is based on a billiard metaphor where a cue ball (node) has an e ect on other elements (associated nodes) when stroke against them.
Relations between elements of data, such as correlations, links between pages or news topic similarities, are often depicted by means of directed graphs or correlation matrices. In both cases, visual elements are fully constructed before shown to the user. We call this a top-down visual approach, in which a user is given an overall picture to browse, decompose and understand. This is regardless of the complexity –in terms of the amount of elements and relations– a visual representation might have. Such is specially the case of data that produces complex graphs with high degrees of nodes and edges (e.g. complete graphs). Common visual approaches for such cases can be argued to lead, at times, to cluttering elements and visual overload.
CHIIR 2017 Workshop on Supporting Complex Search Tasks, Oslo, Norway. Copyright for the individual papers remains with the authors. Copying permitted 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/.
In this paper we propose what we call a bottom-up alternative based on a billiard metaphor, where a small part of the visual representation is given and from which the user can interactively construct what s/he nds of interest. In this way we aim at relieving the user from the noise complex graphs could entail.
In the billiard metaphor, a given element has a stronger relation with others it is able to push farther. Elements which are pushed the least are analogously the least related ones. Based on this metaphor, the user can choose which relations to see by directing and caroming (striking) a cue ball towards the elements of interest.
We carried out a preliminary evaluation of a prototype through which we aimed at getting an idea of its usability as well as to know how the metaphor was perceived in the context of correlations. We observe that the majority of respondents nd the prototype to be useful and the metaphor to be coherent with the task at hand i.e. exploring correlations. We also received suggestions for improvement from our participants, which will be taken into account for future work. 2
Visualization of relations among multiple elements has taken di
erent forms. Azzopardi [
In the domain of causal relations, Kadaba et al. [
The billiard metaphor is used as a way to depict the relations among elements by means of distance. As described before, the user is to start with a simple visual representation containing only elements (nodes) with which s/he can interact. Relations (edges) –or in this case, correlations– are to be later constructed based on what the user chooses to explore.
A prototype was implemented using Java 8 and JavaFX. For the
following example as well as for the evaluation we used a weather
data set from the National Oceanic and Atmospheric Administration
(NOAA) [
The initial setting when running the prototype can be seen in Figure 1 (a), where elements (gray circles) are arranged around a “drop zone” (blue circle). Here the user is to drag and drop into the drop zone any element whose correlations/relations are of interest. On release, all other elements will be pushed away based on their correlated value to the dropped one (Figure 1: (b) and (c)). In our example, temperature is the element of interest while the others are subjects of its “in uence”. Dew, latitude and longitude, in this case, are the most highly correlated elements. Latitude, however, is negatively correlated and this is represented by the red line.
The user can further explore other correlation/relation values among the remaining elements after dragging and dropping a rst element of interest. By hovering over a second element (Figure 1 (d)) the user will see the possibility of expanding its associated correlations with the remaining elements. At this point, there is no need for dragging and dropping. The user can now expand other relations by clicking on any other element of interest (Figure 1, (e) and (f)). The last two steps, hovering and clicking, can be repeated until there are no more elements to strike/expand.
The prototype allows zooming and panning at any time. Furthermore, it is possible to highlight other already expanded paths by selecting an element of interest. In a highlighted family of elements, ancestors are always shown in blue whereas children in green. All other elements are demoted with gray color and lower opacity.
Finally, to contribute to the billiard metaphor experience, all expanding correlations are animated i.e. the user will see elements moving away after dropping or clicking. 4
The goal of our qualitative study was to evaluate the usability of the prototype tool and to learn how the metaphor was perceived for the task of exploring correlations. 4.1
A formative evaluation of the prototype was carried out with 9
participants. Contextual information, questions, and answers were
given and taken using Google forms. The aim of the evaluation
was to collect the impressions of the participants about the
functionality and usability of the prototype, and the intuitiveness and
understandability of the billiard metaphor for exploring
correlations. Inspired by the ten heuristics presented by Nielsen [
We describe the results in two categories regarding the perceived usefulness of the prototype: positive (useful) or negative (not useful), where the former represents answers over 3 in the 1 to 5 Likert scale, whereas the latter represents answers which are equal or below 3.
The results from the perceived usefulness show that over 60% of the respondents nd the prototype to be useful for the task of nding the highest (positive and negative) correlated elements to the attribute of interest. Some related comments were: “The position of the nodes/the length of the lines instantly tells me which nodes are correlated and to what degree.” “At rst, I thought that the shorter the distance between the nodes, the stronger the correlation”
Regarding users’ perception on views and interface, over 60% of the respondents replied that the metaphor would have advantage over directed graphs. However, there is a spread opinion on how well elements are presented i.e. there are positive and negative responses alike with a slight tendency towards the positive side: The prototype “naturally guides a path among attributes.” “It becomes messy when I explore too many nodes.”
Similarly, the perceived ease of use and learning aspects received varied opinions with also a tendency to the positive side: “It was very intuitive and graphically pleasing.” “at rst, did not understand the meaning of colors and thickness of edges.”
Most negative feedback relates to cluttering issues when too many nodes have been expanded. Many critics came along with plausible solutions: “an option to collapse a explored node could increase the exibility of the exploration”.
“maybe provide legends?” The results provide insight on the usefulness of the metaphor as well as the needed improvements for a viable implementation. 5
From the participants’ responses, we nd that many agree that the information was clearly shown and the prototype was an intuitive way to perceive correlation. However, more than half of the participants stated that it was not easy to browse through the elements.
As mentioned by one of the participants, the prototype supports iterative searches on relationships but there seems to be a limitation when the number of relations of each element increases. It seems clear that, by keeping the history of played steps, we deviated from our goal of avoiding visual overload. It is only at the beginning, when not many correlations have been explored, that the prototype tool is found to be truly clear and easy to understand. These negative impressions can also be, in our opinion, associated to the given task. It is possible that exploring correlations does not intuitively lead to the creation of paths.
To create a better prototype, we need to better manage the
visual 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
prototype helps in showing a path of correlated attributes, but
not in displaying an overview. It made clear the importance of an
overview thumbnail at the corner of the prototype [
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.
We have described a visual metaphor to depict and explore relations among di erent elements in high-dimensional data. A prototype was developed and an evaluation was conducted to have a rst impression on its usability as well as the intuitiveness of the metaphor.
So far, the results from the evaluation show that both the metaphor and the prototype can bring potential bene ts to the visualization and exploration of high-dimensional data. To exploit and understand such potential, the following actions should take place: Enable expand and collapse functions for each element so that the user can hide unnecessary information.
Perform a study comparing our solution to correlation matrices as well as directed graphs.
Evaluate the billiard metaphor using other types graph related data such as links between web pages, news topic similarities or post sharing in social networks.
Carry out an extended evaluation which includes performance metrics as well as a larger number of participants.
The authors would like to thank all the participants that took part in the study.