Understanding transitions in animated bar charts

Abstract

Animated bar charts have gained popularity on the Internet for their ability to display historical rankings through smooth animated transitions that clearly show the rankings over time. To investigate the usage scenarios of these charts, we analyzed the pop-up comments to understand viewers’ focus. Our findings suggest that animated transitions play a key role in viewers’ perception of ranking changes. We summarized various transition methods and evaluated their impact on user perception and memory through user experiments. We also conducted a detailed analysis of each transition method’s implementation. Our research sheds light on the effectiveness of different transition strategies for animated bar charts.

1 Introduction

Visualizing information is an effective way to disseminate data. Newspapers, magazines, and websites often use visual charts to help readers better understand abstract data. In the Internet era, where computation power and network bandwidth are no longer bottlenecks of information dissemination, a wider variety of dynamic designs have emerged for information visualization. One such design is animated charts, as demonstrated by Hans Rosling’s phenomenal presentation on the life expectancy and income of the world over 200 years. On video-sharing websites, animated information visualizations are plentiful.

One of the most popular animated information visualization designs is the animated bar chart. This design usually shows the changes in trends over a period of time, as displayed in Fig. 1, which includes screenshots of two popular animated bar charts. The visual graphs in the design are relatively simple, consisting of a set of bar charts aligned over time. The ranking changes are illustrated by the animated movement of the bars, making them visually appealing and easy to understand.

Figure 1

Popular animated ranked bar chart visuals on YouTube

While debates still exist about whether a general animation is more effective in conveying information than elaborately designed static visualizations, animations have been empirically confirmed to be powerful in depicting state transitions and structural narratives. Combined with animations, these bar charts are capable of disseminating information and guiding their audience to engage more deeply in the storytelling. By adding variation over time to classic bar charts, designers of visual graphs now have an entirely new and potentially spacious channel to encode information, providing even more space to work in.

For the audience, the contents presented in these visualizations become aesthetically pleasing while they obtain information.

In this work, we aim to delve deeper into the subject of animated bar charts, such as on Twitter, YouTube, and Bilibili. As shown in both the comments on these videos and the results of our user study, a significant change in value or rank is more likely to attract users. The complex stories presented in chronological order move away from author-guided narratives towards more user-driven narratives, resulting in a chart-reading experience that is closer to that of watching a movie. The story usually progresses smoothly, and significant changes are automatically highlighted.

Despite their popularity, there are no design guidelines for animated bar charts. Existing research on animation issues in user interface designs often targets specific interactive tasks [1–3] and cannot be used to guide the design of animated bar charts, which can be regarded as “casual infovis” [4] and usually does not consider any user task or support user interaction. Some websites, such as Flourish¹ and Hanabi,² offer tools to construct and configure animated bar charts. However, users still face various challenges in developing an appealing and effective animation, such as how to make the transitions of bar locations in animation easy to follow and comprehend.

This paper presents our efforts to improve understanding of how people use animated bar charts and explore ways to enhance their animated transitions. By surveying relevant videos from video-sharing websites and gathering user comments on them, we gain insight into the interests of the audience in such videos.

The quality of the animated transition strategy between adjacent moments plays a crucial role in the final result of animated bar charts. Although numerous studies have designed and evaluated animated transition strategies for animated scatterplots [5–8], the animated transition strategies for animated bar charts have not been fully explored. We surveyed existing videos on animated bar charts and summarized possible transition strategies. Then, we designed two user experiments to examine the effects of different transition methods on user memory retention in real-world use cases.

The main contributions of this work are summarized as follows:

• 1) We investigate the practical use of animated ranked bar charts and analyze people’s focus and attitudes through video pop-up comments.

• 2) We summarize different transition methods for visualizing bar changes in trends over time and their implementation.

• 3) We design and perform two user experiments to evaluate different animated transition strategies under various scenarios.

2 Related work

In this section, we discuss related work on animated ranked bar charts, including ranked visualization, animated transition, and multiple object tracking.

2.1 Ranking visualization

Horizontal ranked bar charts are one of the most common visualization designs for ranking interpretation. They differ from ordinary bar charts in that bar items are arranged according to their rankings on one attribute, rather than according to their descriptions as in ordinary bar charts. Other designs, such as scrolled bar charts [9], wrapped bars [10], packed bars,³ piled bars [11], and Zvinca plots [12], are derived from horizontal bar charts and visual designs such as TreeMap [13].

Mylavarapu et al. [9] surveyed different forms of ranked lists, developed a taxonomy of ranked-list visualization, and evaluated these ranked lists. Improvements to ranked lists often focus on ways to include more bars in the design. For example, piled bars overlap the bars to save space, while wrapped bars divide the display area into several smaller areas to draw horizontal bars. Different improvement methods also have different effects on the ability to compare the attribute value of different objects. For example, scrolled bar charts, which maintain the layout strategy of horizontal bar charts, are found to support the most accurate judgment on the relationship among objects, although more time is needed to complete the tasks.

