Path-based Design Model for Constructing and Exploring Alternative Visualisations

TL;DR

The paper presents a path-based design framework for visualisation construction, using a flowpath skeleton $P$, a gene encoding visual objects and appearance, and data-mapping morphisms to generate diverse designs. The Genii system implements this model with a modular browser- and watch-ready toolkit, supporting multiple path types, envelope clipping, and data-driven rendering, all stored as deterministic gene expressions hashed by a 32-bit seed. Through case studies that recreate existing visuals and a smartwatch-oriented design, along with usability evaluations, the work demonstrates rapid generation of varied, self-contained visuals suitable for mobile contexts. The approach offers a structured, extensible space for creative visualisation design and could be extended with automated gene generation, 3D paths, and rule-based or learning-guided design guidance to further scale exploration and practical deployment.

Abstract

We present a path-based design model and system for designing and creating visualisations. Our model represents a systematic approach to constructing visual representations of data or concepts following a predefined sequence of steps. The initial step involves outlining the overall appearance of the visualisation by creating a skeleton structure, referred to as a flowpath. Subsequently, we specify objects, visual marks, properties, and appearance, storing them in a gene. Lastly, we map data onto the flowpath, ensuring suitable morphisms. Alternative designs are created by exchanging values in the gene. For example, designs that share similar traits, are created by making small incremental changes to the gene. Our design methodology fosters the generation of diverse creative concepts, space-filling visualisations, and traditional formats like bar charts, circular plots and pie charts. Through our implementation we showcase the model in action. As an example application, we integrate the output visualisations onto a smartwatch and visualisation dashboards. In this article we (1) introduce, define and explain the path model and discuss possibilities for its use, (2) present our implementation, results, and evaluation, and (3) demonstrate and evaluate an application of its use on a mobile watch.

Figures (13)

• Figure 1: Reilly lines of action Matesi2006. The method is a constructive approach that emphasises primary lines of action, a$\rightarrow$b, c$\rightarrow$d, h$\rightarrow$i, j$\rightarrow$k, and secondary forms (rhythm lines), e$\rightarrow$, and f$\rightarrow$g.
• Figure 2: To create the visualisation, first define the sequence, describe the envelope, place objects, map data and add any final filters to realise the visualisation. We represents the points $P$ as a sequence of vertices $v_0$ to $v_{n-1}$ (1). This acts as a skeleton that forms the supporting structure of a visualisation. The envelope (2) acts to control the scope of the placed objects ($E_t$ to $E_b$). Data is mapped along the sequence of points (4), where in this example data is applied to size the objects to create an angled bar chart. Finally colour is mapped to the sequence data to complete the visual design (5).
• Figure 3: The path is made from a set of vertices. Objects encode the data and are mapped along the path.
• Figure 4: It is possible to control the placement of the objects by changing parameters of path and envelope. (i) Shows centred objects along the path; (ii) uses only the top envelope and snapping the objects to the path, (iii) puts objects under the path, (iv) can alternate between top and bottom envelop, (v) z-pattern showing how the return angle places objects underneath, (vi) and by switching the envelope on the angle objects can be placed above the path.
• Figure 5: Different circular visualisations can be created through circular paths, and by setting the envelope points to a fixed location. Or by placing circular objects.