# iGraph.js

## Project description

iGraph.js is a demo for interaction techniques for graph visualization. iGraph.js uses a node-link layout
embedded in a zoomable space. Node size (more precisely node area) and node color are used to visualize the degree of
nodes. Besides basic navigation via zoom and pan, iGraph.js implements an interactive **radar** and interactive
**graph lenses**. The original ideas behind these interaction techniques have been published in:

* Tominski, C.; Abello, J. & Schumann,
  H.: [CGV - An Interactive Graph Visualization System](https://vca.informatik.uni-rostock.de/~ct/publications/Tominski09CGV.pdf).
  Computers & Graphics, Vol. 33, No. 6, 2009.
* Tominski, C.; Abello, J.; van Ham, F. & Schumann,
  H.: [Fisheye Tree Views and Lenses for Graph Visualization](https://vca.informatik.uni-rostock.de/~ct/publications/Tominski06GraphLenses.pdf).
  Proc. of IV, London, IEEE, 2006.

iGraph.js serves as a demonstrator for the following interactive graph visualization techniques:

* Standard zooming and panning
* Dynamic node labeling
* Interactive graph lenses
    * The *Local Edge* lens clears edge clutter from the lens by showing only those edges that are actually connected to
      nodes within the lens.
    * The *Bring Neighbors* lens creates a local overview of nodes of interest by bringing their *k*-1 neighborhood to
      the lens interior.
    * The *Fisheye* lens is a classic lens that distorts space to de-clutter dense parts of the graph layout.
    * The *Bring Similar* lens attracts nodes that are similar (wrt. their node attribute values) to the node at the
      lens center.
* Radar view

Our goals are to:

* offer aesthetic graphics
* deliver self-explanatory and intuitive interaction
* provide smoothly animated visual feedback

## Controls

### General

###### Mouse

* Wheel: Zoom view
* Left double click: Center view here
* Right drag: Move view

###### Keys

* g: Grid on/off
* r: Reset view
* w/a/s/d: Move view
* +/-: Zoom view

### iGraph

###### Mouse

* Left drag: Move node
* Shift + left drag: Move and lock node in place

###### Keys

* Space: Jiggle layout
* 1: Use node size: on/off
* 2: Use node color: on/off
* 3: Use edge width: on/off
* 4: Layout computation: on/off

### Lenses

###### Mouse

* Left drag: Move lens
* Right click: Center lens on node
* Shit + Wheel: Resize lens

### Radar

###### Mouse

* Left drag on arc in radar widget: Rotate radar
* Left drag on radar widget: Move widget
* Shit + Wheel on arc in radar widget: Resize arc
* Shit + Wheel on radar widget: Resize widget