While the above work tends to show static rankings and values, there is also work that explores how to show both ranking and value changes over time without animation. Okubo et al. [14] proposed juxtaposed horizontal bar charts with bands connecting bars representing the same item between adjacent charts. Based on ranking charts and typical line charts representing changes in value, Perin et al. [15] introduced a special type of line chart designed for visualizing the evolution of both rankings and values. There is also some work exploring visualizations that represent rankings over time [16–19], where less information needs to be represented for individual elements compared to those that represent both rankings and values, and this type of visualization can show more elements.

Despite the new forms of ranking visualization, horizontal bar charts invented by William Playfair in 1786 are still the most widely used. In some countries, elementary school children learn to use bar charts. No additional annotations are needed for people to understand this visualization, which creates the conditions for the popularity of animated bar charts. In this paper, we explore the design space of ranked bar charts and their corresponding animated representation.

2.2 Animated transition

Animated transition is a widely applied technique in various applications [20], such as facilitating smooth transitions in interactive information systems [21] and transformations between statistical graphics to enhance users’ understanding and exploration of the logic among different charts representing the same data [2, 6] or the data changes [21, 22].

Heer and Robertson [2] classified transitions into seven basic categories: view transformation, substrate transformation, filtering, ordering, timestep, visualization change, and data schema change. Complex transitions can be seen as composites of several basic transitions. Based on this classification, they proposed staged transitions that decompose transitions into several basic transitions, making them more accessible and easier to track. Inspired by this work, Kim and Heer [23] introduced Gemini, a grammar for animated transitions that enables users to create staged animations more easily. Several studies adopted staged animation strategies to visualize networks and sets, such as GraphDiaries [24], which aims to help users identify and comprehend changes in dynamic networks. Additionally, Crnovrsanin et al. [25] proposed staged animation for online dynamic networks, while Mizuno et al. [26] suggested staged animation between set diagrams by decomposing transitions into atomic changes. Our proposed cycle decomposition method in this paper also adopts the idea of staged animation and distinguishes changes in rankings from changes in data values temporally. Liu et al. [27] developed a spatial-constraint framework aimed at enhancing static visualization by enabling smooth transitions and supporting a wide range of tasks.

Various principles have been proposed to evaluate animated transitions. Teversky et al. [3] introduced the Apprehension Principle (“the structure and content of the external representation should be readily and accurately perceived and comprehended”) and the Congruence Principle (“the structure and content of the external representation should correspond to the desired structure and content of the internal representation”). Based on these principles, Heer and Robertson [2] proposed ten more specific principles, such as grouping similar transitions and minimizing occlusion. Chang and Ungar [1] suggested using cartoon-style motion. Although these principles can prevent poor designs, it is challenging to compare different animated transitions according to these principles because they are not quantifiable standards, and it is difficult to determine clearly whether an animated transition violates these principles. Some previous studies have proposed metrics to evaluate animated transition methods for multiple points in a two-dimensional plane. They referred to the results of the multiple object tracking (MOT) task in psychology and the principles of animation to summarize possible problems that could lead to poor effects and quantify them. Du et al. [5] and Wang et al. [6] proposed different metrics to evaluate animation strategies.

Additionally, some studies have evaluated animation from a cognitive perspective. For example, Veras and Collins [28] analyzed the accuracy of motion outlier detection in multivariate animated scatterplots. Ondov et al. [29] evaluated the efficiency of animated and static visualization for comparison tasks, while Zheng et al. [30] proposed a “focus + context” grouping technique to facilitate target tracking and trend identification in animated scatterplots.

Li et al. [31] studied animated ranked bar charts and presented a design that enhances animated bar charts with effective visual cues ahead of time. To our knowledge, no previous study has fully investigated this widely used form of visualization.

2.3 Multiple object tracking

One purpose of animated transitions in dynamic ranking is to make ranking changes between moments easy to track and notice. Therefore, the multiple object tracking (MOT) task in psychology is highly relevant to this work. The MOT task was proposed by Pylyshyn and Storm [32] for the study of visual attention. The experiment requires subjects to track one or more objects among several moving objects and point out the final position of the tracked objects at the end. Other researchers have improved the MOT task and explored the effects of different moving speeds, tasks, and object uniqueness. Pylyshyn and Storm [32] showed that subjects are able to track up to five objects in a field of ten objects. Further research has found that tracking ability is affected by object moving speed, spatial resolution of attention [33], and task demands [34]. Surface features can enhance tracking performance [35], while occlusion during transitions can decrease tracking performance, particularly when all object identities cannot be addressed during the position transition [36].

In our paper, we refer to these results to design animated transitions. We aim to control the number of moving objects at the same moment.

3 Understanding user interests

In this section, we explore the reasons behind the popularity of videos with animated bars. To gain an understanding of what viewers are interested in, we took two actions to collect data. First, we conducted a statistical analysis of the most-watched videos on three video platforms: YouTube,⁴ Bilibili,⁵ and Xigua.⁶ Second, we analyzed the user comments on Bilibili to gain insight into what users focus on when watching these videos.

