Proteus: Shapeshifting Desktop Visualizations for Mobile via Multi-level Intelligent Adaptation

TL;DR

Proteus is an AI-driven system that automatically adapts desktop data visualizations for mobile devices, ensuring readability and interaction quality across different screen sizes.

Contribution

The paper introduces a multi-level design space and a large language model-based system for automated visualization adaptation from desktop to mobile.

Findings

Proteus effectively adapts visualizations with high readability on mobile.

User study shows positive usability and effectiveness of Proteus.

Case studies demonstrate successful transformation of various visualizations.

Abstract

With the rise of mobile-first consumption, users increasingly engage with data visualizations on mobile devices. However, the vast majority of existing visualizations are originally authored for desktop environments. Due to significant differences in viewport size and interaction paradigms, directly scaling desktop charts often results in illegible text, information loss, and interaction failures. To bridge this gap, we propose an automated framework to adapt desktop-based visualizations for mobile screens. By systematically categorizing the operations involved in the adaptation process, we establish a multi-level design space. This space defines evolution rules spanning from the global topology level, through the reference frame level, down to the visual elements level. Guided by this theoretical framework, we developed Proteus, a large language model-driven multi-agent system that automatically parses online visualizations, predicts optimal transformation strategies within the design space, and generates equivalent, highly readable visualizations for mobile devices. Case studies and an in-depth user study with 12 participants demonstrate the effectiveness and usability of Proteus.