# In uence of Color and Size of Particles on Their Perceived Speed in Node-Link Diagrams

Hugo Romat, Dylan Lebout, Emmanuel Pietriga, Caroline Appert

► To cite this version:

Hugo Romat, Dylan Lebout, Emmanuel Pietriga, Caroline Appert. In uence of Color and Size of Particles on Their Perceived Speed in Node-Link Diagrams. INTERACT 2019 - 17th IFIP Conference on Human-Computer Interaction, Sep 2019, Paphos, Cyprus. pp.619-637, 10.1007/978-3-030-29384-0_37 . hal-02274134

HAL Id: hal-02274134

https://inria.hal.science/hal-02274134

Submitted on 29 Aug 2019

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
enti c research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la di usion de documents
scienti ques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_1.png" /></figure>

Distributed under a Creative Commons Attribution 4.0 International License
# Influence of Color and Size of Particles on their Perceived Speed in Node-Link Diagrams

Hugo Romat<fnref n="1" />,<fnref n="2" />, Dylan Lebout<fnref n="1" />, Emmanuel Pietriga<fnref n="1" />, and Caroline Appert<fnref n="1" />

**Abstract.** Edges in networks often represent transfer relationships between vertices. When visualizing such networks as node-link diagrams, animated particles flowing along the links can effectively convey this notion of transfer. Variables that govern the motion of particles, their speed in particular, may be used to visually represent edge data attributes. Few guidelines exist to inform the design of these particle-based network visualizations, however. Empirical studies so far have only looked at the different motion variables in isolation, independently from other visual variables controlling the appearance of particles, such as their color or size. In this paper, we report on a study of the influence of several visual variables on users' perception of the *speed* of particles. Our results show that particles' *luminance*, *chromaticity* and *width* do not interfere with their perceived *speed*. But variations in their *length* make it more difficult for users to compare the relative *speed* of particles across edges.

**Keywords:** Graph Visualization · Animation · Perception.

## 1 Introduction

Networks consist of vertices connected by edges, that can encode different sorts of relationships between those vertices depending on the particular application domain considered. Often, these edges represent transfer relationships, especially when the network is directed. Such transfer relationships are closely related to the concept of *flow*: vehicles moving through a transportation network, message dissemination on social networks, disease propagation, power distribution through an electrical grid, *etc*.

When visualizing networks as node-link diagrams, this concept of flow can be illustrated by animating the links that represent transfer relationships, typically by having small glyphs – often referred to as *particles* – traverse those links. Depending on the nature of the relationships, particles will encode individual entities traversing the network (*e.g.*, a specific plane going from one airport to another); or they will form repeating patterns that encode more abstract

<footnote n="1">¹ Université Paris-Sud, CNRS, INRIA, Université Paris Saclay, France</footnote>

<footnote n="2">² TecKnowMetrix, Voiron, France</footnote>

<footnote>hugo.romat@inria.fr</footnote>

<footnote>dylan.lebout@inria.fr</footnote>

<footnote>emmanuel.pietriga@inria.fr</footnote>

<footnote>caroline.appert@lri.fr</footnote>
properties of the edges (e.g., the daily average number of passengers on that route). In the latter case, the repeating patterns of particles can be modeled as *animated edge textures* [29]. These textures enable visualization designers to map data attributes to both the variables that define the visual appearance of particles and those that define their behavior. Variables that define the visual appearance of particles include color, shape and size. Variables that define their behavior are essentially related to motion. They include particle speed, and the frequency of the particle pattern.

Enabling visualization designers to map data attributes to motion properties provides them with a larger design space. They have the opportunity to visually represent additional data attributes, in an otherwise fairly limited set of visual variables that basically consists of edge color, stroke width, dash pattern, and to some extent link curvature [20]. But designers can also consider motion variables as alternatives, as they have different qualities and might be more effective at illustrating flow-related attributes.

Many examples from the visualization literature feature animated edge textures or animated particles at large (see, e.g., [11,12,21,24]), sometimes serving specific purposes such as helping to relate groups of consecutive edges [7], guiding visual search [36], or illustrating dynamic propagation or contagion [1,25]. They can also be found in more art- or design-oriented projects (e.g., [6,13,28]) as well as in some commercial dashboard applications.

These diverse uses of animated particles hint at their potential. However, they have often been used in a relatively *ad hoc* manner, without clear guidelines about how to create effective visual mappings. Romat *et al.* [29] recently introduced a framework to explore the design space of motion-based visual mappings in node-link diagrams and to study their effectiveness in terms of perception. The initial studies reported in that article evaluated different motion variables, but studied them in isolation as a necessary first step. As discussed in Section 2, the visual perception literature suggests that the interplay between encoding channels could be complex, calling for additional studies that cross different channels. Indeed, motion variables might interfere with one another; and they might also interfere with variables that control the visual appearance of particles.

In this paper, we report on a study that investigates the interplay between particle speed, two particle-color attributes (*luminance* and *chromaticity*), and two particle-size attributes (*length* and *width*). Results show that neither the *luminance*, nor the *chromaticity*, nor the *width* of particles interferes with their perceived speed. Only variations in their *length* interfere with the perception of their relative speed across edges. We discuss these findings and illustrate applications with simple examples of mappings that make effective use of combinations of encoding channels to represent multivariate edges.