3.1 Popular videos of ranked bars

We first collected videos that display animated rankings by conducting searches on various video platforms. Then, we analyzed the duration of the videos as well as the topics that they covered.

3.1.1 Collecting videos

We searched major video sites in both English and Chinese to collect information about animated top-ranked videos with a high number of views. The English video site we used was YouTube, while the Chinese sites we used were Bilibili and Xigua. To more accurately find videos with high view counts, we combined keyword searches and visits to popular bloggers. The Chinese keywords we used were visualization, ranking, top, most, and most popular, while the English keywords we used were ranking, most, top, and best. We sorted the results obtained from the search by the number of views and listed them in descending order. We also retrieved other popular videos with high view counts posted by the corresponding bloggers. In total, we collected 143 videos from YouTube (62), Bilibili (61), and Xigua (20). The average number of views for these videos on Bilibili, Xigua, and YouTube was 1.90 million, 0.72 million, and 6.59 million, respectively. Ninety-five percent of the popular videos are less than 10 minutes, with an average duration of 5 minutes.

Videos shorter than 5 minutes are less frequently viewed. This is probably because videos that are too short do not show enough attractive content.

3.1.2 Topic

To attract viewers and gain high view counts, the content of the video needs to be interesting and engaging. We categorized the topics of the collected videos into ten different categories, covering entertainment, culture, sports, society, population, technology, military, economy, transportation, and health.

The distribution of topics is presented in Fig. 2. Entertainment-related topics, such as animated ranked bar videos of songs, movies, and YouTubers, constitute the majority of the videos. Each platform has its unique characteristics. According to data from QuestMobile,⁷ 79.8% of Bilibili users are under 24 years old, while Xigua’s user base consists of 18.2% young people. This indicates that young people in China are more interested in entertainment topics, while middle-aged and elderly people focus on topics related to the economy, transportation, and the military. Overall, most viewers watch these videos for the purpose of entertainment and relaxation. However, analyzing users’ interests based solely on topics is limited, so we further analyzed the comments on the videos.

Figure 2

Proportion of videos with different topics

3.2 Comment data on videos

Viewers leave comments on a video through video-sharing platforms. In addition to regular comments left on a video page, Bilibili also allows comments to directly overlay on top of the video. Such pop-up comments allow us to analyze not only what viewers thought about the video but also which part of the video they talked about. Figure 3 demonstrates the distribution of the pop-up comments over time for a video of the animated bar chart. Clearly, certain parts of the video draw more attention from viewers.

Figure 3

Distribution of pop-ups with the show time of the video titled “Who are the uploaders with the fastest fan loss”. The largest spike corresponds to the sudden rise of an uploader’s number of lost fans

Due to the similarity of the comments in these videos, we selected 120,000 comments from four of them for analysis, and identified three major categories. We also conducted a sampling inspection of comments from other videos, and found that most of the comments fell into the following three categories.

• 1. Specific objects of interest to the viewer, such as the viewer’s country and the viewer’s favorite celebrity, and events related to these objects, such as topping the charts.

• 2. Specific historical moments, usually found in videos on economic, military, and social topics.

• 3. Ranking changes, such as one item jumping to the top of the chart, or one item disappearing from the chart.

3.3 Eye-tracking

In addition to analyzing comments, we also used an eye-tracking device to gain insight into viewers’ attention while they were watching videos of animated bars. We used an Eye Tribe⁸ device to measure changes in the point of gaze while participants were watching an animation on a 27 inch LCD display with a resolution of $3840 \times 2160$. The animation occupied an area of $2400 \times 1200$ in the center of the screen, and participants’ eyes were approximately 70 cm away from the screen. The eye-tracking device was calibrated for each participant. We measured the eye movements of four participants as they were watching an animated bar chart on the search index of 13 fruits⁹ from January 1 to March 1, 2020. This topic was not very popular, allowing us to better understand what viewers may pay attention to when presented with unfamiliar information.

We found that viewers often have different interests, as illustrated in Fig. 4. One viewer fixated on the top rows, while another scanned from top to bottom, trying to see everything. The remaining two viewers mainly focused on the changing part. For the latter two viewers, if multiple changes occurred in a short period of time, they focused on local neighbors and ignored far neighbors. It is worth noting that no viewer tracked a single target from start to finish.

Figure 4

Measured gaze movement of 4 participants. The point of gaze in the vertical direction is indicated by the orange line, and bar movement over time is indicated by colored lines in the background

4 Ranking transition

In our analysis of videos of animated bar charts, we discovered that viewers are particularly interested in the changes in rankings. However, viewers have a limited ability to track multiple targets at once [32], and multiple objects moving simultaneously can negatively impact their visual tracking ability. As a result, viewers may miss some of the ranking changes.

Therefore, it is crucial to display ranking changes in a clear and effective manner, especially when changes involve numerous items. Various methods have been proposed to reduce the number of bars exchanged simultaneously, with many utilizing temporal interpolation of the data. Another possible approach is staged animation, where complex multiple object changes are broken down into several stages [2]. However, there has been no comprehensive summary of these methods published to date.

