GPT-Vis

GPT-Vis is AntV's entry point for AI-powered visualization. It is designed to provide AI-friendly visualization components that work across various technology stacks (Pure JavaScript, Vue, React, etc.).

Key features include:

• AI-First Design: Optimized syntax for AI interaction, streaming output, and fault tolerance.
• Technology Agnostic: Supports multiple frameworks beyond just React.
• Unified Gateway: Acts as a single interface for various AntV libraries including G2, S2, G6, X6, and L7, allowing AI agents to generate visualizations without needing to master individual engine intricacies.
• Extensive Chart Library: Provides 20+ common statistical charts and various relationship/text visualization types.

The official website provides several key resources for developers:

• Homepage (/): Overview of features, chart types, and framework integrations (React, Vue, Vanilla JS).
• Documentation (/docs): Detailed guides including:
  • Installation (npm, yarn, pnpm)
  • Quick Start examples
  • API Reference (constructor, render(), destroy())
  • Streaming Support for real-time rendering
  • Visualization Syntax guide
  • AI Agent Integration (e.g., OpenAI examples)
  • Framework-specific integration (React, Vue)
• Examples Gallery (/examples): A showcase of 20+ chart types, each including an icon, description, preview, syntax code example, and category tag.

Pie charts are used to visualize the proportion of different categories within a whole. Each sector's area represents its share of the total.

Best Use Cases:

• Showing composition proportions (e.g., user demographics, product categories).
• Market share analysis.
• Budget and resource allocation.
• Scenarios with a small number of categories (ideally $\le$ 6) where differences are distinct.

When to Avoid:

• Time series or trend data.
• Scenarios with too many categories (makes sectors too small to identify).
• When precise numerical comparisons are required (use Bar or Column charts instead).

A Funnel Chart is used to visualize data that flows through multiple stages, showing how quantities decrease or convert at each step. It is ideal for identifying bottlenecks in processes like user conversion, sales pipelines, e-commerce paths, or recruitment screening.

Best Use Cases:

• User conversion rate analysis (e.g., Registration $\rightarrow$ Activation $\rightarrow$ Payment).
• Sales funnel management (e.g., Lead $\rightarrow$ Follow-up $\rightarrow$ Quote $\rightarrow$ Closed).
• E-commerce path analysis (e.g., Browse $\rightarrow$ Add to Cart $\rightarrow$ Order $\rightarrow$ Pay).
• Recruitment or event screening (e.g., Application $\rightarrow$ Check-in $\rightarrow$ Participation).

When NOT to use:

• For single metrics without stages.
• For time-series or trend analysis.
• For complex category comparisons (use bar or stacked charts instead).

The indented-tree chart type is used to display hierarchical data using horizontal indentation. It visualizes parent-child relationships and depth by extending from a root node with child nodes indented at each level.

Best use cases:

• File directories and document outlines.
• Knowledge systems and classification management.
• Hierarchical menus and navigation structures.
• Work Breakdown Structures (WBS) for project tasks.

When to avoid:

• Flat data without hierarchy.
• Network or cyclic relationships (use a network graph instead).
• Extremely deep hierarchies or massive node counts (consider mind maps or organizational charts).

The website is built using a modern web stack optimized for performance and SEO:

• Framework: Next.js 14 (App Router) with React 19
• Styling: Tailwind CSS 4
• Language: TypeScript 5
• Bundler: Turbopack
• Optimization: Static page generation, automatic code splitting, and tree shaking.

The Summary component is designed to present data insights through natural language narratives. It allows you to embed semantically annotated data entities directly within paragraph text. This is ideal for AI-generated data reports, business insight summaries, and KPI interpretations where visual hierarchy and readability are enhanced by highlighting specific metrics, trends, or dimensions.

Best Use Cases:

• AI-generated data analysis reports.
• Presenting business summaries or operational analysis.
• Highlighting key metrics (names, values, trends) within text.
• Interpreting KPI achievement with positive/negative assessments.

When NOT to use:

• Comparing multiple data series (use Bar or Line charts instead).
• Showing data distributions or trends (use Area or Scatter plots instead).
• Handling large datasets requiring sorting or filtering (use Table components instead).

For evaluation or training purposes, gpt-vis uses a specific JSON format to map natural language questions to chart configurations. This format is structured as a text2chart object containing a question and an answer (the chart spec).

[
  {
    "type": "text2chart",
    "question": "用直方图展示考试成绩的分布，成绩在 0-100 之间，将其划分为 5 个区间，数据如下：`[78 , 88, 60, 100, 95]`：",
    "answer": {
      "type": "histogram",
      "data": [
        { "value": 78 },
        { "value": 88 },
        { "value": 60 },
        { "value": 100 },
        { "value": 95 }
      ],
      "binNumber": 5
    }
  }
]

The raw chart data follows a specific schema where source represents the user input (data and metadata) and target represents the expected chart type and field mappings.

• source.data: The raw input data.
• source.metas: Metadata describing the fields (name and dataType). Note that either data or metas can be omitted during recommendation tasks.
• target: An array containing the recommended chart type and the encode object which maps fields to chart axes (e.g., x, y).

{
  "source": {
    "metas": [
      { "name": "城市", "dataType": "string" },
      { "name": "人口", "dataType": "number" }
    ],
    "data": [
      { "城市": "北京", "人口": 2154 },
      { "城市": "上海", "人口": 2424 },
      { "城市": "广州", "人口": 1530 }
    ]
  },
  "target": [
    {
      "type": "column",
      "encode": {
        "x": ["城市"],
        "y": ["人口"]
      }
    }
  ]
}

The summary chart type is unique. It does not use Syntax/JSON configuration. Instead, it uses T8 syntax (Markdown combined with semantic annotations).

⚠️ CRITICAL: Before generating a summary, you must read the references/summary.md documentation to understand T8 syntax rules, entity types, attribute definitions, and generation requirements. Skipping this step will result in syntax errors.