English | 简体中文
AVA ( Visual Analytics) is a technology framework designed for more convenient visual analytics. The first A has multiple meanings: AI driven, Automated, Augmented, and VA stands for Visual Analytics. It can assist users in data processing, extracting insights from data, recommending and generating charts, and optimizing existing charts.
AVA contains 2 packages, @antv/ava and @antv/ava-react :
@antv/ava : AVA core package, containing four main modules:
@antv/ava-react : A plug-and-play React component library based on the integration of AVA capabilities, it contains three core components:
NPM package manager can be used to install @antv/ava and @antv/ava-react.
$ npm install @antv/ava
$ npm install @antv/ava-react
The following two examples show the use of @antv/ava and @antv/ava-react respectively (demo code based on React):
Demo 1: Use the insight (Auto Insight) in @antv/ava to extract data insights. Input multi-dimensional data, the backend automatically runs different algorithms to find interesting patterns in the data, evaluates them uniformly and returns high-quality data insights according to the score.
import { getInsights } from '@antv/ava';
// Input: Multi-dimensional data
const data = [
{ year: '2000', value: 100 },
{ year: '2001', value: 200 },
{ year: '2002', value: 220 },
{ year: '2003', value: 230 },
{ year: '2004', value: 245 },
{ year: '2005', value: 156 },
{ year: '2006', value: 178 },
{ year: '2007', value: 180 },
{ year: '2008', value: 190 },
{ year: '2009', value: 1000 },
]
// The insightRes contains interesting insights from the data.
const insightRes = getInsights(data)
Demo 2: Use \<InsightCard \/> in @antv/ava-react to display the insight results. This component can display data insight results directly, here using the insight results from Demo 1 as input:
<div id="root"></div>
// import <InsightCard /> component
import { InsightCard } from '@antv/ava-react';
const root = ReactDOM.createRoot(document.getElementById('root'));
// render
root.render(
<InsightCard insightInfo={insightRes.insights[0]} visualizationOptions={{ lang: 'zh-CN' }} />
);
The result of the rendering is as follows:
We welcome all contributions. Please read our Contributing Guide first. You can submit any ideas as pull requests or as GitHub issues. Let's build a better AVA together.
More at Wiki: Development.
《数据可视化设计的类型学实践》(Exploring the Typology of Visualization Design)
MIT@AntV.