In this section, we begin by defining the problem of displaying ranking changes. We then discuss two approaches for addressing this problem: temporal interpolation methods in Sect. 4.2, and staged animation method based on cycle decomposition in Sect. 4.3.

4.1 Problem definition

Ranking transition can be defined as a problem of interpolating intermediate visual content based on two given inputs: one as the start point and the other as the end point, which we refer to as keyframes. Interpolation is the process of generating intermediate frames to connect two keyframes so that viewers can correspond objects in adjacent keyframes.

While a frame can contain many objects, only elements affected by rankings are relevant to interpolation. Other items, such as chart title and axes, are usually fixed and require no interpolation. Therefore, we address the problem by defining the ranking-relevant elements.

A video clip contains multiple frames, and all frames form a set F. Individual frames can be represented as

$$ f_{i}={i, E_{i}}, $$

(1)

where i is the sequence number of the frame, and $E_{i}$ is the set of item elements contained in the frame. All elements in an element set, $E_{i}$, can be written as

$$ e_{i,j}={id, value, ranking}. $$

(2)

Here, id, $value$, and $ranking$ represent the identification, value, and ranking of the element, respectively. The input consists of a set of n keyframes, $F_{0}$, $F_{1}$, … $F_{n-1}$. The function of a ranking transition algorithm is to generate a set of intermediate frames between $F_{k-1}$ and $F_{k}$, where $1< k<(n-1)$, by interpolating the values and ranks of all elements involved in both keyframes.

Using the keyframes and interpolated frames, a smooth animation can be created. For each frame, the values and rankings of all elements are converted to visual representations using the same mapping method, such as bar width for element value and bar position for element ranking. The animation is then displayed by showing the rendered results frame by frame, in order, with a given frame rate.

Typically, the approaches to interpolating element value and ranking differ from each other. Interpolation of element values is often linear across all keyframes, while interpolation of element rankings is non-linear, as humans prefer slow-in/slow-out motion [7, 37]. If the above interpolation is performed directly between adjacent keyframes, we consider it a baseline method as shown in Fig. 5, which is the most basic method and does not require other data processing techniques.

Figure 5

Illustration of the baseline method

4.2 Temporal interpolation

The current mainstream approach is to interpolate the data to reduce the number of elements moving simultaneously in one transition. This can be achieved through frame insertion or instant swap depending on whether the interpolated data are further processed.

4.2.1 Frame insertion

One common solution¹⁰ is to insert frames by temporally interpolating the data (as demonstrated in Fig. 6). There are various methods of interpolation available, but for simplicity, we will focus on linear interpolation in the following discussion.

Figure 6

Illustration of the frame insertion method. Data and keyframes are the same as Fig. 5

Although this method is simple and effective in reducing the number of bars moving simultaneously, it has several disadvantages:

• 1) The duration of the swap animation and the number of insertions are limited. For a given total duration, the more frames are inserted, the shorter the transition duration between frames, and the faster the bars move. If too many frames are inserted, the ranking exchange may end before the viewer can perceive it.

• 2) Data with significant ranking changes require more frames to be inserted, while data with fewer ranking changes do not require frames to be inserted. Different data require different numbers of insertions, and the designers of the animation need to experiment with different numbers of insertions.

• 3) Interpolation of data can introduce additional information. The data may not necessarily change according to the pre-defined interpolation method; for example, the values of elements may have actually grown exponentially but are linearly interpolated. In some cases, there may be ranking swaps that do not exist in actual situations (Fig. 7).

  Figure 7

  

  One example of the frame insertion method can be seen in Fig. 5, where the data and keyframes are different from the previous example. After inserting 10 frames, there are a total of 6 swaps in (a), which can be difficult for the viewer to remember. The animation without frame insertion, as shown in (b), displays a simpler pattern of ranking exchanges, despite the fact that there are more elements moving at the same time. Additionally, the order of exchange in (c) may not necessarily match the actual facts, as it is based solely on the interpolated data

4.2.2 Instant swap

A new method has been implemented¹¹to address the limitations of the frame insertion method, which involves interpolating data to obtain the exact time of each ranking exchange, allowing for instant swap animations with unbound numbers of inserted frames and swap duration. This method is referred to as instant swap in this paper. Figure 8 (b) demonstrates the intensive interpolation required to obtain the exact time of each ranking exchange. Once the exact time is obtained, the swap animation of the elements is calculated based on a pre-defined swap duration.

Figure 8

Illustration of the instant swap method, data and keyframes are the same as Fig. 5. (a) Bar width (value) over time with linear interpolation; (b) Extracted ranking over time; (c) Ranking over time with extended swap duration

