Cicero: A Declarative Grammar for Responsive Visualization

Document Title

Cicero: A Declarative Grammar for Responsive Visualization

Document Information

• Subject Area: Responsive Data Visualization Design
• Keywords: Visualization, Responsive Visualization, Declarative Grammar, Transformation Rules, Vega-Lite, Visualization Tools, Visualization Recommendation, Responsive Design, Flexible Interaction, Automated Design

Research Background and Problems

• Problems and Challenges:

  • Visualization applications need to adapt to different screen sizes (e.g., from desktop to mobile devices), requiring extensive manual adjustments to the original visualization design.
  • Existing responsive visualization generation tools often require manual definition of specifications for different views, lacking generality and flexibility.
  • Common declarative visualization grammars (e.g., Vega-Lite) have limited support for representing complex responsive transformation strategies.

• Importance:

  • With the increasing proportion of mobile device users, responsive visualization design has become essential for ensuring user experience.
  • The labor-intensive and error-prone process of manually editing and generating multiple versions of visualizations highlights the need for automated/intelligent solutions to improve efficiency and design consistency.

• Research Motivation and Related Work:

  • Previous studies have developed various responsive visualization strategies and tools (e.g., Vega-Lite and Draco), but they lack flexibility in expressing complex user requirements and transformation rules.
  • There is a need for a unified, flexible, and extensible grammar to support diverse expressions and implementations of responsive visualization strategies.

Solution

• Method and Solution:

  • Introduced Cicero, a declarative grammar designed to specify transformation rules for responsive visualizations in a concise and flexible manner.
  • Cicero enables users to define rules based on visualization elements (e.g., labels, legends, axes) and transformation behaviors (e.g., replacement, deletion, repositioning).
  • Provides a set of concise action predicates (e.g., swap, modify, rearrange) to transform visualization designs and support reuse across different views.

• Innovations:

  • Offers a general and flexible syntax that supports selecting visualization elements in various ways (e.g., based on structure, data, or attributes).
  • Supports transformation rules defined by both systems and users, meeting diverse user needs while promoting rule reuse and extensibility.
  • Cicero represents complex visualization transformations as modular specifications that are easy to understand and extend.

• Implementation Steps and Key Technologies:

  1. Design the Cicero grammar syntax: including element customization (e.g., specific data points, colors, or marks) and action predicates.
  2. Develop a responsive transformation compiler for Vega-Lite-based visualization specifications using Cicero grammar.
  3. Validate Cicero's expressiveness and flexibility through real-world case studies.
  4. Integrate Cicero with recommendation systems (e.g., ASP solvers) to explore intelligent design applications.

Research Outcomes

• Specific Results:

  • Developed the Cicero grammar and a compiler framework extended from Vega-Lite.
  • Designed 13 real-world case studies using Cicero (covering responsive transformations from desktop to mobile), including rules for data filtering, layout adjustment, and annotation.
  • Demonstrated Cicero's flexibility and modular advantages in expressing various complex responsive designs.

• Advantages:

  • Compared to existing tools like Vega-Lite, Cicero expresses more complex responsive transformation rules with less code.
  • Supports rule reuse, significantly reducing repetitive work in designing multi-version views.

• Experimental or Evaluation Results:

  • The "Bond Yields" case study showcased a complete transformation process from desktop to mobile views, illustrating Cicero's ability to effectively support various design strategies, such as dimension adjustment, data filtering, and annotation positioning.
  • Cicero serves as a modular interface for visualization recommendation systems, enhancing design automation and the interpretability of recommendation results.

• Limitations and Future Directions:

  • Limitations:
    • Currently focused on 2D planar visualization design, with insufficient consideration for interactivity and dynamic responsive behaviors (e.g., 3D graphics, dynamic layout adjustments).
    • Cicero's compiler relies on an extended version of Vega-Lite, and additional adjustments may be required for direct application to other grammars (e.g., ggplot2).
  • Future Directions:
    • Extend action predicates to support more complex interactive operations and dynamic layouts.
    • Develop intelligent data visualization tools for large-scale user scenarios and conduct user studies to evaluate Cicero's practical utility.