# 2 Background and Motivation

Motion started to be investigated in HCI as an "*abstractly codable dimension in its own right*" [3] as early as 1997. Focusing more specifically on its use in data vi-
sualization, motion can be useful for presentations [16] and data storytelling [30],
for filtering and brushing [4,14,36], for emphasizing spatial relationships, explain-
ing functionality, illustrating causality [27,5]. Motion is also used extensively in
flow visualizations [19,23,26] and representations of other scientific data such as
cosmological particles [18].

Focusing even more specifically on network visualization, we find multiple
examples of node-link diagrams that make use of some form of particles to vi-
sually encode data. Recent work on confluent graph drawing also hints at the
potential of particles in combination with edge bundling [2]. Some visualizations
map particles to individual entities that move through the network; others use
more abstract encodings such as the previously-mentioned animated edge tex-
tures [29,22]. Figure 1-a shows an example of the former: a visualization of bike
sharing data in New York City [28]. Figure 1-b shows an example of the latter:
a visualization of the information flow between relays in the Tor network.

The above two examples share one commonality: they encode multiple data
attributes on visual variables that define the appearance and motion of parti-
cles. In Figure 1-a, particles move along trails that represent the bike routes.
The shape of particles (brighter and taller at the front end) gives additional
information: in what direction that bike is moving;<fnref n="3" /> and how fast it is going, the
particle's length representing how much distance has been covered in a range of
two minutes. In Figure 1-b, particles show how much data flow between pairs
of nodes in the network. Particles can move at different speeds, and can have
different colors depending on the type of service (general services vs. hidden ser-
vices). But while such encodings do seem to make sense in these two particular
cases, they remain, as most others, *ad hoc* design decisions.

Indeed, our understanding of the interplay between the different visual encod-
ing variables that can be used with particles is limited. Romat *et al.* [29] studied
different motion-related encoding variables (particle speed, particle pattern, pat-
tern frequency). But as mentioned earlier, they only studied those variables in
isolation, quantifying how many different levels participants could discriminate
by comparing pairs of edges, only varying one motion variable at a time, and
studying them in a single experimental configuration: white particles, all of the
same width, traversing black links.

Yet, the perception literature suggests that there might be a complex in-
terplay between different encoding variables. This might have a direct impact
on which ones can be effectively combined, *i.e.*, without variations of one vari-
able interfering with the perception of values of another variable involved in the
mapping. For instance, vision research tells us that contrast has an effect on
perceived speed, motion direction and on the speed discrimination threshold.
More specifically, chromaticity contrast and luminance contrast [38] both have
an effect. See, *e.g.*, [8,17,33,34,37] for a complementary set of references.

Such psychophysiological-level findings can guide and inform the design of
motion-based visualizations, but they are insufficient to assess the perceptual

<footnote n="3">³ Which is redundant with the green *vs*. orange color and with the actual motion when animating the visualization, but becomes more useful when looking at a still image.</footnote>
<figure><img src="image_2.png" /><figcaption>**Fig. 1.** (a) Information flow between Tor network relays [6]; (b) bike sharing data [28].</figcaption></figure>

efficiency of visual encodings involving moving particles in node-link diagrams. Indeed, no matter how large the motion perception literature [31], the experimental setups involved in these studies mostly involve participants evaluating speed differences by looking at simple gratings or plaids. While these setups are appropriate in that context, they fail to capture the subtleties of visual perception in the context of complex visualizations that involve larger numbers of small graphical marks, that in our case might have more elaborate motion patterns. As recently stated by Szafir in her work about modeling color differences for visualization design: "[these] models [...] isolate the capabilities of the human visual system from the complexities introduced by real-world viewing" [35]. Her isolation
*assumption*<fnref n="4" /> and *geometric assumption*<fnref n="5" /> also represent limits in our case, that call for studies about the perception of particle motion in node-link diagrams. Indeed, the use of motion on links is quite specific. Particles only move along predefined visual paths. The nature of the movement and the number of different directions, considering that edges have different orientations and that they can be curved, is very particular compared to the conditions evaluated in the above psychophysiological experiments. Beyond orientation, the distance between links to be compared might also have an effect, as spatial distance has been shown, for instance, to influence color difference perception [10].

Empirical studies that focus on observing potential interferences between different visual and motion variables (chromaticity, luminance, size, speed) are necessary to get a clear understanding of their interplay, and then identify effective visual mappings that combine some of them to represent multivariate data in node-link diagrams.

# 3 Experiment design

We report on a series of experiments that assess users' ability to compare motion speed between two edges, when particles flowing along those edges also vary along a static visual variable. Each participant takes part in four experiments, presented in a random order, and performed in separate, non-consecutive sessions. Each experiment investigates the combination of speed and one of the following four visual variables (vv): *Length*, *Width*, *Luminance*, and *Chromaticity*. For example, for $vv=Width$, the experiment aims at answering the following practical question: do users perceive particles to be moving at the same speed when they are thin and when they are thicker?

## 3.1 Task