There are various methods for calculating the ranking swap animation. Anichart.js¹² smooths the curve in Fig. 8 (b) to obtain an animation path similar to that in Fig. 8 (c), while Flourish¹¹ calculates swap animations in real time when the ranking exchange occurs. In interactive ranking animations generated by Flourish, the ranking of elements does not closely follow the progress when the user drags the progress bar. Instead, there is a delay, and the ranking swap animation still takes place for a fixed duration, which allows the user to better track the elements. Compared to the frame insertion method, the ranking and values are more consistent in the instant swap animation. In most cases, viewers can observe a gradual decrease in the width of the bars from top to bottom. However, the instant swap method does not address the issue of extra information introduced by interpolation. The situation depicted in Fig. 7 (c) almost certainly occurs due to intensive data interpolation.

In many videos that utilize the instant swap method, we have observed that the swap duration is often set to a short time interval. This results in relatively sparse swaps and fewer conflicts between swaps. While longer swap durations can aid in observation, as the swap duration increases and swaps become more frequent, conflicts between swaps may arise, particularly when a swap starts before the previous swap has ended. In such situations, the previous swap may be directly interrupted, or the two swaps may be merged. Direct interruptions can be visually jarring and disrupt the overall smoothness of the animation. When multiple adjacent swaps are merged, undesired bar movements can occur. While merging two swaps that involve the same elements may not cause significant disturbances, most adjacent swaps involve different elements, and merging them may result in complicated and undesired bar movements.

4.3 Cycle decomposition

The cycle decomposition method generates staged animation that separates the changes in rankings from those in values. Unlike other methods, it does not interpolate the data, which may introduce ranking swaps that do not exist in the data.

To avoid interference caused by simultaneous changes in bar width and position, the two types of changes are shown in two stages. During the first stage, only the width of the bars changes, allowing viewers to focus on changes in values. During the second stage, ranking changes occur while the widths of all bars remain consistent.

The value-change stage is simple, and a direct linear interpolation of the values is adopted. In the ranking-change stage, ranking swaps involving multiple elements changing at the same time are decomposed. The exchange of rankings can essentially be seen as a permutation.

During the value-change stage, a linear interpolation of values is adopted, which is a straightforward process. However, during the ranking-change stage, the permutation of rankings involving multiple elements changing at the same time is decomposed into cycles. A permutation refers to a bijection of a finite set that maps the set to itself. If a permutation p rearranges k elements in ${1, 2, \ldots, n}$ such that $p(i_{1}) = i_{2}$, $p(i_{2}) = i_{3}$, … , $p(i_{k-1}) = i_{k}$, and $p(i_{k}) = i_{1}$, then p is a k-order cycle, represented as $(i_{1}i_{2}\ldots i_{k})$. If cycles $p_{1} = (i_{1}i_{2}\ldots i_{k})$ and $p_{2} = (j_{1}j_{2}\ldots j_{s})$ have no common elements, i.e., ${i_{1}, i_{2}, \ldots, i_{k}}\cap{j_{1}, j_{2}, \ldots, j_{s}} = \oslash$, then $p_{1}$ and $p_{2}$ are disjoint. Any permutation can be decomposed into one or more disjoint cycles, and the representation is unique [38]. For example, the permutation 3,4,6,2,5,1 could be written as (136)(24). In cycle decomposition, the ranking-change process is demonstrated in the form of cycles. The specific steps are as follows:

• 1) Pre-processing of ranked objects: Since order changes can only be converted to the replacement problem when the objects at time $t_{0}$ and $t_{1}$ are identical, new entry or exit objects need to be sorted according to their relative order at time $t_{1}$ or $t_{0}$, respectively.

• 2) Cycle construction: To extract objects involved in ranking changes to construct one or multiple disjoint cycles.

• 3) Cycle decomposition: For each cycle, the position transformation of objects is performed in order from top to bottom, based on the ranking of the cycle leader at time $t_{0}$, to decompose the ranking change between $t_{0}$ and $t_{1}$. If the cycle involves multiple objects and complex transpositions, it is broken down into smaller sub-cycles by following these four steps.

  Step 1: Calculate the number of objects whose rankings are rising and falling separately. Select the direction with the smaller number as the decomposition direction. If the numbers are the same, select the rising direction.

  Step 2: Select the object S that only has a ranking change in the decomposition direction. If the ranking is rising in the decomposition direction, select the top-ranked rising object at $t_{0}$. If the ranking is falling, select the lowest ranked falling object at $t_{0}$.

  Step 3: Assume that S is ranked $r_{i}$ at $t_{0}$ and $r_{f}$ at $t_{1}$. The objects ranked from $r_{i}$ to $r_{f}$ at $t_{0}$ in the cycle (excluding S) “passively” move in the opposite direction of the decomposition direction as a whole, and some objects may need to skip objects with the same ranking.

  Step 4: Repeat Steps 2 and 3 for the remaining objects in the cycle until the decomposition is complete.

The result of cycle decomposition is shown in Fig. 9. The original cycle involving four elements at the same time is divided into two cycles, one involving two elements and the other involving three elements. In the case shown here, the number of elements moving simultaneously is reduced from 4 to 3, compared with the basic method. It can bring benefits when the number of elements moving simultaneously exceeds a viewer’s ability to track them.

