Please disable Adblockers and enable JavaScript for domain CEWebS.cs.univie.ac.at! We have NO ADS, but they may interfere with some of our course material.

Visualization

Screencast

Color Coding

Marking	Symbol	Color
New
Increased
Unchanged
Decreased
Deleted

Design Choices and Functions

1. Graph Positioning 
   The visualization is set to focus the users attention on the difference graph. The differencegraph is positioned on bottom of the inputs and has 3 times the size of each input. 
2. Node/Edge Positioning 
   To support the users mental map nodes and edges are visualized on the same position in each graph. 
3. Legend 
   A survey showed that only trust intuitive understanding of the different colors/symbols is not an option. Therefore a legend can be accessed to show which color/symbols represents which marking. 
4. Zoom 
   A zoom function allows faster navigation and gaining a quick overview of the graph. 
5. Highlighting 
   For fast comparision why certain nodes are represented with a specific marking the highlighting function allows to select from one to all nodes within the graph and automatically highlight these nodes in the other 2 representations (e.g. Node E) 
6. Switch 
   This button allows to switch the calculation order of the inputs. For example the current state is Input2-Input1 switching changes the order to Input1-Input2. 

Visual Properties

1. Weights on Nodes Visualizes weights in front of the name for each node, within both inputs and the difference graph. 
2. Weights on Edges Visualizes weights on each edge, within both inputs and the difference graph. 
3. Color Coding Visualizes the markings with applied color coding. Only within the difference graph. 
4. Symbols Visualizes the markings with symbols. Only within the difference graph. 

User Study