Fillets: cues for connections in Focus+Context views of graph-like diagrams

We apply fillets - smoothing of sharp angles at the joints - between the connections and nodes of graph-like diagrams. In situations where the graph layout is constrained, e.g. Focus+Context views or views where the coordinates of the nodes are informative, fillets can clarify the relationships considerably without altering the layout. A visual search experiment supports our hypothesis that with fillets it is considerably easier to perceive node-connection structures. We discuss algorithms with different tradeoffs for flexibility and performance for rendering these connections in a single pass using OpenGL.


Introduction
Graph-like diagrams are usually drawn using nodes (generally boxes or circles) and lines between them for connections [?].If the graph is simple (e.g. a tree), or the layout is good, the way of drawing the nodes and edges does not matter much.
However, sometimes connections must cross other connections or nodes frequently.This happens, for example, in Focus+Context[?] views of multiply connected (nonplanar) graphs, or when the connections have to leave the nodes in specified directions, or when there are other constraints to the layout.The Vanishing View of Gzz[?] to the ZigZag structure[?] is one example: here, the layout of the nodes (cells) and the directions the connectors leave the cells are determined by the underlying structure: a horizontal connector is different from a vertical one.
In such situations, the pure node-line diagrams are inherently ambiguous, as shown in Fig. 1 a).In order to be able to understand such diagrams if the layout cannot be changed (or if that would lead to other complications), a rendering method which allows the viewer to distinguish between the different possibilities is needed.
One possibility is a technique used in conventional ink drawing techniques where the lines that go behind an object do not actually touch the object, as in Fig. 2.Even though this approach helps, it only allows a human to distinguish between the situations in Fig. 1b) and Fig. 1c) by actually directing his/her focus of attention to the crossing.An explanation can be found in Fig. 5.5 on p.166 of [?]: pre-attentive processing cannot distinguish between juncture/non-juncture.The other examples of preattentive/non-pre-attentive features in the same book clearly demonstrate that having a pre-attentive cue for the connection/nonconnection could significantly help the viewer to perceive the structure.
In this article, we explore fillets, a novel approach to resolving the ambiguity.The following sections describe fillets and discuss an experiment demonstrating the advantage of fillets in simple graphs.The implementation of fillets us- ing OpenGL is discussed in the Appendix.

Fillets
Filleting, or rounding corners of surfaces, is used in mechanical engineering to improve the properties of cast objects.Sharp corners are fragile and can also cause defects during molding.Filleting is an instance of a more general technique known as blending -creating surfaces that meet several existing surfaces smoothly[?].
Figure 3 shows how fillets can be used to avoid the ambiguity in Fig. 1.The connection which goes under the middle node seems to do so almost three-dimensionally.
There are two interacting graphical elements in fillets.First, the connection is blended smoothly onto the node, without a derivative discontinuity.Second, there is no black edge on the connection between the two nodes (unless there is something on top of the connection).Together, these two features make it easy to distinguish between the cases where a connection enters a node or goes under it.
A filleted connection conforms to the Gestalt principle of good continuation.Smoothly changing contours enable more efficient perceptual grouping of visual elements [?], in this case, grouping of the node and the connection.
This use of fillets is entertainingly analogous to the use in mechanical engineering: fillets ensure that the human perception system doesn't break an object and a connection starting from it into two distinct objects.
One might object that fillets might take more space than standard box-line diagrams.However, the actual space increase is marginal and is compensated by the clarity of the view: nodes can overlap more freely without making it difficult to understand the diagram.
Also, it might be said that the blending makes the background more solid and so the cells and connections might be perceived as the outside of the figure (figure-ground ambiguity).However, cues such as color, text on the nodes, animation, shading, and fog can be used to prevent this.

Experiment
A filleted connection consists of two visual features, widening and borderlessness of the connection.This experiment was designed to explore the effect of widening,

A. Method
Participants.Ten participants, seven females and three males, perfomed the experiment for a small monetary reward.Their ages ranged from 19 to 40 years.All of them participated in all conditions.
Design and materials.In the experiment, there were seven conditions with different combinations of the three main features.One variation (no widening, no borderlessness, and no gap) was not implemented since there would be no way to distinguish between a connection entering a node or going behind a node.Instead of this, one condition with narrow line-type connection was implemented.The eight conditions are listed in Table 1 and Fig. 4. Gap width was 1.2 times the width of node border.
On the test figures, nodes were in a regular grid in which all nodes except nodes on the edges and the target node were connected to four neighbouring nodes.At the target node, a connection went behind the node either in vertical or horizontal direction (Fig. 5).Grids of sizes 4x4, 6x6, or 8x8 were tested to find out whether the search time was independent of the set-size, which would indicate that the target node was perceived preattentively.Node size was equal across all conditions and grid sizes.
Procedure.The participants were tested individually.They performed all conditions in a random order.One condition consisted of 24 trials, among which the three different  grid sizes were presented randomly, eight trials of each size.
A trial started with a fixation point appearing on the computer display for 1.5 sec.Then a node grid was shown and it remained on until the participant responded.The location of the target in the grid was randomized (target was never a corner node).The task of the participants was to find the target node and to choose whether the target was on the left or on the right side of the grid.The participant would indicate this by pressing either the left or right control key in the keyboard.The participants were requested to do this task as fast as possible.The feedback was a plus or minus sign on the display, which was shown for 1 sec, thus the pause between two successive trials was 2.5 seconds.Each condition began with a practice block of three trials, one of each size.
The participant was allowed to perform the practice block twice if desired.Search time and correctness were collected for each test trial.