Figure 9

Illustration of the cycle decomposition method, and data and keyframes are the same as in Fig. 5. The animated duration between keyframe 1 in Fig. 5 (a) and inserted frame 1 demonstrates the change in data value. The other two animated durations demonstrate the decomposed ranking exchange

Animated bar charts often consist of multiple keyframes, and the number of ranking changes between frames can vary. For animations generated by cycle decomposition, it is challenging to set a fixed time between adjacent keyframes, and time is assigned based on the number of inserted frames. The animation between adjacent keyframes contains one value change transition and zero to multiple ranking change transitions, for which a fixed time duration is used (Fig. 10). The number of transitions of different types is added up, and the duration is calculated based on the pre-defined ratio of value transition to ranking transition and the total time. This approach allocates more time to the parts that change drastically while keeping the total time under control.

Figure 10

Transition time of cycle decomposition and other methods

The disadvantage of cycle decomposition is that it produces an incoherent animation, where the length of bars changes first, then stops, followed by the swap of bars. Although the number of elements swapped simultaneously is reduced, the overall number of swaps is increased, and further experiments are needed to determine whether this helps the user’s observation and memory.

5 Evaluation

In this section, we present our research on evaluating the baseline, the cycle decomposition, and the instant swap methods.

Despite having different visual appearances, both cycle decomposition and instant swap methods can reduce the number of elements exchanged simultaneously, which may help viewers follow their target more easily.

The instant swap method generates animations in which the bar ranking closely follows the change in bar value. However, it breaks down the ranking swap into too many stages, potentially causing memory overload for the viewer.

In contrast, the cycle decomposition method temporally separates the value change and the ranking change into two transition stages and decomposes complex ranking permutations. During the value change period, the bar ranking remains constant, allowing viewers to more easily observe the value change. However, temporal mismatches between bar rank and value may occur during the animation under cycle decomposition, which may not be aesthetically pleasing.

Although the above-mentioned methods reduce the number of elements exchanged simultaneously, the duration of exchange also decreases. This raises the question of whether these methods actually improve upon the baseline approach. To evaluate the effectiveness of the three methods, we conducted two experiments.

In Experiment One, the video was generated using data consisting of 31 keyframes, with a duration of 1 minute. The primary focus of this experiment is on the long-term effects of different animation methods, and it is more representative of actual videos of animated bars. In Experiment Two, the primary focus is on the short-term effects of the animation methods, and the animation used consists of only two keyframes. This type of experiment is more suitable for scenarios where users need to reorder a list or make quick decisions based on ranking changes. Both experiments were conducted as between-subjects studies.

5.1 Continuous transitions

In this experiment, we aim to assess the impact of different types of transitions on higher levels of cognition, specifically the understanding of a video by viewers.

5.1.1 Task

Participants were asked to watch a video featuring animated bar charts and then recall the facts presented in the video. Task performance was measured by the number of facts participants could recall.

The ranking transition method used in the video could potentially affect viewer performance. If a video is presented in a less cognitively challenging way, then viewers are better able to focus their cognitive resources on the video content and understand it more effectively. On the other hand, if a video contains too much dynamic information, viewers may become too distracted to understand and remember the content.

This task differs from the MOT task, which has been used in various research on animation design [2, 7, 8]. We did not choose an MOT-style task due to the following considerations.

• 1) Target tracking is not the primary task when viewers watch animated bar charts. While it is important during ranking swaps, in practice animated bar charts involve many swaps and dozens or even hundreds of time steps, and viewers may switch their focus between different elements. Thus, forcing viewers to track certain targets deviates from real-world tasks.

• 2) The nature of objects in animated bar charts differs from that of objects in interactive animation designs. In evaluations with the MOT tasks, there is no obvious distinction between the objects in the animation, while in animated bar charts, bars are typically labeled with text or icons and have distinct colors. If the targets are specified at the beginning, viewers can easily remember the labels of the targets, and the methods being evaluated have already reduced the difficulty of MOT by reducing the number of simultaneously moving objects. Removing labels and distinctive colors to make the task more difficult would further deviate from the actual application scenario.

5.1.2 Apparatus and participants

We developed a web-based application to conduct the experiment. The application includes multiple pages that introduce the task and collect the necessary data from participants.

To ensure a neutral topic for the experiment, we selected a dataset on the search index of 12 fruits between January 1 and January 31, 2020. We chose fruits as the topic since user preferences are less likely to influence the results compared to topics such as celebrities, movies, or economics. The experiment included three video clips, each rendered with a different ranking transition method: baseline, instant swap, and cycle decomposition. All videos were approximately 1 minute in length and contained 10 visible bars.

For the baseline and the instant swap methods, we set the duration between keyframes to 2 seconds (common setting of online videos) and the swap duration to 0.5 seconds in order to avoid swap conflicts. For the cycle decomposition method, we maintained a ratio of 2:1 for the ranking swap duration and value change duration, resulting in a duration of 1 second for ranking swaps and 0.5 seconds for value changes (Fig. 11).

