Integrated Visualization Editing via Parameterized Declarative Templates
Interactive Data VisualizationPrototyping & User TestingSoftware Engineers & DevelopersUI/UX Designers
Title of the Paper
Integrated Visualization Editing via Parameterized Declarative Templates
Paper Information
- Research Domain: Information Visualization, User Interface Design, Multi-modal Interaction Systems
- Keywords: Information Visualization, Declarative Generator, Templates, User Interface, Ivy, System
Research Background and Problem
- Problems and Challenges: Creating visualization interfaces typically involves three main modalities: textual specification (flexible but slow), panel-based construction (exploratory but hard to customize), and chart selection (simple but restrictive). These modalities have their respective advantages and disadvantages but often exist independently in current systems, preventing users from freely switching between them.
- Significance: Single-modality interfaces often limit user flexibility or exploratory capabilities. For instance, textual systems may be unfriendly to novices, while chart selection may not suit experts. The limitations of existing interfaces force users to switch tools during analysis or rely on temporary solutions that are difficult to reuse.
- Research Motivation and Related Work: The authors aim to integrate multiple modalities to provide users with a visualization editing tool that is both easy to use and supports strong flexibility and exploration. Additionally, the authors focus on extending declarative visualization generators to enhance their reusability and organizational capabilities.
Solution
- Method or Solution: A mechanism called "Parameterized Declarative Templates" is proposed. This mechanism is based on JSON declarative visualization generators and extends the declarative syntax with simple programming elements (variables, conditions).
- Innovations:
- Introducing a cross-language template mechanism that allows users to flexibly reuse chart definitions through parameterized operations.
- Combining textual editing and graphical construction in a multi-modal interface that supports real-time synchronization and intuitive design.
- Enabling users to quickly create complex charts through templates while supporting rapid exploration and organizational reuse.
- Implementation Steps and Key Technologies:
- Defining a template language: Extending JSON to include variable definitions and conditional controls, enhancing the functionality of declarative generators.
- Developing a prototype system (Ivy): Implementing an editor that supports multi-language templates, combining textual and GUI interfaces.
- Adding interactive features: Implementing "modality switching," panel construction, related template recommendations, and rapid comparison of variations ("fan out").
Research Results
- Specific Results:
- Systematically simplified Vega-Lite and Google Sheets charts into compact template collections, achieving compression ratios of 3.5x and 1.8x, respectively.
- The prototype system Ivy supports four languages (Vega, Vega-Lite, Atom, and a simple table language) and provides functionalities such as template creation, parameter selection, and view exploration.
- Experimental studies demonstrate that compared to single-modality tools, the system significantly enhances flexibility (G3) and reusability (G4) while maintaining ease of use (G1) and exploratory capabilities (G2).
- Comparison with Existing Solutions:
- Ivy surpasses traditional chart selection and panel construction interfaces, enabling users to easily switch modalities.
- The template abstraction mechanism significantly reduces chart code redundancy and improves organizational efficiency.
- Compared to fully textual systems, Ivy's graphical interface lowers the learning curve while retaining the expressive power of textual systems.
- Experimental Results:
- User experiments showed that all participants were able to complete complex tasks, including data exploration, chart creation, and template construction, with some guidance.
- Ivy's usability scores ranged from "average" to "excellent," indicating user recognition of the advantages of multi-modal interaction.
- Limitations and Future Directions:
- Some users reported difficulties in learning the system, particularly when switching between textual and GUI operations.
- The authors suggest embedding the system into existing tools (e.g., Shiny and Jupyter) to enhance practicality and portability.
- Future work could focus on expanding the range of supported languages and increasing the diversity of internal template parameter types (e.g., binding data fields to color schemes).
Research Questions / Practical Problems
Question signals indexed for this paper.
help
Research Questions
3- How can multiple modes of visualization editing be integrated to improve user flexibility and exploratory ability?Category: Visual Analytics Explanation, Methods, and WorkflowsSimilar questionsarrow_forward
- How can parametric declarative templates simplify creation and reuse of complex charts?Category: Visual Analytics Explanation, Methods, and WorkflowsSimilar questionsarrow_forward
- How can usability and expressiveness be balanced in visualization editing tools?Category: Visual Analytics Explanation, Methods, and WorkflowsSimilar questionsarrow_forward
lightbulb
Practical Problems
1- Users are often constrained by single editing modes when creating visualizations.Category: Visual Analytics Explanation, Methods, and WorkflowsSimilar questionsarrow_forward
- 100%
DynaVis: Dynamically Synthesized UI Widgets for Visualization Editing
CHI '24· Interactive Data Visualization +1
- 100%
Sporq: An Interactive Environment for Exploring Code Using Query-by-Example
UIST '21· Interactive Data Visualization +1
- 80%
CoCapture: Effectively Communicating UI Behaviors on Existing Websites by Demonstrating and Remixing
CHI '21· 360° Video & Panoramic Content +2
- 80%
TableCanoniser: Interactive Grammar-Powered Transformation of Messy, Non-Relational Tables to Canonical Tables
CHI '25· Interactive Data Visualization +1
- 80%
Screen Parsing: Towards Reverse Engineering of UI Models from Screenshots
UIST '21· Interactive Data Visualization +1
- 75%
KeyMap: Improving Keyboard Shortcut Vocabulary Using Norman's Mapping
CHI '20· Prototyping & User Testing
- 75%
Interactive Document Clustering Revisited: A Visual Analytics Approach
IUI '18· Interactive Data Visualization
- 75%
Data-centric disambiguation for data transformation with programming-by-example
IUI '21· Interactive Data Visualization
- 75%
X-Droid: A Quick and Easy Android Prototyping Framework with a Single App Illusion
UIST '19· Prototyping & User Testing
- 67%
Interface Dis/Similarities: Investigating Characteristics Influencing Perceived Differences Between GUIs
CHI '26· User Research Methods (Interviews, Surveys, Observation) +2
Based on Jaccard similarity of research subtopics & professions (≥60%)
Quick Actions
AdRecommended
Learn AI Coding at CodeNow
open_in_newOpen DOI Link
DOI: https://doi.org/10.1145/3411764.3445356
At a Glance
fact_checkPaper Snapshot
dataset
Source
CHI
calendar_month
Year
2021
emoji_events
Award
No award tagged
group
Authors
2 authors
sell
Subtopics
Interactive Data Visualization, Prototyping & User Testing
work
Professions
Software Engineers & Developers, UI/UX Designers
article
Content Status
Full text indexed
hub
Related Papers
10 related papers