Figure 2 illustrates the experimental task. Participants are instructed to focus on two edges only (indicated by A and B). They have to adjust the speed of particles on *response* edge B so as to make it match that of particles on *reference* edge A. Moving the slider knob toward the left decreases the speed of particles flowing along edge B. Moving the knob toward the right increases it. At the beginning of a trial, the slider knob is always positioned in the middle of the slider. The slider has 120 steps, each step corresponding to an increment (resp. decrement) in speed that is proportional to the speed of reference edge A ($slider\_unit = \frac{speed(A)}{40}$). This design ensures that the target speed (i.e., that of reference edge A) is contained in the slider's range, but that it does not always correspond to the same position of the knob relative to the slider across trials.

We generate eight planar graphs, which are drawn without edge crossings. The presentation of these graphs is counterbalanced across experimental conditions. Layouts consist of 20 to 28 links, and 21 to 29 nodes, and are generated

<footnote n="4">⁴ Marks are presented in isolation or in pairs at best.</footnote>

<footnote n="5">⁵ Marks do not vary in their size and shape.</footnote>
<figure><img src="image_3.png" /><figcaption>**Fig. 2.** Experimental task. (i) The system first indicates to participants which two edges they will have to compare. (ii) When participants press the **Enter** key, the visualization gets animated. Participants have to adjust the speed of particles on edge B so that it matches that of particles on edge A, using the slider on the right.</figcaption></figure>

using D3's force-directed algorithm [9]. Each layout meets the following requirements:

- nodes are distributed in a spatially uniform way;
- there is no pair of nodes that are too close to each other.

The resulting node-link diagrams have the following characteristics:

- average distance between connected nodes: 61mm (min=18, max=165, median=59);

- average distance of the two links to be compared: 147mm (min=105, max=194, median=148)<fnref n="6" />;

- average length of these links: 66mm (min=42, max=106, median=64)<fnref n="7" />;

- average relative difference in orientation between two links (modulo 180°): 56° (min=1°, max=172°, median=36°).

All eight layouts are available on the companion website, as well as the data collected during the study.<fnref n="8" />

The study of phenomena related to motion perception requires that we are very careful about the visual design of the experimental setup. In particular, we have to ensure that differences in luminance will not impact participants' perception of particles' color (i.e., avoid phenomena such as “dark particles on a light background appear darker than they actually are”). Szafir [35] showed that the minimal difference in luminance that is required in order not to impact the perception of color depends on the size of the visual mark considered. Based on her recommendations and on the minimal size that particles can have in our series of experiments, we computed a minimal difference of luminance of 11%.<fnref n="9" /> A background color of (50,0,0)$_{CIELAB}$ and link color of (49,0,0)$_{CIELAB}$ ensure that particles always have a minimal 16% difference in luminance with both the background and the link itself, in all tested conditions.

Each of the four experiments follows a within-subject design considering four factors:

- $SPEED_A$: the speed of *reference* edge A, $SPEED_A \in \{Low, Medium, High\}$;

- $SPEED_{B/A}$: the initial speed of *response* edge B relative to that of *reference* edge A, $SPEED_{B/A} \in \{Lower, Higher\}$;

- $\Delta_{VV}$: the difference in value between the *reference* and *response* edges for the considered visual variable (*Length*, *Width*, *Luminance* or *Chromaticity*). The difference can be small, medium, large or there can be no difference ($\Delta_{VV} \in \{Same, Small, Medium, Large\}$). Figure 3 details the exact values corresponding to these different levels, per visual variable. Factor $\Delta_{VV}$ is handled differently in the case of *Chromaticity* as it is two-dimensional,

<footnote n="6">⁶ Distance between links is computed as the minimum distance among all four pairs of endpoints between the two links.</footnote>

<footnote n="7">⁷ Calculation of link length ignores the link's curvature.</footnote>

<footnote n="8">⁸ To keep the submission anonymous, the companion website is provided only as supplemental material for now.</footnote>

<footnote n="9">⁹ We use formula (8) in [35] considering that particles are small elongated marks that can have various orientations.</footnote>
compared to *Length*, *Width* and *Luminance*, which are one-dimensional. For *Chromaticity*, we consider the four colors that correspond to the extrema of the two axes defining the chromaticity space in the CIELAB model (at a constant luminance level of 75), and test the following four difference cases: no difference (*Same*), and difference with one of the three other colors.

Perception studies with animated gratings have shown that visual variables can alter perceived velocity to a different extent depending on how fast the grating moves (e.g., [17,38]). They have also shown that the relative speed of another 'modifier' grating can affect the perceived velocity of the grating of interest [32]. In our experiment, factors SPEED<sub>A</sub> and SPEED<sub>B/A</sub> are introduced to account for these potential effects in the context of animated edge textures. To limit the duration of the experiment, we chose a sample of three values ({{Low, Medium and High}}) for the speed of reference edge A out of the six that were tested in [29]. Initial speed for response edge B was set relative to that of edge A in order to make the difference between edges sufficient to be perceivable without significant effort. Table 1 details the actual speeds we test in the different SPEED<sub>A</sub> × SPEED<sub>B/A</sub> conditions. According to recommendations from [29], the emission frequency of particles is adjusted depending on their speed, in order to preserve a constant spacing between them.

