Eye tracking studies lead to spatio-temporal data in the form of gaze trajectories that show the behavior of gaze positions over time. Such data can be modeled as a dynamic graph that expresses the transitions of gaze positions between Areas of Interest (AOIs) by time-varying weighted relations. Moreover, a hierarchical organization of the AOIs may be of interest, resulting in a dynamic compound AOI digraph. Traditionally, this kind of time-based relational data is represented by animated node-link diagrams that are laid out with respect to a list of aesthetic graph drawing criteria. In our work, we propose a visual metaphor for displaying relational data that uses space-filling circle sectors to encode dynamic relations between hierarchy elements. The idea benefits from the fact that dynamic compound digraphs can be visualized with reduced visual clutter compared to node-link diagrams for dense graphs. Finally, we illustrate how interaction methods can be used to explore a dataset for trends, countertrends, and/or anomalies.
Information hierarchies are present in many application domains such as in the hierarchical organization of software and river systems. Also, Areas of Interest (AOIs) are useful when exploring spatio-temporal eye tracking gaze trajectories, which can be hierarchically organized. Moreover, the eye movement behavior of study participants has a spatio-temporal nature. By using the AOI information and the gaze trajectories this data can be modeled as a dynamic weighted compound AOI digraph. Consequently, this kind of relational data can be visually explored with the general concept proposed in this paper.
The efficient representation of hierarchical data has been in focus of
information visualization research ever since. Hierarchies are, for example, displayed by
traditional node-link diagrams [
General graphs—if they do not belong to the class of planar graphs—suffer
from visual clutter [
In this paper, we propose an interactive visualization tool for representing and
manipulating this kind of dynamic graph data. Our approach uses a radial visual
metaphor and is based on the visualization principles proposed by Burch and
Diehl in their TimeRadarTrees technique [
The work of Blaschek and Ertl [
We illustrate the visualization tool in a stepwise manner and follow the visual
information-seeking mantra [
The main focus of our visualization tool is the visualization of dynamic relational data in information hierarchies as static pictures that can be manipulated and analyzed interactively. This representation stands in contrast to animation-based techniques for displaying dynamic data. The other visualization views presented here support users when they want to obtain an overview of the dataset or zoom in and apply filtering functions to the dataset. 2.1
We model an information hierarchy as a cycle-free and connected graph H = (V, E), where V is the set of nodes and E V × V expresses the set of directed edges—the link information in the hierarchy. L V is the set of leaf nodes in the containment hierarchy. All other nodes V \ L are containers that hierarchically bundle this information. The leaf nodes can be related to some extent and actually form a directed graph with edge weights G = (L, EG), where EG ⊆ L × L and wG(u, v) ∈ R0+ denotes the weight function for u, v ∈ L.
A sequence of graphs can be modeled by Gi = (Li, EGi ) where EGi ⊆ Li ×Li. wGi (u, v) ∈ R0+ is the weight function for u, v ∈ Gi. If the context is clear, we omit the graph G and use wi(u, v) instead of wGi (u, v).
A set of gaze trajectories as generated during eye tracking experiments can
be transformed into dynamic weighted directed graphs by subdividing the time
into subintervals each corresponding to one graph in the sequence. The AOI
information can be modeled as graph vertices and the number of eye movements
between pairs of AOIs as directed weighted edges. If a hierarchical organization
among the AOIs exists or one can be computed by a hierarchical clustering
algorithm, then this spatio-temporal eye tracking data can be transformed into
a dynamic weighted compound AOI digraph.
For displaying the dynamics of relations in information hierarchies, we use a
TimeRadarTrees [
The upper left green-colored sector in the thumbnail of node h21 represents a self-edge—an edge that starts and ends at the same node. The permanently green-colored sectors in the thumbnail of node h22 show that this relation to node h11 always exists in the whole sequence and moreover, has a constant weight. The thumbnail of node h23 on the right hand side has an alternating relation to node h11. This phenomenon can be examined by the alternating color coding between blue and yellow. A trend and a countertrend are visible in the thumbnail of node h11, where the strength of the relation to node h23 decreases at a constant level. The same is true for the relation to node h12, but here we can detect an increase of the weight. An outlier may be the green sector in the thumbnail of node h12 that points to node h21 and hence into a different hierarchy level. It goes without saying that this kind of graph representation also allows multi-edges—two or more edges between the same two nodes in a graph. There are actually three edges in the first graph starting at node h12 and targeting to node h23. 3
as a three-dimensional bar chart as some kind of zooming function. The filter functions are located in the bottom view on the left hand side. The three views at the right hand side are used for applying a special color coding, selecting an aggregation type or logarithmic scale, and a details-on-demand view. The main view in the center represents the TimeRadarTrees visualization for the selected nodes and time periods. In the following, we explain the single visualization components and interaction techniques to manipulate the data. As we follow the information seeking-mantra, we first give an overview of the whole relational dataset. To this end, we aggregate the graph sequence to one aggregated graph that we represent as a pixel map—a color-coded adjacency matrix. The color coding depends on the aggregation type that can be: – Weighted sum: All weights in the graph sequence are summed up: wagg(u, v) := wi(u, v) ∀u, v ∈ Ei – Average weight: The weights are summed up and divided by the number of occurrences of this edge in the sequence: wagg(u, v) :=
1≤i≤n wi(u, v) | {(u, v) | (u, v) ∈ Ei} |
∀u, v ∈ Ei If the number of edges is zero, the weight is defined by
wagg(u, v) := 0. – Number of edges: The number of edges depends on the weight filter that is again defined by the minimum weight vmin and the maximum weight vmax. Hence, we define in this case
wagg(u, v) :=| {(u, v) | vmin ≤ wi(u, v) ≤ vmax} |
The users can interactively change the type of aggregation until they obtain interesting insights in the dataset. At this early stage, they can detect patterns and anomalies by exploring the hierarchically ordered pixel map. If they find interesting behaviors in the dataset, they may wish to filter the data for smaller subsets and obtain a three-dimensional bar chart of the brushed elements. Further examination of the selected part leads to more specific insights in the dataset that was not possible in the overview visualization. 3.2
A crosshair function supports selecting a bar in the three-dimensional view. Selecting this bar can be difficult due to occlusion problems. The selected aggregated relation is given as a details-on-demand information with its metric values nearby. The tool is able to handle three different types of filtering functions that can be applied separately. – Weight filter: First of all, one can apply a weight filter on the single values of each relation. Only those values are counted as relations that lie between the given thresholds. The aggregated values can be filtered for minimum and maximum sum, minimum and maximum average value, and minimum and maximum edge number. – Hierarchy filter: The weight filter can be applied to the relations, another type of filter can be used to select a group of nodes from the hierarchy. Only those nodes are represented that belong to the selected group. This filtering technique is very important for the TimeRadarTrees visualization because it has a low scalability in this dimension. – Time filter: Time is the third dimension where we can apply a filtering function. The thresholds can be given as an interval where all graphs are displayed that lie within this interval or single graphs can be selected and deselected again. 3.4
The main part of the visualization tool is the TimeRadarTrees representation in the center. It is used to display the dynamic graph data in information hierarchies in a static picture. Figure 1 illustrates the important visual signatures that are visible in the TimeRadarTrees representation for the example of a small dynamic graph. User interaction can be applied to modify the TimeRadarTrees view and to gain insights from the data on a dynamic level.
Interaction methods supported by the tool include filtering, adapting the color coding, aggregation of relations, collapsing and expanding subhierarchies, time warp, sector highlighting, textual search, changing of the hierarchy visual metaphor, cushion effect on the circle sectors, stacking of radial bar charts, etc. 4
In this paper, we proposed a visualization tool for exploring dynamic compound digraphs in information hierarchies. Such datasets can be generated by taking spatio-temporal eye movement data and corresponding areas of interests into account. By doing this, a dynamic weighted digraph is produced that can then be visually explored by our dynamic graph visualization tool. In general, the difficulty is to first present the data in a pixel-based overview and allow the user to zoom and filter the dataset in several dimensions, i.e., weight, hierarchy, and time.
The TimeRadarTrees visualization technique is used to give insights in the dynamic data. The strength of this technique is the static representation of dynamic data that shows several dimensions in a single view—relation weights, hierarchical organization, and time periods. Interaction techniques support the user in obtaining insights in the dataset.
We plan to implement more interaction techniques such as a radial and a sector distortion. To this end, the TimeRadarTrees visualization will be mapped to a circular shape. A sector distortion would allow unequal sized sectors, but the whole structure would still be mapped on a circle. As an enhancement, we could allow a distortion of the circular shape by dragging and dropping the circumference, thus obtaining an irregular shape that may improve the visual exploration when also applied to the thumbnail view in the same way.
The weakness of our approach—in contrast to node-link diagrams—is the lack of support for solving path-related tasks. To address this problem, we plan to implement an interaction method that highlights paths in the graph data displayed as TimeRadarTrees.