  We contribute MobileVisFixer, a new method to make visualizations more
mobile-friendly. Although mobile devices have become the primary means of
accessing information on the web, many existing visualizations are not
optimized for small screens and can lead to a frustrating user experience.
Currently, practitioners and researchers have to engage in a tedious and
time-consuming process to ensure that their designs scale to screens of
different sizes, and existing toolkits and libraries provide little support in
diagnosing and repairing issues. To address this challenge, MobileVisFixer
automates a mobile-friendly visualization re-design process with a novel
reinforcement learning framework. To inform the design of MobileVisFixer, we
first collected and analyzed SVG-based visualizations on the web, and
identified five common mobile-friendly issues. MobileVisFixer addresses four of
these issues on single-view Cartesian visualizations with linear or discrete
scales by a Markov Decision Process model that is both generalizable across
various visualizations and fully explainable. MobileVisFixer deconstructs
charts into declarative formats, and uses a greedy heuristic based on Policy
Gradient methods to find solutions to this difficult, multi-criteria
optimization problem in reasonable time. In addition, MobileVisFixer can be
easily extended with the incorporation of optimization algorithms for data
visualizations. Quantitative evaluation on two real-world datasets demonstrates
the effectiveness and generalizability of our method.
