Animated Edge Textures in Node-Link Diagrams: a Design Space and Initial Evaluation

Hugo Romat (1, 2, 3, 4) , Caroline Appert (1, 2, 3) , Benjamin Bach (5) , Nathalie Henry-Riche (6) , Emmanuel Pietriga (1, 2, 3)

1 ILDA - Interacting with Large Data
2 HCC - LRI - Human-Centered Computing (LRI)
3 Université Paris-Saclay
4 TecKnowMetrix
5 Edin. - University of Edinburgh
6 Microsoft Research [Redmond]

Network edge data attributes are usually encoded using color, opacity, stroke thickness and stroke pattern, or some combination thereof. In addition to these static variables, it is also possible to animate dynamic particles flowing along the edges. This opens a larger design space of animated edge textures, featuring additional visual encodings that have potential not only in terms of visual mapping capacity but also playfulness and aesthetics. Such animated edge textures have been used in several commercial and design-oriented visualizations, but to our knowledge almost always in a relatively ad hoc manner. We introduce a design space and Web-based framework for generating animated edge textures, and report on an initial evaluation of particle properties – particle speed, pattern and frequency – in terms of visual perception.

Mots clés: Trees; Networks; Animation; ACM Classification Keywords H52 Information Interfaces and Presentation (eg HCI): Graphical user interfaces (GUI) Author Keywords Node-link diagrams; Particles

Domaines: Web; Interface homme-machine [cs.HC]

Hugo Romat, Caroline Appert, Benjamin Bach, Nathalie Henry-Riche, Emmanuel Pietriga. Animated Edge Textures in Node-Link Diagrams: a Design Space and Initial Evaluation. Proceedings of the 2018 CHI Conference on Human Factors in Computing Systems, Apr 2018, Montréal, Canada. pp.187:1--187:13, ⟨10.1145/3173574.3173761⟩. ⟨hal-01726358⟩