GLIDE: A Semi-Automatic Graph Drawing Editor

Collaboration between People and Computers

The dominant metaphor in the design of human-computer interaction is the view of computer as factotum. Although interfaces based on this view have proved useful in a variety of settings, qualitative progress in the area of human-computer interaction, awaits the ability to interact with computers as collaborators. As a first step toward such collaborative interfaces, we have built a system, called GLIDE for interactive graph layout. (By ``graph'' we mean the node-edge network diagrams widely used to visualize binary relations, not arbitrary informational graphics.) GLIDE organizes the interaction between the computer and its human user in a more collaborative manner than previous systems.

GLIDE Overview

In spite of great advances in the automatic drawing of medium and large graphs (also known as network diagrams), the tools available for drawing small graphs exquisitely (that is, with the aesthetics commonly found in professional publications and presentations) are still very primitive. Commercial tools, e.g., Claris Draw, provide minimal support for aesthetic graph layout. At the other extreme, research prototypes based on constraint methods are overly general for graph drawing. GLIDE improves on general constraint-based approaches to drawing and layout by supporting only a small set of ``macro'' constraints that are specifically suited to graph drawing. These constraints are enforced by a generalized spring algorithm. The result is a usable and useful tool for drawing small graphs easily and nicely.

The GLIDE project is joint work with Joe Marks of Mitsubishi Electric Research Labs (MERL) and Stuart Shieber of Harvard University.

(Each image in this document is hyperlinked to a postscript copy of itself. Click on any image to spawn an external viewer.)

Table of Contents


Motivation:

Network diagrams are a useful form of informational graphic. They are difficult to generate using today's software tools. Much research has focused on automatic layout, but little research has attempted to integrate such methods into an interactive system.

Back to Table of Contents


Our Goal:

We will create a semi-automatic system in which the user and the computer collaborate to design and articulate a graphic that is suitable for a user's needs. The division of labor should exploit the strengths of both humans and computers.

Back to Table of Contents


Methodology:

Our system is based on the concept of Visual Organizational Features (VOFs), which characterizes the perceptual organization of a diagram. Our approach greatly reduces the amount (and tedium) of required user input.

Back to Table of Contents


User Interaction:

A user may:
  • add nodes and edges to the diagram
  • add desired VOFs by selecting sets of nodes with
  • the mouse, and pressing a VOF pushbutton
  • move nodes (or sets of nodes) by dragging them
  • delete nodes, edges and VOFs
  • Back to Table of Contents


    The System:

    The system postions objects by:
  • converting each VOF instance specified by the user into a set of constraints
  • ensuring syntactic validity of the image (nodes may not overlap, edges cannot cross nodes)
  • using a physical simulation to satisfy the con straints under a mass spring model
  • animating the simulation, so that a user can see what effect her actions have
  • permitting user intervention at any time

    Back to Table of Contents


  • Example:

    Below we show snapshots at various points in the design process in order to illustrate some of the features of our system.
  • User creates initial layout, placing nodes using the mouse.

  • User adds edges and labels.
    System resizes nodes to fit labels.

  • User constrains each row to be aligned (3 VOFs).

  • The system reposi tions the nodes accordingly.

  • The user adds:
    alignment VOF (in blue)
    symmetry VOF (in red)
    hub-shaped VOF (in aqua)

  • The system repositions the nodes, satisfying old and new constraints.

  • The user adds text labels, including:
    new font on labels
    alignment VOF (in blue)
    even-spacing VOF (in red)
    clustering VOF (in aqua)

  • The final layout.

  • Back to Table of Contents


    References:

  • coming soon

    Back to Table of Contents


  • Kathy Ryall / ryall@cs.virginia.edu.edu