A Case Study in Animating Data Visualization Transitions

reactweek.nyc @reactweek

Aucher Serr - A Case Study in Animating Data Visualization Transitions | React Week NY ‘19

This talk will be an exploration into the tricky, sticky, jittery world of animations within a React ecosystem. At Two-N, we spend our time developing ways to make data-driven graphics more intuitive and engaging. One of our strategies for doing this is by thinking (a lot) about how our visualizations behave as they transition between defined states. This talk will focus primarily on how we approach animating these elusive in-between regions. Specifically, this talk will be a deep dive into an animated transition we revisited recently for our elastic tooltip component. We will walk through our design considerations for creating a beautiful yet flexible reusable component, share our attempts (and failures) in implementing our desired behavior, and lay out how we ultimately learned to orchestrate updates within the React Lifecycle using a combination of CSS Transitions, RequestAnimationFrame and React Transition Groups. Aiming to bridge the gap between idealized transition designs and their successful implementation, this talk will highlight our stickiest challenges as well as how we ultimately solved for them. We will also reveal our best practices for creating seamless data-driven animations and share our most useful takeaways from the ‘in-between.’

Aucher is a design technologist interested in how to make data more accessible and beautiful. Her education includes a BA in Cognitive Science and Philosophy (from UC Berkeley), and an MS in Data Visualization (from Parsons School of Design). She draws on her background to develop intuitive and information-rich displays that can communicate complex phenomena simply. @aucher_serr