Designing Insightful Data Visualizations with AntV AVA: Concepts, Standards, and Technical Solutions

Introduction

AntV, an open‑source enterprise data‑visualization solution from Ant Group, offers statistical, relational, and geographic visualisation products. AVA, the intelligent visual‑analysis framework under the AntV brand, is the basis of this whitepaper, which shares years of research and practice in BI‑enhanced analysis.

Insight Presentation Concept

In data‑analysis applications, presenting insights and conclusions requires careful design, standards, and technical solutions. The goal is to make insight display efficient and accessible.

1.1 What Is Insight Presentation

Insight presentation means precisely showing the background, contradiction, attribution, and recommendation of an insight through graphics, text, or other methods.

Background : concise context description.

Contradiction : attention‑grabbing state (e.g., peak, outlier, correlation).

Attribution : explanation of the contradiction’s cause.

Recommendation : actionable advice derived from the attribution.

1.2 Forms of Insight Presentation

Various visual forms can be used to convey insights, as illustrated in the accompanying diagram.

1.3 Importance of Insight Presentation Standards

Standardising insight presentation improves consistency, reduces development effort, and accelerates decision‑making.

Design Specification

2.1 Insight Design Layers

The design hierarchy links user demands, product scenarios, solutions, and underlying capabilities.

2.1.1 User Demands

Data visualisation aims to improve insight acquisition efficiency. The user workflow can be split into four stages: see data → analyse → gain insight → act . Insight presentation focuses on the analyse → insight stage.

2.1.2 Product Scenarios

Four scenarios are defined: data‑point insight, chart‑level insight, report‑level insight, and insight report.

Data‑point Insight

Chart‑level Insight

Report‑level Insight

Insight Report

2.1.3 Solutions

Two solution families are identified:

Chart‑enhanced Expression : emphasise patterns via highlights, auxiliary lines, and annotations.

Independent Insight Expression : present standalone insight cards, mini‑visualisations, or narrative text.

2.2 Chart‑Enhanced Expression

Techniques include visual contrast, auxiliary lines, and statistical tags. Examples of visual contrast and auxiliary lines are shown.

2.3 Independent Insight Expression

Independent insights are delivered via narrative‑text visualisation, inline mini‑charts, and insight cards.

2.3.1 Narrative‑Text Visualisation

Text is encoded with visual cues (color, weight, underline) to highlight key information while keeping interaction separate from static text.

2.3.2 Inline Mini‑Visualisations

Mini‑charts embedded in text convey trends or distributions without overwhelming the layout.

2.3.3 Insight Cards

Cards combine text, mini‑visualisations, and structured layouts to present complete insights with extensibility for various scenarios.

Technical Implementation (Frontend)

AntV/G2 provides a declarative grammar where both geometry and annotation are treated as

Mark

. Marks support data‑driven rendering, transforms, animation, and interaction, enabling plug‑and‑play enhancement of charts.

Key capabilities include:

Data‑Driven : generate multiple marks from table data.

Transform : group, aggregate, filter, and sort bound dimensions.

Animation : animate marks to emphasise insights.

Interaction : combine marks with tooltips and other UI behaviours.

Composite marks allow reusable logic and visual composition.

Using the

AntV/AVA

insight

module, developers can automatically generate insight data and corresponding enhanced marks via

getInsights

.

Example of a chart with automatically generated insight marks is shown below.

For independent insight expression, the

@antv/ava-react

components

<NarrativeTextVis />

and

<InsightCard />

render narrative text visualisations and insight cards from JSON specifications that follow the

ntv‑schema

.

Application Cases

Insight‑enhanced visualisation supports four data‑application scenarios: data‑point insight, chart‑level insight, report‑level insight, and insight report, helping users see data, analyse, gain insight, and act.

By standardising design and providing flexible frontend tools, AntV enables rapid, accurate, and scalable insight presentation across business intelligence workflows.