Fork me on GitHub

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


H. Romat, C. Appert, B. Bach, N. Henry-Riche, E. Pietriga, Animated Edge Textures in Node-Link Diagrams: a Design Space and Initial Evaluation, CHI '18: Proceedings of the 36th SIGCHI conference on Human Factors in computing systems, 13 pages, April 2018, Montreal, Canada

Animated edge textures can encode data in node-link diagrams by making sequences of small glyphs (i.e., particles) dynamically move along edges. Our framework, Flownet, supports the creation of such animated edge textures by considering an edge as a tunnel, and a node as an emitter that can fire a specific pattern of particles at a given frequency through this tunnel. Once fired, particles have their own speed, which can change.

The combination of motion variables (pattern, frequency and speed) with more usual visual variables (such as color, shape, opacity), which can be applied to either particles or to the tunnel itself, opens a large design space to encode various edge attributes.

Flownet also enables the definition of gates, which are invisible constructs placed along a link, that alter the properties of particles that pass through them.



Link to the video


SVG github WebGL github


Speed

The same pattern of particles fired at the same frequency, but with two different speeds.

Frequency


The same pattern of particles fired at the same speed, but with two different frequencies.

Pattern

Two different patterns of particles fired at the same speed and frequency.





Size

Particles with different sizes.

Color

Particles with different colors.

Shape

Particles with different shapes.




Coloring Gate

A gate that abruptly turns white particles into black particles.

Shrinking Gate

A gate that smoothly decreases particle size.

Accelerating Gate

A gate that smoothly increases particle speed.

Numerical attribute

The average number of passengers on each flight route is mapped to particle frequency.

Online Demo  |  Video

Categorical attribute

The temporal pattern of particles encodes whether the route is mostly for passenger transportation, mail or freight.

Online Demo  |  Video

Multiple attributes

Particles flow on three parallel tracks for each flight route. Each track represents one category: passenger transportation, mail and freight. The average volume carried along a route is encoded using particle speed.

Online Demo  |  Video

Temporal attribute

Gates are placed at 20% and 80% of the link's length. The speed of particles is altered when passing through those gates to visually encode departure and arrival delay, if any.

Online Demo  |  Video

Reduce graph clutter

The speed of particles is altered when passing through gates to visually encode departure and arrival delay, if any. In this case, these gates are also used to fade particles away in the central portion of the links. Decreasing the particles' opacity in this manner helps reduce visual clutter.

Online Demo  |  Video

Propagation

A simple propagation example.

Online Demo  |  Video

Social Network

Messaging between actors across various social networks. Particles flow from one actor to another. Their size and frequency respectively encode the average size and frequency of messages between those actors.

Online Demo  |  Video

Arms Trade

Imports and exports of arms between countries (dataset). Particles flow from one country to another. Their color and frequency respectively encode the type (ammunitions, civil weapons or military weapons) and the volume of arms that go from one country to another.

Online Demo  |  Video

Air traffic

Statistics about flights in the United States (dataset). Particles flow from one city to another. Their size and frequency respectively encode the average number of passengers and the average number of planes between these cities. Additionally, when there is an average departure delay on a flight route, particles are slowed down at the beginning of this route. This effect is achieved by emitting low-speed particles that are later accelerated with a transformation gate.

Online Demo  |  Video