antvis / AVA

🤖 A framework for automated visual analytics.
https://ava.antv.antgroup.com/
MIT License
1.34k stars 139 forks source link
augmented-analytics auto-insight chart-aigc chart-recommendation charts data-visualization insight insight-gpt narrative-charts visualization

Switch between English and Chinese English | 简体中文

AVA logo
A framework for automated visual analytics.

What is AVA

AVA (AVA examples 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 examples

Composition

AVA contains 2 packages, @antv/ava and @antv/ava-react :

Features

Documentation

Getting Started

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):

  1. 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)
  2. 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:

    Data Insight Results

Contribution PRs Welcome

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.

Collaboration

iDVx

Papers

VizLinter

Chen, Q., Sun, F., Xu, X., Chen, Z., Wang, J. and Cao, N., 2021. VizLinter: A Linter and Fixer Framework for Data Visualization. IEEE transactions on visualization and computer graphics, 28(1), pp.206-216.


《数据可视化设计的类型学实践》(Exploring the Typology of Visualization Design)

蓝星宇, 王嘉喆. 数据可视化设计的类型学实践, 《美术大观》, 2022(3), 149-152.

License

MIT@AntV.