Sorry, this content is only available in English. For your convenience, it is shown below in this language.

 

3D Node-link diagrams are an important class of visualization for immersive analysis. Yet, there is little knowledge on how to design them to support efficient analysis. In two user studies we examined the design space for edge styles in Augmented Reality graph visualization.

Summary

Augmented Reality (AR) technologies can provide immersive, stereoscopic experiences in 3D without losing the connection to the environment or other people. Thus, it has a strong potential for collaboration among experts while integrating real world environments and virtual content. With new, complex AR systems for use cases such as maintenance assistance or cyber physical production systems, the need to visualize relations between both real objects and virtual parts of the AR scene will increase. Examples for such relations are computer networks integrated into the environment, information flows in a smart home, and many more. Typically, they are visualized as 3D node-link diagrams. However, as of yet, there has been little research on how to design immersive AR node-link visualizations. In this project we focus on how to design visualizations for edges specifically. So far, we conducted two studies in which we examined which visual variables are most suitable and how different edge styles perform compared to each other.

Link Attributes for Network Visualization

One specific use case of immersive 3D node-link diagrams is the visualization of network connections and their edge attributes, e. g., to show link capacity or connectivity in LAN or IoT networks. So far, however, there has been very little research on which visual variables to use. We implemented eight link variants and report on the findings of an initial study in which we compared these different visual variables for edge attributes in 3D AR node-link diagrams. The variants/edge styles that we compared in our study were color, geometric primitives, curvature, stippling patterns, blinking, alternating stippling, animated stippling, and animated segments.

A photo of an AR network visualization with colored edges spanning between computers in the room.

Study Results

A bar chart of the aesthetics ratings (1-5) of different edge styles. Color is rated high wit 4.5, blinking was rated lowest with a rating of just over 2.5.
A bar chart of the ratings for Suitability (1-5) of different edge styles for nominal (left) and ordinal (right) attributes. For nominal attributes color was rated with 5, while the other styles were rated between 2.5 and ca. 3.5. For ordinal attributes, animated or stippling patterns were preferred.
Average aesthetics ratings for the different variants (left) and average suitability ratings for the different variants for both nominal and ordinal data

Visual Styles in 3D Node-Link Diagrams

In a second study, we examined edge variants for immersive 3D node-link diagrams in more detail. Based on a review of the design space for such edge styles and considering the results from our initial study, we conducted two independent, controlled lab experiments. In the first experiment, we examined undirected edges, in the second we concentrated on directed edges. We decided for geometry as a dominant factor in the edge design and tested six different variants including straight, curved, and stippled/dashed as undirected variants and animated, glyph-based, and tapered edges as directed styles.
Two photos showing the different edge styles in an AR graph.

Study Results

Three bar charts showing the results of our study for undirected edges. Task completion times show that straight and dashed edges were faster than curved edges. Suitability was rated highest for straight edges and aesthetics was lowest for dashed edges.
Three bar charts showing the results of our study for directed edges. Task completion times show similar results for all styles. Suitability was rated slightly higher for animated edges and aesthetics was lowest for tapered edges.
Results of the undirected edges (left) and directed edges (right). a) Mean task completion times in seconds, b) user ratings for suitability, c) user ratings for aesthetics. Higher ratings are better. Error bars show 95% confidence intervals.

Related Publications

Related Student Theses

  • Stefan Vogt

    Untersuchung der Kantendarstellung in räumlichen Visualisierungen von 3D-Node-Link-Diagrammen

    Stefan Vogt Oktober 9th, 2017 until April 8th, 2018

    Supervision: Wolfgang Büschel, Raimund Dachselt

  • Sinthujan Thanabalasingam

    Mobile 3D-Netzwerkvisualisierung in Augmented-Reality-Umgebungen

    Sinthujan Thanabalasingam November 21st, 2016 until Februar 5th, 2017

    Supervision: Wolfgang Büschel, Raimund Dachselt

  • Georg Eckert

    Mobile Visualisierung von Netzwerkstrukturen in Augmented-Reality-Umgebungen

    Georg Eckert April 4th, 2016 until Juni 26th, 2016

    Supervision: Wolfgang Büschel, Raimund Dachselt

  • Stefan Vogt

    Untersuchung von 3D-Node-Link-Diagrammen zur Visualisierung von Virtual Private Networks

    Stefan Vogt Februar 13th, 2017 until Juni 12th, 2017

    Supervision: Wolfgang Büschel, Raimund Dachselt