How AntV Powers Data Visualization: From Charts to Graph Analysis

Information Visualization

Information visualization deals with abstract, unstructured data such as charts and flow diagrams. Different database types are chosen based on data characteristics: relational databases (e.g., MySQL) for business logic, time‑series databases (e.g., VictoriaMetrics) for monitoring, and NoSQL document stores (e.g., MongoDB) for fixed‑process scenarios.

Common open‑source libraries include ECharts , RAWGraphs , AntV/G2 , and D3.js . AntV/G2 offers a data‑driven, highly interactive grammar for statistical charts, simplifying development and enabling the team to create an internal TimeChart library for time‑series visualizations.

Case Studies

Hera Monitoring Platform

The Hera platform collects timestamped metrics, stores them in a time‑series database, and visualizes them with line, bar, area, and dual‑axis charts to reveal trends, distributions, and comparative analyses.

Frontend Monitoring

The frontend monitoring system captures page performance, device info, and runtime errors, using timeline charts to pinpoint resource loading issues and enable rapid root‑cause analysis.

Approval Center

By visualizing complex approval workflows with tree structures, the system transforms tangled rule data into clear, interactive diagrams that are easy to understand and configure.

Technical Selection – AntV/G2

AntV/G2 provides a graphic grammar consisting of Data, Attribute, Geometry, Scale, Coordinate, Component, and Facet, enabling developers to build complex statistical charts through composable elements.

Creation Process

Update Process

Visualization Analysis

When data becomes massive, high‑dimensional, and multi‑source, visual analysis combined with graph databases helps users quickly grasp insights and make informed decisions.

Key open‑source tools include AntV/G6 , sigmajs , and joint . AntV/G6 offers comprehensive layout and interaction capabilities for graph analysis.

Case Study – Mesh Service Governance

The Mesh platform visualizes service routing, load balancing, and circuit breaking, providing overall and per‑service analyses such as new vs. offline services and upstream/downstream call paths.

Technical Selection – AntV/G6

G6 supports SVG, Canvas, and upcoming WebGL rendering. SVG suits small datasets, Canvas handles larger data, and WebGL excels with massive or 3D scenes.

SVG: intuitive, direct DOM access, native events.

Canvas: high performance for large datasets, custom event system.

WebGL: powerful rendering for large‑scale 3D graphs.

G6 abstracts renderer differences, allowing developers to choose based on needs.

Graph Elements

Core elements are Nodes, Edges, and Combos (grouped nodes). Nodes can be customized via g6‑react‑node and flex layout; edges support curvature and multi‑line labels; combos enable hierarchical grouping.

Graph Layouts

Concentric Layout positions nodes in concentric circles, placing key nodes at the center based on degree or weight.

Force‑Directed Layout simulates physical forces where nodes repel each other while edges act as springs, converging to a balanced state.

Interaction

Interaction comprises Events, Behaviors, and Modes, orchestrated to provide responsive user experiences.

Big Data Analysis

The team integrates visualization with big‑data pipelines, leveraging tools like GraphInsight to handle massive, multi‑dimensional datasets.

Conclusion

As data demands shift from storage to deep analysis, traditional charts no longer suffice. Advanced visualization techniques, especially those offered by AntV, enable clearer insight extraction across monitoring, front‑end performance, approval workflows, and service governance, driving efficiency and informed decision‑making.