visualization of graph structures with magnetic-spring model and color-coded interaction

1

Visualization of Graph Structures Visualization of Graph Structures

with Magnetic-Spring Model and with Magnetic-Spring Model and

Color-Coded InteractionColor-Coded Interaction

Mg.sc.ing., doctoral student Vitaly ZabiniakoRiga Technical University, Latvia

Baltic DB&IS 2012

2

Problem domain (1/4)Problem domain (1/4)Problem domain (1/4)Problem domain (1/4)

Baltic DB&IS 2012

Simplicity and complexity of visual data:

Formalization:

ComplexSimple

Graph

3


Baltic DB&IS 2012

Application:• Organizational charts• Web site maps• Data structures• Semantic networks• State–transition diagrams• Object–oriented systems

(class browsers)• Petri nets• Data flow diagrams

• Subroutine–call graphs• Entity relationship diagrams• Knowledge–representation

diagrams• Taxonomies• Project/document

management systems• Evolutionary trees• Molecular maps

in biology and chemistry

4


Baltic DB&IS 2012

Visualization of graphs

• Graph layout algorithms

• Visualization

techniques

• Usage of two-dimensional /

three-dimensional space

• GVS (Graph

Visualization Systems)

5


Baltic DB&IS 2012

…a model for improved data analysis and interaction!

• preliminary visual analysis before automatic processing;• B. Schneiderman – “Overview first, zoom and filter, then details on demand”.

6

Goal and tasksGoal and tasksGoal and tasksGoal and tasks

Baltic DB&IS 2012

Goal:to improve capabilities of visual analysis of graph structures by providing a new model for interaction between the user and GVS.

Tasks:• to analyze aspects of existing graph layout models;

• to introduce a concept of MFE (Magnetic Force Emitter) and its interaction rules, based on the RGB / HSL color models;

• to provide a specification of an integrated virtual workshop for graph visualization;

• to demonstrate the proposed approach in a case-study.

7Baltic DB&IS 2012

Force-based approach (1/3)Force-based approach (1/3)Force-based approach (1/3)Force-based approach (1/3)

/*1*/ place vertices of G in random locations;/*2*/ repeat until equilibrium/*3*/ calculate the force on each vertex;/*4*/ move the vertex (force on vertex)/*5*/ draw graph

Peter Eades – “A heuristic for graph drawing”, 1984.

• Forces of attraction and repulsion:

• Average kinetic energy:

• Algorithm:

