This research project developed an experimental user interface for manipulating a visualization of a network (or graph) using novel variants of popup widgets, including a hotbox widget containing 1D and 2D sliders. A rich set of operations are acccessible using only two buttons: the Ctrl key on the keyboard, and the Left mouse button. The popup menus and hotbox only take up screen space when and where the user needs them, and a user familiar with them can access operations with fast, gesture-like mouse movements. These techniques are described in an article by Michael J. McGuffin and Igor Jurisica published at the IEEE InfoVis 2009 conference. Below are videos and a small Java applet to demonstrate the user interface.

See also NAViGaTOR, a Java application for visualizing biological networks, that also uses a hotbox.

Hotbox Demo Video

High-quality version: mcguffin-infovis2009-hotterBox.mov (140 megabytes, 4:49, 720x480 pixels, 15 fps, H.264 codec)

Low-quality youtube version: http://www.youtube.com/watch?v=U2vhjdnSfsQ



Figures



Above is the hotbox. The "Move", "Scale and Rotate", "Scale", and "Move and Rotate" regions are 2D sliders: the user can click and drag within them to modify the nodes they selected before popping up the hotbox. The grey buttons with arrows on them ("Opacity", "Hotbox Opacity", "Spread Neighbours", "Adjust Force") are 1D sliders: the user can click and drag horizontally on them. The other grey buttons are checkbox buttons or pushbuttons.

Above is the "node-specific" radial menu which is popped up over a node. Dragging toward the right within the menu allows the user to select a neighbourhood of a given radius, and flicking to the left serves as a shortcut for selecting the entire connected component. To toggle the selection state of a single node, the user can flick upward, or (as a shortcut) simply release in the center of the menu.

Hotbox Demo Java Applet

In the below applet, first, try holding down the Ctrl key and left click-dragging on a node to move it.

Next, to select several nodes, without the Ctrl key, position the cursor over whitespace, and left click drag out a rectangle (or lasso) to select some nodes. Once you release, a radial menu will appear attached to the cursor. Simply click-release to select the default within it, or click-drag to select another option.

Next, to pop up the hotbox, hold down the Ctrl key and you should see a red circle appear around the cursor. Move the mouse cursor outside that circle without dragging, and the hotbox will appear. You can then click or click-drag on the controls within the hotbox to modify the nodes you selected before popping up the hotbox. For example, click-dragging on the central square marked "Move" will move the selected nodes.

For more details, scroll to the bottom of this webpage.

(You need Java to see this applet.)

Key and button reference:

Note that, initially, the Ctrl key may not work until the applet has been clicked on, to give it keyboard focus.

More Figures