iGraph.js – Interaction for Graph Visualization

Christian Tominski (with Alexander Berdowski, Christian Tessnow, and Sebastian Plath)
University of Rostock, 2015-2019


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:

How to Use

Zoom and pan can be controlled via wheel, right drag, and double click. When zoomed in, the radar can be used to make off-screen node visible by temporarily projecting them onto the canvas borders. Activate the radar using the button. Left drag the radar arc handle to scan different directions. Left drag the radar control itself to reposition it. Use shift+wheel on the radar arc handle and the radar control to adjust the radar range and the control's size, respectively.

The lens can be activated via the button. Left drag to reposition the lens and shift+wheel to resize the lens. There are three lens functions, which can be used separately or in combination:

Finally, if you are not satisfied with the generated layout, press space to jiggle the layout a bit. Enjoy the demo below! Should you get lost, press to reset the view, radar, and lens. If you prefer a full-page demo, go ahead and check it out!

Credits: HTML5 canvasJavascriptjQueryPure.cssnormalize.cssFont AwesomeColorBrewer

Last Update: April 26, 2019