• Result:

)log(2

1 c

dcFa

d

cFr

3

n

iiria FF

nE

1,,

1

8Baltic DB&IS 2012


1. Magnetic fields:2. parallel;3. polar;4. concentric;5. compound orthogonal;6. compound polar-concentric.

Kozo Sugiyama – “A Simple and Unified Method for Drawing Graphs: Magnetic-Spring Algorithm”, 1994.

bdcF mm +

Explicit benefits:

• outlining of geometrically localized subsets (clusters) of elements with dense mutual relations

• keeping decoupled clusters separate;

• outlining of symmetric structures (if any) within the graph;

• reduced bounding box (minimization of occupied space);

Implicit benefits:

• dynamic evolving;

• altering with additional force fields.

9Baltic DB&IS 2012


Drawbacks:

• computational complexity;

• avoiding local minima of .E

10Baltic DB&IS 2012

Magnetic Force EmittersMagnetic Force EmittersMagnetic Force EmittersMagnetic Force Emitters

• to allow for MFE the conditional stop is removed from the algorithm. This:

o leaves the virtual model of a graph in permanent “standby” state

ando enables reactions to additional dynamic force emitters which are positioned and controlled by the user in virtual visualization space.

• eg. “auto-attract” and localize nodes which conforms to user-defined criteria (only inherited classes in UML diagram, only non-empty folders in file system, etc.);

• “auto-repulse” nodes which must be filtered out of the inspection, etc.

11Baltic DB&IS 2012

Color-coded interaction (1/4)Color-coded interaction (1/4)Color-coded interaction (1/4)Color-coded interaction (1/4)

• RGB relies on Cartesian coordinate system and distance between colors;

• HSL is based on cylindrical coordinate system;

• “equal”/“close”, “separate”/“opposite” colors, e.g.: [blue, yellow]; [red, cyan]; [green, magenta]; [black, white] (opposite vertices in RGB / separation by angle π in HSL).

• concept of a color is well-known and implicitly understandable by most humans;

• according formalized models exist , known as RGB / HSL color spaces:

12Baltic DB&IS 2012


• visual interaction rules between arbitrary graph element E (RE,GE,BE) and magnetic force emitter M (RM,GM,BM) define force modifier function f for attraction / repulsion:

Fa’= Fa ∙ f(RE,GE,BE,RM,GM,BM)

Fr’= Fr ∙ f(RE,GE,BE,RM,GM,BM)• RGB:

o color-based contradistinctionf(RE,GE,BE,RM,GM,BM) = DRGB

o color-based proximity f(RE,GE,BE,RM,GM,BM) = (1–DRGB)

3

)()()( 222EMEMEM

RGB

BBGGRRD

13Baltic DB&IS 2012


• HSL:

1))(3,2(2arctan))(3,2(2arctan

2

1))(3,2(2arctan))(3,2(2arctan

HSL

EEEEEMMMMM

HSL

EEEEEMMMMM

HSL

DBGBGRBGBGR

DBGBGRBGBGR

D

o color-based contradistinctionf(RE,GE,BE,RM,GM,BM) = DHSL

o color-based proximity f(RE,GE,BE,RM,GM,BM) = (1–DHSL)

14Baltic DB&IS 2012

RGB:

• equal colors results in DRGB = 0, while “opposite” colors have DRGB = 1;• visually similar colors have DRGB which usually does not exceed 0.4;• all primary colors have distinctive mutual normalized distances; • grey color is equally “close”/”apart” from all other primary colors.

HSL:

• equal colors results in DHSL=0, while “opposite” colors have DHSL=1;• visually similar colors tend to have smaller DHSL;• all primary colors have distinctive mutual normalized distances;• black, white and all shades of grey color cannot participate in interaction (arctan2 is undefined);• has better distribution due to the fact that visually close colors have smaller values (as an example: (1,0,1) – (0.69, 0.2, 0.96) has DHSL=0,11 versus DRGB = 0,21; (0,0,1) – (0.29,0.39,0.85) has

DHSL=0,05 versus DRGB = 0,3, etc).


15Baltic DB&IS 2012

A concept of virtual workshop A concept of virtual workshop A concept of virtual workshop A concept of virtual workshop

Within the scene (1) there is inner virtual frustum (2) which defines borders of the “workshop”. Within the inner frustum the spatial graph model is situated. Its elements can be manipulated with the help of MFE (6) by attracting / repulsing color-compatible elements (5). Faces of the inner frustum might be used as magnetic planes (7) which attract compatible nodes (4) while the remaining graph elements (3) stay on the background.

16Baltic DB&IS 2012

A case study of color-coded A case study of color-coded interactioninteraction

A case study of color-coded A case study of color-coded interactioninteraction

• A topological model for library application:

• initial graph (1);• application of unmodified force-based layout (2);• introduction of “green” MFE (3);• visual distinction of “yellow” cycle via front magnetic plane (4).

17

Conclusions (1/2)Conclusions (1/2)Conclusions (1/2)Conclusions (1/2)

• A novel approach for visualization of graphs, based on dynamic color-coded interaction and magnetic-spring model is presented.

• An attempt was made to unite two consistent approaches (physical phenomenon of magnetic interaction and color vision) both of which exist in a real world, and apply these to the information visualization domain.

• The RGB color distance is valid for all possible color combinations, while having average precision for identifying visually “close” colors.

18

Conclusions (2/2)Conclusions (2/2)Conclusions (2/2)Conclusions (2/2)

• The HSL color distance features better convergence, although it is not capable of working with monochrome colors.

• Both strategies are compatible with proposed concept of virtual workshop which relies on frustum space, manipulation with MFE, magnetic planes and auxiliary layout algorithms / visualization techniques.

• Implementation details of how the color of graph elements is being defined, how the user controls MFE and defines color of these must be solved during implementation of particular GVS.

19

Future developmentFuture developmentFuture developmentFuture development

• Exploration of additional color-based interaction

o models (CIELAB, etc.);o rules;

• Elaboration of standardized recommendations for manipulation of properties of MFE and frustum planes.

• Adapting additional visualization techniques for better information comprehension within integrated virtual workshop of GVS.

20

Thank you for attention!

Any questions…?

visualization of graph structures with magnetic-spring model and color-coded interaction

Documents

latviabaltic dbis

tasksbaltic dbis

vertex force

forcebased approach

graph drawing

magnetic force emitters

additional force fields

problem domain