Bluefish: A Grammar of Discrete Diagrams

Abstract

Discrete diagrams show collections of data objects and the discrete relationships between them, which include not just nominal and ordinal relations, but also more general ones such as the parent-child relation in a tree and the friend-friend relation in a social network.

Perceptual grouping principles – such as spatial proximity, nesting, and linking – are central to reading a discrete diagram. Yet, despite their importance, these principles are typically only implicit when creating one. As a result, a diagram author must either build their own abstractions on top of a grammar-of-graphics visualization toolkit or pre-commit to a structural representation supported by a domain-specific diagramming tool.

The key idea of this paper is that perceptual groups visualize discrete relations. We operationalize this insight in Bluefish, a grammar of discrete diagrams, in which diagram authors can use perceptual grouping principles to construct visual encodings of discrete relations.

A prototype of Bluefish has been implemented as a JavaScript library that can be embedded in an Observable notebook. We evaluate Bluefish by comparing it to a direct manipulation editor, a library inspired by the Grammar of Graphics, and a domain-specific diagramming tool.

More broadly, this explicit connection between discrete relations and perceptual groups provides insight into the effectiveness of statistical charts, suggests new interfaces for accessibility, and may prompt new ideas for visualization recommendation, analysis, and synthesis.