<table><caption>**Table 1.** Tested speeds in the experiment, in millimeters per second. The first column corresponds to the speed of reference edge A, which remains fixed throughout a trial. The second (resp. third) column corresponds to the initial speed of response edge B in condition SPEED<sub>B/A</sub>=Lower (resp. SPEED<sub>B/A</sub>=Higher).</caption><thead><tr><th></th><th>speed of edge A<br>(SPEED<sub>A</sub>)</th><th>initial speed of edge B<br>(SPEED<sub>B/A</sub>=Lower)</th><th>initial speed of edge B<br>(SPEED<sub>B/A</sub>=Higher)</th></tr></thead><tbody><tr><td>(Low)</td><td>5.36 mm.s<sup>-1</sup></td><td>1.55 mm.s<sup>-1</sup></td><td>10.18 mm.s<sup>-1</sup></td></tr><tr><td>(Medium)</td><td>19.35 mm.s<sup>-1</sup></td><td>10.18 mm.s<sup>-1</sup></td><td>36.76 mm.s<sup>-1</sup></td></tr><tr><td>(High)</td><td>36.76 mm.s<sup>-1</sup></td><td>19.35 mm.s<sup>-1</sup></td><td>69.94 mm.s<sup>-1</sup></td></tr></tbody></table>

After a series of four practice trials (corresponding to a sample of possible conditions), each participant completes two blocks. Each block contains 48 trials, corresponding to the 24 (3 × 2 × 4) conditions, repeated twice. Conditions SPEED<sub>A</sub> × Δ<sub>VV</sub> are presented in a random order. For each SPEED<sub>A</sub> × Δ<sub>VV</sub> condition, the two conditions SPEED<sub>B/A</sub> = Lower and SPEED<sub>B/A</sub> = Higher are presented in series, but in a random order across conditions.

In each of the four experiments, motion variable speed is combined with a different visual variable VV: *Length*, *Width*, *Luminance*, *Chromaticity*. We have computed fifteen random orders of the four experiments to counterbalance their presentation across our fifteen participants.
Possible levels for vV in the *Length* experiment

<table><tr><td>reference edge A</td><td colspan="4">Length = 2.82mm; Width = 0.94mm; color<sub>CIELAB</sub> = (L=0,0,0)</td></tr><tr><td>response edge B</td><td colspan="4">Length ∈ {v<sub>1</sub>, v<sub>2</sub>, v<sub>3</sub>, v<sub>4</sub>}; Width = 0.94mm; color<sub>CIELAB</sub> = (L=0,0,0)</td></tr><tr><td></td><td>v<sub>1</sub> = 2.82mm</td><td>v<sub>2</sub> = 4.935mm</td><td>v<sub>3</sub> = 8.64mm</td><td>v<sub>4</sub> = 12.95mm</td></tr><tr><td></td><td>Δ = 0 (Same)</td><td>Δ = Small</td><td>Δ = Medium</td><td>Δ = Large</td></tr></table>

Possible levels for vV in the *Width* experiment

<table><tr><td>reference edge A</td><td colspan="4">Length = 2.82mm; Width = 0.94mm; color<sub>CIELAB</sub> = (L=0,0,0)</td></tr><tr><td>response edge B</td><td colspan="4">Length = 2.82mm; Width ∈ {v<sub>1</sub>, v<sub>2</sub>, v<sub>3</sub>, v<sub>4</sub>}; color<sub>CIELAB</sub> = (L=0,0,0)</td></tr><tr><td></td><td>v<sub>1</sub> = 0.94mm</td><td>v<sub>2</sub> = 1.55mm</td><td>v<sub>3</sub> = 2.56mm</td><td>v<sub>4</sub> = 4.22mm</td></tr><tr><td></td><td>Δ = 0 (Same)</td><td>Δ = Small</td><td>Δ = Medium</td><td>Δ = Large</td></tr></table>

Possible levels for vV in the *Luminance* experiment

<table><tr><td>reference edge A</td><td colspan="4">Length = 2.82mm; Width = 0.94mm; color<sub>CIELAB</sub> = (L=0,0,0)</td></tr><tr><td>response edge B</td><td colspan="4">Length = 2.82mm; Width = 0.94mm; color<sub>CIELAB</sub> = (L ∈ {v<sub>1</sub>, v<sub>2</sub>, v<sub>3</sub>, v<sub>4</sub>}, 0,0)</td></tr><tr><td></td><td>v<sub>1</sub> = 0%</td><td>v<sub>2</sub> = 33%</td><td>v<sub>3</sub> = 66%</td><td>v<sub>4</sub> = 100%</td></tr><tr><td></td><td>Δ = 0 (Same)</td><td>Δ = Small</td><td>Δ = Medium</td><td>Δ = Large</td></tr></table>

Possible levels for vV in the *Chromaticity* experiment

<table><caption>**Fig. 3.** Possible values for all four visual variables (vV): *Length*, *Width*, *Luminance*, *Chromaticity*.</caption><tr><td>reference edge A</td><td colspan="4">Length = 2.82mm; Width = 0.94mm; color<sub>CIELAB</sub> = (75,0,-128)</td></tr><tr><td>response edge B</td><td colspan="4">Length = 2.82mm; Width = 0.94mm; color<sub>CIELAB</sub> ∈ {v<sub>1</sub>, v<sub>2</sub>, v<sub>3</sub>, v<sub>4</sub>}</td></tr><tr><td></td><td>v<sub>1</sub> = (75,0,-128)</td><td>v<sub>2</sub> = (75,-128,0)</td><td>v<sub>3</sub> = (75,128,0)</td><td>v<sub>4</sub> = (75,0,128)</td></tr><tr><td></td><td>Δ = 0 (Same)</td><td></td><td></td><td></td></tr></table>
## 3.2 Participants & Apparatus

