Robin Stewart: portfolio
icon

Flexible Fills

Graph Sketcher for Mac

Summary

I designed and built Graph Sketcher from scratch between 2003 and 2008. One component of the application is a unique interface for controlling filled areas in illustrative diagrams. This and several other innovations were the subject of an award-winning paper I presented at the international conference on human-computer interaction (CHI 2009).

Background Research

Vector illustration apps typically use one of two methods for handling solid areas of color. The most common method treats filled objects as layers that can be stacked on top of each other. The second method (called planar map illustration) instead dynamically fills in the areas between lines. The first method focuses on polygons, whereas the second is based around lines.

Process

The original use cases for OmniGraphSketcher were straight-line graphs that required only simple polygonal filled areas.

A graph with simple polygonal filled areas

I started by implementing the traditional polygon method for filled areas, because the engineering was quick and easy. The user defines a polygon by clicking each corner, and the app sends it to the graphics system to draw.

Unfortunately, this is a poor user experience for the situation shown above, where most filled areas are bordered by lines. To make a professional-looking graph, the user has to painstakingly adjust each corner to avoid slivers of white space between bordering lines. (This problem exists even in widely used software such as Excel.)

Iterations

The first improvement I made was to add snapping functionality. If you drag a polygon corner close to a line, it automatically snaps to the line, eliminating the need for precise manual adjustments. Corners will also snap to line intersections, grid intersections, and 90-degree angles.

Next, I augmented the snapping behavior to be sticky: any polygon corner snapped to a line stays snapped when the line is adjusted. This behavior is called constraint-based layout. My implementation maintains the fractional position of the snapped point along the line.

But the most exciting improvement came once I added curved lines to Graph Sketcher. Now instead of creating simple polygons, the software follows a new rule: if two successive fill corners are snapped onto the same line, the edge of the colored area automatically follows the line as it would in planar map illustration.

A fill that is snapped onto curving lines

I also made this work for data series.

A graph with filled areas snapped to data series

The result is a novel, hybrid approach that supports both stacked polygons and edge-following techniques, all without any extra buttons or tools complicating the user interface. The choice of fill algorithms is based intuitively on the presence or absence of snapped corners.

Results

The improved user interface makes it dramatically faster and easier to create precise filled areas. Customers have used it to make effective diagrams in a wide variety of fields, including economics, psychology, chemistry, geology, and mechanical engineering.

Examples of customer graphs with interesting filled areas

Further Reading

Robin Stewart and m.c. schraefel. Graph Sketcher: Extending Illustration to Quantitative Graphs. In Proc. CHI '09, pages 1113-1116. ACM, 2009. (Best Paper Award.)

K. Ryall, J. Marks, and S. Shieber. An interactive constraint-based system for drawing graphs. In Proc. UIST ’97, pages 97–104. ACM, 1997.

P. Asente, M. Schuster, and T. Pettit. Dynamic planar map illustration. ACM Trans. Graph., 26(3):30, 2007.