How AntV Engineers Design and Build Visual Narrative Engines
This article explains the concept of visual narrative, why it matters for multi‑dimensional data insight, and details AntV's design and implementation approach—including declarative chart definitions, timeline playback, React‑like components, and animation phases—to create interactive data stories.
What Is Visual Narrative
Visual narrative is a hot topic in data visualization that combines dynamic effects and auditory cues to guide user attention, and interactive elements to let users explore and discover insights.
Why Build Visual Narratives
Visualization aims to turn abstract data into insights for decision‑making. Visual narratives extend this to multi‑dimensional data, helping users quickly form insights and make decisions, making them an effective solution.
Design and Implementation of Visual Narratives
After reviewing several examples, AntV’s approach can be broken down into two core steps:
Declarative chart definition – a simple way to describe charts.
Timeline playback – chaining charts together for continuous playback.
These steps form the backbone of any visual narrative case.
Declarative Chart Definition
Based on case analysis, AntV created a declarative chart definition system that makes chart creation straightforward.
Timeline Chart Playback
With charts defined, they are linked together to play sequentially via a Timeline controller.
Static Cards and Data Videos
Data videos are treated as a series of data frames, each representing abstract data that maps to a visual component; playing these components sequentially creates the video effect.
Components & Changes
Components
AntV borrowed React’s design, implementing visual components with a lifecycle that can be used on a canvas, allowing seamless integration with React.
Changes
Changes are the core of narrative animation. AntV categorizes animation into three stages: entrance, transformation, and exit.
Animation Stages
1. Entrance
2. Transformation
3. Exit
Identifying Changes
After defining components declaratively, AntV uses DOM diffing to detect specific changes, waiting for exit animations to finish before removing elements from the render tree.
Defining Animations
Once changes are identified, each element’s animation (appear, update, leave) is defined and driven by the Timeline.
Conclusion
If you are interested in learning more, visit AntV’s website or GitHub for additional examples and resources.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Alipay Experience Technology
Exploring ultimate user experience and best engineering practices
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.