B. Results
The search times and errors (Tab.2) were analysed with the repeated measures analysis of variance.
Search times.The mean correct search times in the  The effects of the four visual features -widening, borderlessness, gap, and connection width -were analysed by comparing the conditions in a pairwise fashion.The results of the analyses are collected in Table 3. Widening facilitated search only when combined with borderlessness.Borderlessness was helpful in any condition, except when connection gap was not implemented (again condition 7; see discussion below).Gaps did not affect search time when used with widening, either with or without borderlessness.Width of the connection did not make a difference on search There is no interaction effect between condition and grid size [F (4.5, 40.4) = 1.8, p > .05].Condition 7 was most error-prone (3.3%).
To summarize, the results of the experiment support our hypothesis that in a node-link graph with filleted connections, it is easier to distinguish between connections going either behind a node or into a node.Search in fillet graphs was quite unsensitive to the addition of non-target nodes, even close to parallel (preattentively processed) when compared to searches in the other graphs in the experiment.
We expected a gap between a connection and a node to facilitate search when fillets were not implemented but it did not.Probably the gap width used in the experiment was too small to be effortlessly found.The width of the connection had no effect on search efficiency, as expected.
In condition 7, search times and error rates were especially long when compared to the other conditions.One possible explanation is that a Hermann Grid illusion[?] is created in the junction of a connection and a node.This means that if not directly in the focus of the eye, the junction area appears darker than the node or the connection, which makes it hard to distinguish between a target and non-target junctions.

Conclusion
There has been much research on graph visualization recently.However, the research seems to have been mostly concentrated on graph and tree layout and Focus + Context methods.
The one significant exception we have found in the literature is the work of Irani, Tingley and Ware on geon diagrams[?],[?].Geon diagrams use basic 3D geometric shapes as building blocks[?] for diagrams, aiming at making the parts of the diagram more easily recognizable.
However, the geon diagrams do not necessarily help much in the ambiguity of Fig. 1; their point is in making the types of connections recognizable, not in helping to understand the connectivity itself.
In this article, we have introduced fillets as a way of improving perception of node-line structures.With filleted connections, it is easier to discriminate whether a connection enters a node or goes behind it.Fillets are useful in constrained layouts where the number of crossing edges cannot be minimized for some reason.
Experimentally it was seen that neither of the two graphical subfeatures of fillets, widening and borderlessness, helps much by itself.We suggest that this is because fillets allow the search to be based on the shape of the node, which can be very efficient[?].Fillets are not visual primitive features, but for example Wolfe[?] has shown that visual search can be highly efficient even with complex-shaped stimuli.In our experiment, visual search with fillets was very close to parallel (preattentively processed).In other words, fillets are effortless to perceive in node graphs, independent of the number of nodes.

Figure 1 .
Figure 1.An extreme example of the visual ambiguity inherent in complex boxes-and-lines diagrams when the layout is restricted: a) the ambiguous diagram, b), c) possible meanings.If the diagram was designed by a human, one can be certain that b) is the correct interpretation.

Figure 2 .
Figure 2.An approach in traditional drawing for showing one element going behind another by erasing the line.

Figure 4 .
Figure 4. Simple examples of the eight conditions showing a situation in which a connection goes behind a node.

Figure 6 .
Figure 6.Mean search times in conditions as a function of grid size.The two flat lines are conditions 1 and 6 (both filleted), the steepest slope is in condition 7. The right side is a scaled version of the left side (condition 7 is not visible).

Table 1 . Visual features in the eight conditions. Conditions with filleted connections are indicated in bold text
e., with borders), or both.Gaps should facilitate search when filleted connections are not implemented.In addition, the effect of the visual width of connections as itself (without fillets) was tested.We expected that the width of the connection would not make a difference on search time.

Table 3 . ANOVA table of pairwise comparisons of the conditions. The fixed features column shows which other features were implemented in the compared conditions (W -widening, B -bor- derlessness, G -gap).
, p < .001],andtherewas interaction between condition and grid size [F (1.5, 13.4) = 11.8, p < .01].Search times as a function of grid size are shown in Fig.6.Search times were linearly dependent on grid size also in conditions 1 and 6 [F (2, 18) > 11.2, p < .001for both conditions].Thus it seems that although graphs with fillets are undoubtedly most efficient to search, a connection going behind a node is not found during preattentive visual processing but requires attentive search.