Hello everyone, I am Tong, a PhD student from Shandong University.
the work I am going to present you today is CAST: authoring data driven chart animations.
Chart animations are effective in attracting our attention and maintaining engagement.
They can be found everywhere from leading journalism outlets or data visualization blogs.
Although, creating such a fantastic animation is difficult.
To help us crafting compelling animations,
some keyframe-based and template-based tools have been developed,
however, they are either tedious and time-consuming, or has limited expressiveness.
Besides interactive tools, we can use programming libraries like D3
to author highly sophisticated chart animations but it requires advanced programming skills.
In contrast, Canis employs a simpler syntax for creating expressive animations
with a series of animation units defined by a quadruple: selector, grouping, effects and timing.
However, it still requires programming.
Based on Canis, to facilitate understanding and authoring of chart animations.
CAST introduced the visual specification that explicitly represents chart animations with visual components,
and incorporates direct manipulation and auto completion to support easy and intuitive construction of chart animations.
Following the Gestalt law of common fate,
CAST's auto-completion ensures the perceptual grouping by analyzing the visually encoded data attributes.
Thompson et al characterize the design space of chart animations by 4 dimensions which CAST's design can be projected onto.
And Amini et al summerize a set of clip types which CAST takes into consideration when designing animation effects.
These are the design principles of CAST:
Provide explicit representation for chart animations.
Support easy construction.
And blend direct manipulation and configuration panel.
To represent chart animations, the visual specification of CAST uses four visual components
to describe the animation process, including: keyframe, keyframe group, timing bars, and effect.
CAST now supports 8 types of animation effects and 4 types of easing.
Here is a demo to show the interaction of CAST.
The input chart is a facet dot plot that depicts the characteristics of mushrooms samples.
Each dot in the chart corresponds to a single mushroom sample,
where the dot color indicates whether this sample is poisonous or not,
and its X and Y position encodes the attributes of odor and surface.
The target animation starts with the axis, legend, and title fading in together,
and then animates dots of each cell from the one on the bottom left to the top right one after another.
Meanwhile, there is a short delay between the animation of cells within the same row and a longer delay between rows.
To first animate the axis, legend, and title, I start by selecting and dragging them to the animation specification panel to create the first keyframe.
To specify the first cell of dots to animate, I create another keyframe for those four dots on the bottom left corner.
To decide the animation sequence from the first cell to all dots.
I select the next keyframe labeled "partition by Surface, then partition by Odor" from the list of keyframes provided by CAST.
To insert the delay bar between keyframes, I drag one of the keyframes away from its previous one.
Finally, I insert delay between keyframe groups in the same manner and extend it to around twice the length of delay between keyframes.
To facilitate easy construction of keyframes and sequences.
CAST incorporates data-driven auto completion for keyframe construction.
In this example, the user selected two dots which have different values in all three attributes,
the first candidate suggestion would be partition all marks according to three attributes and suggest one mark from each color in each facet,
however, these three attributes are encoded with two visual channels, position and color,
since position has higher visual effectiveness than color,
the suggestion of CAST would be partitioning only by the attributes encoded with position and suggesting one mark from each facet.
Here we use another example to explain the suggestion of animation sequence.
The selected mark unit and all marks are different in three data attributes.
To generate all possible animation sequences start with the selected marks,
CAST enumerates all possible sequences by iteratively permuting and filtering those attributes.
In here, the marks can first group by surface, then odor, and finally isedible to generate all keyframes,
and there are 5 more possible sequences according to the other 5 permutations.
And 2 more after filtered out isedible according to effectiveness ranking.
In the future, we would further extend the visual specification and interaction
to support multimodal interactions and the authoring of more animation types and staged transitions.
Thanks for your listening!