Animated Graph Transitions for Data Visualization
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing graph presentation technologies fail to effectively illustrate the relationship between data for different time periods or dimensions, making it difficult for users to understand relative values and transitions between different data views.
Innovation Solution
The method involves generating and presenting animated graphs that transition from a heat map representing multiple data dimensions to a bar graph representing a single data dimension, by determining the final location and size of visual graph elements within a geometric shape, and adjusting their color and size to reflect the sum of values, allowing for a smooth and aesthetically pleasing visualization of data changes.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Loss of information
If static graph presentations are used to display data for different time periods, then the presentation is simple and easy to implement, but the ability to illustrate relationships and transitions between data dimensions is poor
Solution Approach 1:
The patent applies dynamics by transitioning from static graph presentations to animated transitions. The visual graph elements dynamically move from their positions in the first graph (heat map) to their final positions in the second graph (bar graph), and their colors dynamically change to reflect aggregated values. This dynamic presentation preserves data relationship information while maintaining reasonable implementation complexity.
Solution Approach 2:
The patent uses color changes as a key mechanism to convey data relationships. Visual graph elements change colors during the transition to indicate aggregation and summation of values across different time periods. This color transformation helps users understand the relationship between individual data points and aggregated totals without requiring complex visual encodings.
2Loss of information
If animated transitions between graphs are implemented to show data relationships, then the illustration of relative values and transitions improves, but the implementation complexity and computational requirements increase
Solution Approach 1:
The patent segments the animation into discrete, manageable components: individual visual graph elements are animated independently from their first graph to the second graph. Each element's position and color are calculated and animated separately, allowing for efficient rendering and reduced computational complexity compared to animating the entire graph as a single unit.
Solution Approach 2:
The patent uses copying by creating visual graph elements in the second graph that correspond to elements in the first graph. These copied elements are then animated to their final positions and configured with appropriate colors and sizes. This approach simplifies the animation process by working with individual element copies rather than transforming the entire graph structure.
3Ease of operation
If visual graph elements are animated from heat map to bar graph representation, then the understanding of relative contributions improves, but the transition time and user waiting period increase
Solution Approach 1:
The patent applies partial action by animating only the necessary visual graph elements that need to transition between graphs, rather than animating all elements or performing unnecessary intermediate steps. The animation focuses on moving elements from their source positions to their destination positions with color changes, avoiding excessive animation sequences that would increase transition time without adding value to data interpretation.
Data Source
AI summary
Methods, systems, and apparatus, including computer programs encoded on a computer storage medium, for generating and presenting animated graphs. In one aspect, a method includes updating a user interface to present a first graph representing a set of data corresponding to a time period. The first graph includes a heat map that visually depicts different values of the data for different sub-time periods of the time period using different colors. The heat map includes visual graph elements that each represents a respective sub-time period and depicts a particular color based on the value for the respective sub-time period. The user interface is updated to replace the presentation of the first graph with a presentation of a second graph representing a sum of the different values over the time period. The updating includes animating a transition between the presentation of the first graph and the presentation of the second graph.