f

Open Source on Github

The ubiquity of digital displays lifts the confines of static visualization. This homepage introduces Data-driven Dynamic Effect as a natural step forward, to bring static visualization to life.

Marching Ants

Borrowing the idea from marching ants selection of computer graphics programs, marching ants is extended to a dynamics where the patterns shift along a path at certain speed for an illusion of ants marching. Tapping to our daily experience, marching ants provides direct perception of direction and speed. With rich design variation, it is also capable of indicating semantic message. As an covering over visual elements, marching ants dynamic is orthogonal to other visual channels, except potential interference when there is wispy texture in visualization.

Geometry Deformation

Geometry deformation applies potentially exaggerated spatial modifications to the shape or placement of visual elements, at a certain pace. The joint transformation of individual elements can implicitly convey the existence of groups and relationships among parties. Beyond indication of such properties, numerical information can be encoded by adjusting the extent of applied deformation, from subtle to extreme. Since GD shifts or rescales elements, it may interfere with existing visual channels that utilize element size and geometric shapes to express certain attributes.

Gradual Appearance

Gradual appearance refers to a set of effects that apply repetitive changes to the visual channels of a proxy, such as brightness, saturation, color and border emphasis. These effects deliberately operate at a low rate, which is less than continuous (50 frames per second), so as to attract attention to the discontinuous change. Activating appearance effects (e.g., blinking, flickering) in coherent phases creates a sense of cohort among elements belonging to the same phase. An effect applied directly onto the element may cause more interference with the element's original color or texture, as opposed to one applied around the element (e.g., border).

Gallery

We present a few examples for static visualizations that were enhanced with our dynamic effects. Among those examples, Infographics can be enhanced with dynamic effects highlighting implicit information to make the visualization speak for itself. Conventional charts (e.g., boxplot, bar chart, etc.) are a tried-and-true tool that makes good use of static visual cues to display information. We demonstrate ways to extend static charts to dynamic ones using dynamic effects, to promote better understanding or provide more information. Please click thumbnails to check the dynamic version for details : )

Publication

Enhancing Static Charts with Data-driven Animations
Min Lu, Noa Fish, Shuaiqi Wang, Joel Lanir, Daniel Cohen-Or, and Hui Huang
IEEE Transactions on Visualization and Computer Graphics (to be appeared)
PDF (Pre-print) (2.2 MB)
Copyright © Activate Static Visual Charts

Marching Ants + Circos
A circos enhanced with MA over top its ribbons. The speed of the ants in this case corresponds to the capacity of each ribbon, such that a larger capacity induces a faster movement. While the capacity is also visualized by the width of the ribbon, minute differences between ribbons are easier to discern by comparing ant speed rather than ribbon width.

Marching Ants + Boxplot
A boxplot with an added MA effect running up and down the top and bottom boxes of each plot in different speeds, in order to model the compactness of the distribution.

Geometry Deformation + Graph
GD effects to emphasize the existence of cliques and their magnitudes. The deformation bandwidth is driven by numerical attributes of the cliques, e.g., clique size. This creates a visual connection between the perception of clique size and the illusion of pumping/contraction.

Gradual Appearance + Circle Packing
Given a hierarchy-based data, nodes in the circular packing diagram are wrapped with a blinking visual proxy whose blinking offset is driven by the level (depth) of the node in the tree.

Geometry Deformation + Matrix
GD effects to emphasize the existence of cliques and their magnitudes. The deformation bandwidth is driven by numerical attributes of the cliques, e.g., clique size. This creates a visual connection between the perception of clique size and the illusion of pumping/contraction.

Marching Ants + Migration Flow
A dynamic version of circos of immigration flow in Charles Joseph Minard’s Immigration Flow map. The enhancement with intuitive dynamic effects achieves a multiplier effect, such as strengthened information augmentation, efficient attention attraction, vivid data representation, etc.

Marching Ants + Mind Map
Marching Ants is laid over a mind map, and the depth of branch attribute determines the speed of the ants. The deeper the branch, the faster its overlaid ants will march.

Marching Ants + Wheat Chart
Marching Ants effect is placed over the space stretching between ’wheat’ and ’wage’, with a ’$’ sign serving as the ant to represent the economic effort to reach from ’wage’ to ’wheat’. The speed of the ant is driven by the ratio between ’wage’ and price of ’wheat’, such that the faster it marches, the smaller the effort is. The fastest moving element indicates that during the 18th century the proportion of ’wheat’ price to mechanical labor was the smallest.

Gradual Appearance + Tree Map
Given a hierarchy-based data, nodes in the tree are wrapped with a blinking visual proxy whose blinking offset is driven by the level (depth) of the node in the tree.