Fifteen volunteers (4 female), aged 21 to 42 year-old (average 26, median 24), all with normal or corrected to normal vision, no color blindness, participated in the experiments. There was no remuneration involved. We conducted the experiments on a PC Dell Precision 5520, equipped with an Intel core i7-7820HQ processor (3.9GHz), 16GB RAM, and an NVidia Quadro M1200 graphics card (4GB), driving an 27" DELL U2715H external monitor (2560 x 1440 QHD, 109 ppi). The monitor features a 16:9 ratio and a luminosity of 350cd.m⁻². Contrast ratio is 1000:1 (native), and 2000000:1 (dynamic). Participants are seated at a distance of 0.6m from the screen.

## 4 Results

The main measure of the experiment is Δspeed: the absolute difference in speed between response edge B and reference edge A at the end of the trial. The lower this difference, the better participants are at estimating speed regardless of variations along another visual variable. In other words, Δspeed is a measure of how much a visual variable (Length, Width, Luminance or Chromaticity) interferes with the speed motion variable.

As all participants took part in each of the four conditions and experienced varying presentation orders, data collected across the four experiments can be handled as a single experiment with four factors (VV, SPEEDA, SPEEDB/A, ΔVV), whose design can be summarized as follows:

$$ 
\begin{array}{l}
15 \text{ users} \\
\times 4 \text{ levels of VV} \\
\times 2 \text{ blocks} \\
\times 3 \text{ levels of SPEEDA} \\
\times 4 \text{ levels of } \Delta_{VV} \\
\times 2 \text{ levels of SPEEDB/A} \\
\hline
\text{2880 trials in total}
\end{array}
$$

A repeated measure ANOVA of the four factors on Δspeed reveals a main effect for each of them.

We start our analysis with factor SPEEDB/A as it has a main effect ($F_{1,14} = 10.9, p < 0.0001, \eta_G^2 = 0.03$), but no interaction effect with other factors ($p > 0.05$). Participants were slightly less precise when they had to decrease the speed of response edge B to reach that of edge A ($\Delta_{speed} = 4.1 \text{ mm.s}^{-1}$ when SPEEDB/A = *Higher*) than when they had to increase it ($\Delta_{speed} = 3.1 \text{ mm.s}^{-1}$ when SPEEDB/A = *Lower*). This difference might be due to the fact that our ability to perceive changes is not linear. Actually, according to the Weber-Fechner law [15], detecting a change from an initially-high level requires a higher-amplitude change than detecting a change from an initially-low level. However, the effect of SPEEDB/A is rather small and, as it has no or negligible interaction with other factors, we ignore it for the rest of our analyses.
<figure><img src="image_4.png" /><figcaption>**Fig. 4.** Average final speed of response edge B per SPEED<sub>A</sub>×VV condition. Error bars represent the 95% confidence interval.</figcaption></figure>

The remaining three factors all have a significant effect on Δ<sub>speed</sub>, and they all interact with each other. First, factor SPEED<sub>A</sub> has a large effect on Δ<sub>speed</sub> (F<sub>2,28</sub> = 51.8, p < 0.0001, η<sup>2</sup><sub>G</sub> = 0.31), which supports the Weber-Fechner law mentioned above: participants were worse at estimating difference at high speeds than they were at low speeds. We then look at factorVV, which is our primary factor of interest, in order to observe whether visual variables of different nature have different levels of interference with the speed motion variable. An ANOVA reveals a significant effect ofVV on Δ<sub>speed</sub> (F<sub>3,42</sub> = 18, p < 0.0001, η<sup>2</sup><sub>G</sub> = 0.11). As illustrated in Figure 4, participants seem to have more trouble in estimating particle speed when the particles vary in their length. Pairwise comparisons betweenVV conditions using paired t-tests show that only the Length condition is significantly different from all otherVV conditions (p < 0.0001). The other three visual variables are not significantly different from each other. Figure 4 also illustrates the interaction effect betweenVV and SPEED<sub>A</sub> on Δ<sub>speed</sub> (F<sub>6,84</sub> = 8, p < 0.0001, η<sup>2</sup><sub>G</sub> = 0.07). Differences in luminance and length of particles have a higher impact on their perceived speed when particles move at a high speed.
However, even in the SPEED<sub>A</sub>=High condition, only the effect of the Length visual variable is significant.

