Skip to main content.

Graph and Euler Diagrams

Node and Edge graphs, as shown below, are the simplest of a large class of diagrams from a wide variety of disciplines. Dr Plimmer and Dr Helen Purchase from Glasgow (a specialist in graph diagram aesthetics), designed SketchNode as a research platform. In this constrained environment we are able to explore how people construct and interact with diagrams. Furthermore it lets us investigate user interaction design and software architectures for dual-visualization diagramming tools.

Euler (or Venn) diagrams are another fundamental diagram type. SketchNode has been extended to SketchSet with Dr Gem Stapleton and her colleagues from Brighton and Kent Universities

Sketching node and edge graphs by hand is a quick and easy design process, not mired by clumsy interfaces or constrained by the drag and drop tools. However hand drawn graphs can become convoluted as more nodes and edges are added. The need to be able to rearrange the graph quickly becomes apparent. Furthermore a formal beautified copy of the graph may be required.

Sketchnode is a graphing program that supports both low and high fidelity graph rendering. It runs on a Tablet PC to take advantage of the pen. The user can create a graph by sketching or through drag and drop interaction. Alterations made in either mode are reflected in both the sketch and beautified versions of the graph.

SketchNode uses optimization algorithms to allow the transformation of tangled graphs into ones that are easy to understand and follow. This required reflow and distribution of the digital ink while keeping the graphs structure: nodes and edges are moved and stretched so that they maintain a hand drawn appearance. Graph Layout gives the user the best of both low and high fidelity design.

Graph 1 Graph 2 Graph 3
Screenshots of the prototype of graph layouting software


Paper Publications