IEEE VIS 2024 Content: Counterpoint: Orchestrating Large-Scale Custom Animated Visualizations

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

Room: Bayshore VI

2024-10-16T17:54:00ZGMT-0600Change your timezone on the schedule page
2024-10-16T17:54:00Z
Exemplar figure, described by caption below
Counterpoint is an open-source TypeScript framework that makes it easier to create animated visualizations, such as the ones shown here, using high-performance Web graphics frameworks like Canvas and WebGL.
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.