The last factor, Δ<sub>VV</sub>, is the magnitude of the difference between the values of the considered visual variable on the reference and response edges. Its value must be interpreted relative to that of vv. We thus break down the rest of our analyses by vv condition, in order to better understand what happens under the different visual variable conditions. Figures 5 & 6 illustrate our results for each visual variable. For Chromaticity, Luminance and Width, only the effect of SPEED<sub>A</sub>, already mentioned above, is significant on Δ<sub>speed</sub> (F<sub>2,28</sub> = 22, p < 0.0001, η<sup>2</sup><sub>G</sub> = 0.41, F<sub>2,28</sub> = 39, p < 0.0001, η<sup>2</sup><sub>G</sub> = 0.54 and F<sub>2,28</sub> = 31, p < 0.0001, η<sup>2</sup><sub>G</sub> = 0.44 respectively). Neither Δ<sub>VV</sub> nor SPEED<sub>A</sub>×Δ<sub>VV</sub> have a significant effect (p > 0.05). The situation is a bit different for Length. We observe three significant effects on Δ<sub>speed</sub>: the effect of SPEED<sub>A</sub> as for other visual variables (F<sub>2,28</sub> = 43, p < 0.0001, η<sup>2</sup><sub>G</sub> = 0.54), but also the effect of Δ<sub>VV</sub> (F<sub>3,42</sub> = 13, p < 0.0001, η<sup>2</sup><sub>G</sub> = 0.23), and of the interaction SPEED<sub>A</sub>×Δ<sub>VV</sub> (F<sub>6,84</sub> = 7, p < 0.0001, η<sup>2</sup><sub>G</sub> = 0.12). The accuracy in estimating speed gets worse on average with larger differences in length, and this phenomenon gets amplified with the speed of particles. Pairwise comparisons between Δ<sub>VV</sub>×SPEED<sub>A</sub> support this interpretation. For example, in the SPEED<sub>A</sub>=Low condition, only Same is different from Medium and Large (p < 0.05), while in SPEED<sub>A</sub>=High condition, almost all pairs of conditions significantly differ (p < 0.05). We tentatively attribute this to the size-speed illusion studied in experimental psychology (smaller objects appear to move faster than larger ones – see, e.g., [39]), although this remains speculation at this stage.

# 5 Summary of findings

In our experiment, the color of particles did not interfere with their perceived speed, suggesting that visualization designers can safely communicate two attributes on links using *Speed* and *Color* as the encoding channels. Regarding color, designers can make use of either chromaticity, which is typically useful to encode categorical attributes, or luminance, which is better suited to quantitative attributes. The perceived speed of particles was not affected by either of those variables in our empirical observations.

On the contrary, our study shows that variations in the length of particles’ do have an impact on their perceived speed, and that interferences between speed and length get more important with large differences in length and at high speeds. This means that using *Speed* and *Size* in combination should be done with caution.

In particular, our results support that a *Speed+Width* encoding should be preferred over a *Speed+Length* one.

We illustrate these findings on two examples of possible combinations that do not cause interferences. The first combines *Speed* and *Color* to visually encode two edge attributes. The second combines *Speed* and *Size*. Animated versions of these node-link diagrams are available on the companion website.
<figure><img src="image_5.png" /><figcaption>**Fig. 5.** Average final speed of response edge B for each SPEED<sub>A</sub> × Δ<sub>VV</sub> condition corresponding to color visual variables. Error bars represent the 95% confidence interval.</figcaption></figure>
<figure><img src="image_6.png" /><figcaption>**Fig. 6.** Average final speed of response edge B for each SPEED<sub>A</sub> × Δ<sub>VV</sub> condition corresponding to size visual variables. Error bars represent the 95% confidence interval.</figcaption></figure>
<figure><img src="image_7.png" /><figcaption>**Fig. 7.** A node-link diagram representing air traffic from Salt Lake City to other airports in the USA. Particle chromaticity encodes the main category of payload: passengers in red, mail in blue and freight in yellow. Particle speed encodes the average number of planes on that route.</figcaption></figure>

**Speed+Color** Figure 7 shows an example of a node-link diagram that encodes edge attributes using a combination of particle speed and color. This node-link diagram shows data about air traffic in the USA, where nodes represent airports and links aerial routes connecting airports. The graph data are multi-variate, with multiple attributes for both airports and routes that call for the use of multiple encoding channels. A particle-based node-link diagram is especially well suited to represent air traffic, as it effectively conveys the notion of transit from one airport to the other. The color of particles encodes the main type of payload on a route (mail, freight or passengers). The speed of particles encodes the average number of planes traveling on that route.

The resulting visualization makes it possible to make comparisons per type of payload and across types of payloads. For example, the visualization shows that there are more planes with passengers traveling from Salt Lake City to Chicago than to Seattle, and that the number of planes carrying people to Chicago is higher than the number of planes carrying mail to San Francisco.

**Speed+Size** Figure 8 illustrates another example of an animated node-link diagram that shows Twitter activity of some politicians about two key topics: immigration and global warming. While the air traffic example above was using flowing particles to encode two attributes of different type (a categorical one and a quantitative one), this example makes use of particles to encode two quantitative attributes. Particle speed encodes the number of tweets mentioning
<figure><img src="image_8.png" /><figcaption>**Fig. 8.** A node-link diagram representing activity of some politicians about key topics on the Twitter social network (*the data are fictional, generated randomly for illustration purposes only*). The width of particles encodes the number of tweets mentioning the destination hashtag (*e.g.*, **Global Warming**) over the last month. The speed of particles encodes the number of such tweets over the last year.</figcaption></figure>

a hashtag (shown as destination node) over the last year; particle width encodes
the number of such tweets over the last month. This design choice makes it
possible to see actors’ engagement on both a short- and a longer-term basis in the
same node-link diagram. For example, if we consider hashtag “global warming”,
the speed of particles shows that Emmanuel Macron and Angela Merkel were
more active over the entire year than Vladimir Putin and Donald Trump were,
while the thick particles for Macron reveal that he was the most active over the
last month.

6 Conclusion and Future Work