Figure 11

Ranking over time of the fruit data with the cycle decomposition method. Only top 10 fruits will be seen

The web application was distributed through various social media platforms to recruit participants for the study. In order to control the context in which the videos were viewed, we restricted the use of smartphones for the task. The web application was designed to detect a participant’s screen aspect ratio and only allowed the use of smartphones in landscape mode. Several mechanisms were implemented in the application to prevent participants from repeating the task or going back to previous pages, which could potentially lead to increased accuracy in their responses.

The data collected consisted of 92 valid responses. The participants included 41 females and 51 males, with ages ranging from 20 to 58. Each of the three groups had comparable numbers, with 31 participants in the baseline method group, 30 in the instant swap group, and 31 in the cycle decomposition group.

5.1.3 Procedure

The procedure is largely managed by the web application. When a participant opens the experiment link on their mobile phone, the application displays a page with a task description, informing the participant that the task involves understanding a video. An example video is provided to demonstrate the type of information expected. The participant is then asked to select a nickname, which is used to identify him or her and to test his or her ability to input information, as the task requires recalling facts. The next page displays the video for the experiment.

The system randomly selects one of three available videos for the participant to view. The video can only be played once, and the participant is unable to skip or rewind the video. This is to ensure that all participants have the same viewing experience.

After the video ends, the participant clicks “Next” to proceed to the task page, where he or she is asked to recall as many facts from the video as possible with as much accuracy as possible. A text field is provided for the participant to write down his or her recalled facts, and there is no time limit for this task.

Finally, a survey page is presented to the participant with questions related to his or her frequency of watching videos like this and his or her opinions on this type of visualization.

5.1.4 Results

We reviewed the participants’ submitted responses and only included correct facts for analysis. Figure 12 displays the distribution of fact counts for the different treatments. The results of a Mann-Whitney U test indicate that both the baseline and the cycle decomposition methods resulted in significantly better fact recall compared to the instant swap method ($p <0.05$).

Figure 12

Distribution of the number of valid facts

We also analyzed the word count of the recalled facts and the recall time of the participants. If the number of valid facts was 0, the word count of the facts was recorded as 0. The mean word count of submitted facts was 36.6 with a S.D. of 30.4 for the baseline group, 16.4 with a S.D. of 20.7 for the instant swap group, and 32.1 with a S.D. of 33.4 for the cycle decomposition group. A Mann-Whitney U test showed that the videos rendered with the baseline and the cycle decomposition methods allowed the participants to write more words than the videos rendered with the instant swap method ($p <0.05$).

The mean recall time was 88.0 s with a S.D. of 64.1 for the baseline group, 57.5 s with a S.D. of 51.2 for the instant swap group, and 83.8 s with a S.D. of 63.3 for the cycle decomposition group. A Mann-Whitney U test showed that the baseline and the cycle decomposition methods had significantly longer recall time than the instant swap method ($p <0.05$).

Therefore, we can conclude that at a significance level of 0.05, the recall time, the number of facts, and the number of words for the instant swap group were less than those for the baseline and the cycle decomposition groups. Participants in the baseline and the cycle decomposition groups observed and remembered more content, invested more time in writing their observations, and submitted more facts in terms of number and word count. This can indicate that animations generated with the baseline and the cycle decomposition methods leave a deeper impression on the viewer than those with the instant swap method.

Results from the survey revealed diverse attitudes towards this form of visualization. As shown in Table 1, although the majority of participants found the style attractive, a significant number of people expressed a lack of enthusiasm towards it.

Table 1 Participants’ familiarity with and attitudes towards animated bar charts

For participants who had seen animated charts once or multiple times, the majority found the animated bar graphs attractive. Only 21% of the participants who had seen animated charts multiple times found the visualization unattractive.

However, for those who had never seen this type of visualization before, half of them found it unattractive. Some participants commented that “the information extraction is complicated and it’s hard to capture the key information”. The other half, who liked the style, regarded the visualization as “intuitive” and “novel”.

5.2 Single transition

In this experiment, we want to test the effect of different animated transition methods when only single-step animation ranking is displayed.

5.2.1 Task

We asked participants to watch an animated transition, which shows ranking change of bars, and then recall how the ranking changed. Task performance is measured by the number of correct ranking changes answered by participants. More specifically, the names of the elements involved in the animation range from A to J and are sorted alphabetically at first, so that the user only needs to give the order of the endings.

5.2.2 Apparatus and participants

We implemented a web application similar to Sect. 5.1.2.

The dataset used in this experiment contains 10 items labeled from A to J. In the first keyframe, their values range from 10 to 1 and are ordered in descending order, resulting in the ranking of items from A to J being 1 to 10. In the second keyframe, the items’ ranking from 1 to 10 are J, A, C, G, D, B, F, I, H, and E, with their respective values ranging from 10 to 1.

The total duration of all methods tested was 10 seconds. The instant swap method had a swap duration of 0.5 seconds, while the cycle decomposition method had a ranking swap duration of 2.8 seconds and a value change duration of 1.4 seconds (Fig. 13). All bars were filled with grey, which differed from the first experiment.

