Counterpoint: Orchestrating Large-Scale Custom Animated Visualizations
Venkatesh Sivaraman - Carnegie Mellon University, Pittsburgh, United States
Frank Elavsky - Carnegie Mellon University, Pittsburgh, United States
Dominik Moritz - Carnegie Mellon University, Pittsburgh, United States
Adam Perer - Carnegie Mellon University, Pittsburgh, United States
Screen-reader Accessible PDF
Download camera-ready PDF
Download Supplemental Material
Room: Bayshore VI
2024-10-16T17:54:00ZGMT-0600Change your timezone on the schedule page
2024-10-16T17:54:00Z
Fast forward
Keywords
Visualization Toolkits, Animation, Web Interfaces, Software System Structures
Abstract
Custom animated visualizations of large, complex datasets are helpful across many domains, but they are hard to develop. Much of the difficulty arises from maintaining visualization state across many animated graphical elements that may change in number over time. We contribute Counterpoint, a framework for state management designed to help implement such visualizations in JavaScript. Using Counterpoint, developers can manipulate large collections of marks with reactive attributes that are easy to render in scalable APIs such as Canvas and WebGL. Counterpoint also helps orchestrate the entry and exit of graphical elements using the concept of a rendering "stage." Through a performance evaluation, we show that Counterpoint adds minimal overhead over current high-performance rendering techniques while simplifying implementation. We provide two examples of visualizations created using Counterpoint that illustrate its flexibility and compatibility with other visualization toolkits as well as considerations for users with disabilities. Counterpoint is open-source and available at https://github.com/cmudig/counterpoint.