When designing node-link diagrams that feature animated particles, combining
particle speed with other visual variables should be handled with caution. In
this article, we observed that variations in chromaticity, luminance and width
did not alter the perceived speed of particles, while variations in their length did.
These empirical findings provide guidelines about which combinations between
particle speed and these four visual variables can be effective. But these findings
also suggest that the particle *pattern*, a motion variable proposed in [29], should
probably not be combined with particle speed. Indeed, particle patterns are
obtained by introducing variable-length interspaces to delimit series of particles
that form a pattern. An interspace between particles is conceptually close to a
transparent particle, which should thus not feature variations in length so as not
to interfere with perceived speed.

The effectiveness of animated edge textures in node-link diagrams might also
be challenged in the context of graphs that are larger than the ones tested in this
study. Larger graphs will introduce a potentially larger distance between pairs of
links that can make comparison based on motion difficult. Similarly, animated
edge textures might be challenged with dense and non-planar graphs. A high
density of links might introduce many motion ‘distractors’, while link crossings
might impact users’ ability to follow flows of particles. Such effects remain to
be studied in order to assess how the use of animated particle flows, as encod-
ing channels, scale with graph size and complexity. Finally, our results provide
guidelines about combining speed with static visual variables when considered
in isolation. Combinations of multiple static variables in the context of animated
edge textures should be studied next. For example, luminance and chromaticity
taken together might interfere with the perception of motion [38].

References

1. Archambault, D., Purchase, H.C.: On the effective visualisation of dynamic attribute cascades. Information Visualization **15**(1), 51–63 (2016). https://doi.org/10.1177/1473871615576758

2. Bach, B., Henry Riche, N., Hurter, C., Marriott, K., Dwyer, T.: Towards unambiguous edge bundling: Investigating confluent drawings for network visualization. IEEE Transactions on Visualization and Computer Graphics **23**(1), 541–550 (Jan 2017). https://doi.org/10.1109/TVCG.2016.2598958

3. Bartram, L.: Perceptual and interpretative properties of motion for information visualization. In: Proceedings of the Workshop on New Paradigms in Information Visualization and Manipulation. pp. 3–7. NPIV ’97, ACM (1997). https://doi.org/10.1145/275519.275520

4. Bartram, L., Ware, C.: Filtering and brushing with motion. Information Visualization **1**(1), 66–79 (2002). https://doi.org/10.1057/palgrave.ivs.9500005

5. Bartram, L., Yao, M.: Animating causal overlays. In: Computer Graphics Forum. vol. 27, pp. 751–758. Wiley Online Library (2008). https://doi.org/10.1111/j.1467-8659.2008.01204.x

6. Birk, K., Dickson, C., Schroh, D.: Data flow in the Tor network. Web site (2015), https://torflow.uncharted.software/

7. Blaas, J., Botha, C., Grundy, E., Jones, M., Laramee, R., Post, F.: Smooth graphs for visual exploration of higher-order state transitions. IEEE Transactions on Visualization and Computer Graphics **15**(6), 969–976 (Nov 2009). https://doi.org/10.1109/TVCG.2009.181

8. Blakemore, M.R., Snowden, R.J.: The effect of contrast upon perceived speed: A general phenomenon? Perception **28**(1), 33–48 (1999). https://doi.org/10.1068/p2722
9. Bostock, M., Ogievetsky, V., Heer, J.: D3 data-driven documents. IEEE Transactions on Visualization and Computer Graphics **17**(12), 2301–2309 (Dec 2011). https://doi.org/10.1109/TVCG.2011.185

10. Brychtová, A., Çöltekin, A.: The effect of spatial distance on the discriminability of colors in maps. Cartography and Geographic Information Science **44**(3), 229–245 (2017). https://doi.org/10.1080/15230406.2016.1140074

11. Buschmann, S., Trapp, M., Döllner, J.: Animated visualization of spatial-temporal trajectory data for air-traffic analysis. The Visual Computer **32**(3), 371–381 (2016). https://doi.org/10.1007/s00371-015-1185-9

12. Cornec, O., Vuillemot, R.: Visualizing the scale of world economies. In: VisWeek 2015 Electronic Conference Proceedings - Poster (2015)

13. Cruz, P.: Wrongfully right: applications of semantic figurative metaphors in information visualization. In: IEEE VIS Arts Program. pp. 14–21. VISAP (2015)

14. Etemadpour, R., Murray, P., Forbes, A.G.: Evaluating density-based motion for big data visual analytics. In: IEEE International Conference on Big Data. pp. 451–460 (Oct 2014). https://doi.org/10.1109/BigData.2014.7004262

15. Fechner, G.: Elements of psychophysics. Vol. I. American Psychological Association (1966)

16. Fisher, D.: Animation for visualization: opportunities and drawbacks. In: Beautiful Visualization, chap. 19, pp. 329–352. O’Reilly Media (2010)

17. Gegenfurtner, K.R., Hawken, M.J.: Perceived velocity of luminance, chromatic and non-fourier stimuli: Influence of contrast and temporal frequency. Vision Research **36**(9), 1281–1290 (1996). https://doi.org/10.1016/0042-6989(95)00198-0

18. Haroz, S., Ma, K.L., Heitmann, K.: Multiple uncertainties in time-variant cosmological particle data. In: IEEE Pacific Visualization Symposium. pp. 207–214 (March 2008). https://doi.org/10.1109/PACIFICVIS.2008.4475478