Figure 13

Ranking (bar position) over time with the 3 transition methods tested

The remaining experimental settings were identical to those described in Sect. 5.1.2. The two experiments were conducted 7 months apart.

In total, 109 valid responses were collected, with 46 female participants and 60 male participants, and 3 participants who preferred not to disclose their gender. The participants’ ages ranged from 18 to 41 years old, with comparable group sizes of 31 for the baseline method, 39 for the instant swap method, and 39 for the cycle decomposition method.

5.2.3 Procedure

The procedure is similar to Sect. 5.1.3. There are some differences:

• 1) The participant is asked to type in his/her gender and age only, and there is no text field for nickname.

• 2) 0.5 s after the video ends, the participant is brought to the task page. The page contains 10 vertically arranged bars labeled A through J. These bars are of equal length, and participants are asked to rank the bars by dragging them to reproduce the ranking of the bars at the end of the video. The participant confirms and the next page is displayed, and there is no time limit for the task.

• 3) There is no survey page though the participant can type in feedback on the last page.

5.2.4 Results

We counted the number of correct rankings submitted by the participants, i.e., the number of elements whose ranking matches the final ranking. The results are summarized in Fig. 14. The number of correct rankings is 1 if the participant does not modify the result on the task page, and the corresponding submitted ranking is A, B, C, D, E, F, G, H, I, and J.

Figure 14

Distribution of correct ranking count of 3 methods. “No Change” indicates that the participant did not modify the ranking of the bars on the task page and the submitted item with ranking from 1 to 10 is A, B, C, D, E, F, G, H, I, and J

Taking into account the “No change” participants, the mean correct count for the baseline, the instant swap, and the cycle decomposition methods is 3.39, 3.26, and 2.13, respectively, with standard deviations of 1.68, 1.82, and 1.68, respectively. Without those participants, the mean counts are 3.55, 3.93, and 2.91, respectively. A Mann-Whitney U test shows that the correct count of the baseline method is significantly greater than that of the cycle decomposition method ($p <0.05$) whether or not “No change” participants are included in the analysis.

It is important to note that there are some discrepancies between the results of the first and second experiments. Feedback from the second experiment revealed that 13% of the participants reported difficulty in recalling the corresponding rankings due to unclear task instructions. It is possible that the animated information presented in the task overloaded the participants’ short-term memory capacity, leaving limited cognitive resources for the main task of recalling the rankings. Additionally, the use of letters as labels without any additional information to aid memory recall may have contributed to the difficulty. It is important to consider these factors in designing similar experiments in the future to ensure accurate and reliable results.

6 Discussion

We discuss the limitations and future directions of this work.

• 1) Swap duration Different methods yield varying swap durations: with the baseline and the cycle decomposition methods exhibiting longer durations than the instant swap method. The first experiment’s results indicate that both the baseline and the cycle decomposition methods are more efficacious in aiding participants’ retention and recall of information from the animated bar charts, as manifested by higher scores in correctly recalled facts and greater word counts for these groups. Intriguingly, neither of the two proposed enhancements surpass the effectiveness of the baseline method. This could be ascribed to the disparate swap durations engendered by the various methods, with the instant swap method featuring the shortest swap duration. Such high-speed movement may have exceeded participants’ tracking abilities, resulting in missed information. Furthermore, prior research has posited that overly rapid motion can have deleterious effects on object tracking [33].

• 2) Predictability: Our method facilitates better prediction of when ranking changes may occur. The two-stage changes employed in our method can be readily discerned, enabling individuals to anticipate what is occurring and what will follow. As bars increase in size, observers know that no ranking change has transpired, allowing them to concentrate on the patterns of value alterations. As bars cease to increase in size, they can expect positional swapping to ensue. In contrast, the instant swap approach is less predictable due to the conflation of two types of changes.

• 3) Value Ranking Consistency: The instant swap method offers greater consistency between values and rankings compared to the baseline and the the cycle decomposition methods. Specifically, in the instant swap animation, the bar width predominantly decreases from top to bottom. Conversely, the cycle decomposition method initially depicts value changes followed by ranking swaps, resulting in potential inconsistencies between the value and the ranking. Nonetheless, these inconsistencies may serve as visual cues to facilitate users’ comprehension of the changes.

7 Conclusion

In this paper, our main focus is on the comprehension of the transition of animated bar charts. We investigated popular videos of animated bars and analyzed viewers’ comments. We also summarized various algorithms for ranking transition, and the experimental results demonstrated the different effects of these methods on users’ observation and memory.

Moving forward, we plan to extend our research in several ways. First, we aim to deepen our understanding of viewer needs by conducting more in-depth analyses of the comment data. With over 120,000 pop-up comments, we can leverage machine learning tools to analyze viewers’ sentiments and relate these sentiments to the visual content. Second, we plan to conduct additional user experiments to further explore the differences in the transition methods under various conditions.