19. Haroz, S., Whitney, D.: Temporal thresholds for feature detection in flow visualization. In: Proceedings of the 7th Symposium on Applied Perception in Graphics and Visualization. pp. 163–163. APGV ’10, ACM (2010). https://doi.org/10.1145/1836248.1836285

20. Henry Riche, N., Dwyer, T., Lee, B., Carpendale, S.: Exploring the design space of interactive link curvature in network diagrams. In: Proceedings of the International Working Conference on Advanced Visual Interfaces. pp. 506–513. AVI ’12, ACM (2012). https://doi.org/10.1145/2254556.2254652

21. Hinrichs, U., Butscher, S., Müller, J., Reiterer, H.: Diving in at the deep end: the value of alternative in-situ approaches for systematic library search. In: Proceedings of the CHI Conference on Human Factors in Computing Systems. pp. 4634–4646. ACM (2016). https://doi.org/10.1145/2858036.2858549

22. Holten, D., Isenberg, P., Van Wijk, J.J., Fekete, J.D.: An extended evaluation of the readability of tapered, animated, and textured directed-edge representations in node-link graphs. In: 2011 IEEE Pacific Visualization Symposium. pp. 195–202. IEEE (2011)

23. Huber, D.E., Healey, C.G.: Visualizing data with motion. In: Proceedings of IEEE Visualization. pp. 527–534 (2005). https://doi.org/10.1109/VISUAL.2005.1532838

24. Itoh, M., Yokoyama, D., Toyoda, M., Tomita, Y., Kawamura, S., Kitsuregawa, M.: Visual exploration of changes in passenger flows and tweets on mega-city metro network. IEEE Transactions on Big Data **2**(1), 85–99 (March 2016). https://doi.org/10.1109/TBDATA.2016.2546301

25. von Landesberger, T., Diel, S., Bremm, S., Fellner, D.W.: Visual analysis of contagion in networks. Information Visualization **14**(2), 93–110 (2015). https://doi.org/10.1177/1473871613487087
26. McLoughlin, T., Laramee, R.S., Peikert, R., Post, F.H., Chen, M.: Over two decades of integration-based, geometric flow visualization. In: Computer Graphics Forum. vol. 29, pp. 1807–1829. Wiley Online Library (2010). https://doi.org/10.1111/j.1467-8659.2010.01650.x

27. Michotte, A.: The perception of causality. Methuen's manuals of modern psychology, Basic Books (1963)

28. Nagel, T., Pietsch, C., Dork, M.: Staged analysis: From evocative to comparative visualizations of urban mobility. In: VIS Arts Program (VISAP). pp. 1–8. IEEE (2017). https://doi.org/10.1109/VISAP.2017.8282374

29. Romat, H., Appert, C., Bach, B., Henry-Riche, N., Pietriga, E.: Animated edge textures in node-link diagrams: A design space and initial evaluation. In: Proceedings of the CHI Conference on Human Factors in Computing Systems. pp. 187:1–187:13. CHI ’18, ACM (2018). https://doi.org/10.1145/3173574.3173761

30. Segel, E., Heer, J.: Narrative visualization: Telling stories with data. IEEE transactions on visualization and computer graphics 16(6), 1139–1148 (2010). https://doi.org/10.1109/TVCG.2010.179

31. Sekuler, R., Watamaniuk, S., Blake, R.: Perception of visual motion. In: Stevens' Handbook of Experimental Psychology: Vol. 1 Sensation and perception (3rd edition), p. 121–176. Wiley & Sons (2004)

32. Smith, D.R.R., Derrington, A.M.: What is the denominator for contrast normalization? Vision Research 36(23), 3759–3766 (1996). https://doi.org/10.1016/0042-6989(96)00100-9

33. Sotiropoulos, G., Seitz, A.R., Seriès, P.: Contrast dependency and prior expectations in human speed perception. Vision Research 97, 16–23 (2014). https://doi.org/10.1016/j.visres.2014.01.012

34. Stone, L.S., Thompson, P.: Human speed perception is contrast dependent. Vision Research 32(8), 1535–1549 (1992). https://doi.org/10.1016/0042-6989(92)90209-2

35. Szafir, D.A.: Modeling color difference for visualization design. IEEE Transactions on Visualization and Computer Graphics 24(1), 392–401 (Jan 2018). https://doi.org/10.1109/TVCG.2017.2744359

36. Ware, C., Bobrow, R.: Motion to support rapid interactive queries on node-link diagrams. ACM Transactions on Applied Perception 1(1), 3–18 (Jul 2004). https://doi.org/10.1145/1008722.1008724

37. Weiskopf, D.: On the role of color in the perception of motion in animated visualizations. In: IEEE Visualization. pp. 305–312 (Oct 2004). https://doi.org/10.1109/VISUAL.2004.73

38. Willis, A., Anderson, S.J.: Colour and luminance interactions in the visual perception of motion. Proceedings of the Royal Society of London B: Biological Sciences 269(1495), 1011–1016 (2002). https://doi.org/10.1098/rspb.2002.1985

39. Yong, Z., Hsieh, P.J.: Speed-size illusion correlates with retinal-level motion statistics. Journal of vision 17(9), 1–1 (2017)