### Install Dependencies
Source: https://github.com/antvis/gpt-vis/blob/ai/site/README.md
Use this command to install project dependencies.
```bash
npm install
```
--------------------------------
### Start Production Server
Source: https://github.com/antvis/gpt-vis/blob/ai/site/README.md
Use this command to start the production server after building the project.
```bash
npm start
```
--------------------------------
### Install AntV GPT-Vis
Source: https://github.com/antvis/gpt-vis/blob/ai/README.md
Install the library using npm.
```bash
npm install @antv/gpt-vis
```
--------------------------------
### Start Documentation Site Dev Server
Source: https://github.com/antvis/gpt-vis/blob/ai/CLAUDE.md
Navigates to the documentation site directory and starts the Next.js development server.
```bash
cd site && pnpm dev
```
--------------------------------
### Build and Start Site with Node.js
Source: https://github.com/antvis/gpt-vis/blob/ai/site/DEPLOYMENT.md
Use these commands to build the static site and start a local Node.js server for self-hosted deployment.
```bash
cd site
npm install
npm run build
```
```bash
npm start
```
--------------------------------
### Start Development Server
Source: https://github.com/antvis/gpt-vis/blob/ai/site/README.md
Run this command to start the local development server. Access the site at http://localhost:3000.
```bash
npm run dev
```
--------------------------------
### Install Dependencies with pnpm
Source: https://github.com/antvis/gpt-vis/blob/ai/CLAUDE.md
Use this command to install all necessary project dependencies.
```bash
pnpm install
```
--------------------------------
### Install Dependencies
Source: https://github.com/antvis/gpt-vis/blob/ai/bindings/dify-plugin-visualization/README.md
Install the required Python dependencies for the project.
```bash
pip install -r requirements.txt
```
--------------------------------
### Install streamlit-gpt-vis
Source: https://github.com/antvis/gpt-vis/blob/ai/bindings/streamlit-gpt-vis/README.md
Install the library using pip. This command should be run in your terminal.
```sh
pip install streamlit-gpt-vis
```
--------------------------------
### Install gpt-vis-ssr
Source: https://github.com/antvis/gpt-vis/blob/ai/bindings/gpt-vis-ssr/README.md
Install the gpt-vis-ssr package using npm.
```sh
npm install --save @antv/gpt-vis-ssr
```
--------------------------------
### Example Pie Chart Data Generation
Source: https://github.com/antvis/gpt-vis/blob/ai/evaluations/prompts/pie/text2chart.md
Provides examples of question-answer pairs for generating pie charts. The first example shows a standard pie chart for GDP comparison, while the second demonstrates a donut chart for population distribution.
```json
[
{
"type": "text2chart",
"question": "根据预测，专家估计到 2030 年这些国家 GDP 将达到，美国 GDP 750 万亿，印度 GDP 420 万亿，英国 GDP 420 万亿，中国 GDP 700 万亿。用条形图可视化",
"answer": {
"type": "pie",
"data": [
{ "category": "美国", "value": 750 },
{ "category": "印度", "value": 420 },
{ "category": "英国", "value": 900 },
{ "category": "中国", "value": 700 }
],
"title": "预计 2030 GDP"
}
},
{
"type": "text2chart",
"question": "全国人口中居住在城镇的人口占比为 63.89%，居住在乡村的人口占比为 36.11%。用环图展示数据",
"answer": {
"type": "pie",
"data": [
{ "category": "城镇人口", "value": 63.89 },
{ "category": "乡村人口", "value": 36.11 }
],
"innerRadius": 0.6,
"title": "全国人口居住对比"
}
}
]
```
--------------------------------
### Full HTML Example for GPT-Vis
Source: https://github.com/antvis/gpt-vis/blob/ai/skills/chart-visualization/SKILL.md
This example demonstrates how to integrate GPT-Vis into an HTML page using a CDN. It initializes the GPT-Vis instance and renders a simple line chart using the GPT-Vis syntax.
```html
```
--------------------------------
### Text to Pin Map Chart Examples
Source: https://github.com/antvis/gpt-vis/blob/ai/evaluations/prompts/pin-map/text2chart.md
Provides examples of converting natural language questions into pin map chart configurations. Each example includes a question and the corresponding JSON answer for the chart data.
```json
[
{
"type": "text2chart",
"question": "在地图上标注我旅行地杭州和上海。",
"answer": {
"type": "pin-map",
"data": [
{ "longitude": 120.153576, "latitude": 30.287459, "label": "杭州" },
{ "longitude": 121.4737, "latitude": 31.2304, "label": "上海" }
]
}
},
{
"type": "text2chart",
"question": "用点标注地图展示沿海城市的人口分布情况。",
"answer": {
"type": "pin-map",
"data": [
{ "longitude": 121.549792, "latitude": 29.868388, "label": "宁波人口：51 万" },
{ "longitude": 121.4737, "latitude": 31.2304, "label": "上海人口：151 万" },
{ "longitude": 120.672111, "latitude": 28.000575, "label": "温州人口：67 万" }
]
}
}
]
```
--------------------------------
### Manual Deployment Commands
Source: https://github.com/antvis/gpt-vis/blob/ai/site/README.md
These commands are used for manual deployment. First, build the project, then start the production server.
```bash
npm run build
npm start
```
--------------------------------
### Install Dependencies for Marked Integration
Source: https://github.com/antvis/gpt-vis/blob/ai/README.md
Installs the necessary packages for integrating GPT-Vis with the 'marked' Markdown renderer and 'highlight.js' for syntax highlighting.
```bash
npm install @antv/gpt-vis marked marked-highlight highlight.js
```
--------------------------------
### Initialize GPT-Vis in Vue
Source: https://github.com/antvis/gpt-vis/blob/ai/README.md
Vue 3 setup for GPT-Vis using `
```
--------------------------------
### Clone GPT-Vis Repository
Source: https://github.com/antvis/gpt-vis/blob/ai/site/CONTRIBUTING.md
Clone the GPT-Vis repository and navigate to the site directory to begin setup.
```bash
git clone https://github.com/antvis/GPT-Vis.git
cd GPT-Vis/site
```
--------------------------------
### Start Development Build with pnpm
Source: https://github.com/antvis/gpt-vis/blob/ai/CLAUDE.md
Initiates a development build, outputting only ESM modules for faster iteration.
```bash
pnpm dev
```
--------------------------------
### Syntax Parser Output Example
Source: https://github.com/antvis/gpt-vis/blob/ai/CLAUDE.md
Illustrates the resulting configuration object after parsing the markdown-like syntax. Note the type, data array, and title properties.
```json
{ "type": "line", [{ "time": "2020", "value": 100 }], "title": "My Chart" }
```
--------------------------------
### Install Additional Typed Chart Components
Source: https://github.com/antvis/gpt-vis/blob/ai/README.md
Commands to install other available typed chart components like Pie, Bar, and Mindmap. All 26 chart types are available.
```bash
npx shadcn@latest add @gpt-vis/pie
npx shadcn@latest add @gpt-vis/bar
npx shadcn@latest add @gpt-vis/mindmap
# ...and more
```
--------------------------------
### Example Pin Map Data Generation
Source: https://github.com/antvis/gpt-vis/blob/ai/evaluations/prompts/pin-map/data2chart.md
Provides examples of question-answer pairs for generating pin map visualizations. The 'question' contains the data and visualization request, while the 'answer' is the corresponding chart configuration.
```json
[
{
"type": "data2chart",
"question": "用点标注地图可视化我的数据 [{ \"location\": [116.3974, 39.9087], \"label\": \"北京\", \"information\": \"中国的首都\" },{ \"location\": [121.4737, 31.2304], \"label\": \"上海\", \"information\": \"中国的经济中心\" }]",
"answer": {
"type": "pin-map",
"data": [
{ "longitude": 120.153576, "latitude": 30.287459, "label": "杭州" },
{ "longitude": 121.4737, "latitude": 31.2304, "label": "上海" }
]
}
},
{
"type": "data2chart",
"question": "用点标注地图可视化我的数据 [{ title: '杨梅岭', longitude: 120.118362, latitude: 30.217175 },{ title: '理安寺', longitude: 120.112958, latitude: 30.207319 },{ title: '九溪烟树', longitude: 120.11335, latitude: 30.202395 }]",
"answer": {
"type": "pin-map",
"data": [
{ "label": "杨梅岭", "longitude": 120.118362, "latitude": 30.217175 },
{ "label": "理安寺", "longitude": 120.112958, "latitude": 30.207319 },
{ "label": "九溪烟树", "longitude": 120.11335, "latitude": 30.202395 }
]
}
}
]
```
--------------------------------
### Syntax Parser Example
Source: https://github.com/antvis/gpt-vis/blob/ai/CLAUDE.md
Demonstrates the conversion of a markdown-like visualization syntax string into a configuration object. Special sections like `data` are parsed as arrays, and `style` as objects. Values are auto-coerced, but quotes preserve strings.
```text
vis line
data
- time 2020
value 100
title My Chart
```
--------------------------------
### Initialize GPT-Vis in Vanilla JavaScript
Source: https://github.com/antvis/gpt-vis/blob/ai/README.md
Basic setup for using GPT-Vis in a vanilla JavaScript environment. Ensure the container element exists and is correctly targeted.
```javascript
import { GPTVis } from '@antv/gpt-vis';
const gptVis = new GPTVis({ container: 'chart', width: 600, height: 400 });
gptVis.render(visSyntaxString);
```
--------------------------------
### Environment Variable for Site URL
Source: https://github.com/antvis/gpt-vis/blob/ai/site/DEPLOYMENT.md
An example of an optional `.env.local` file to specify the public URL of your site, useful for custom domain configurations.
```bash
# .env.local (optional)
NEXT_PUBLIC_SITE_URL=https://gpt-vis.antv.vision
```
--------------------------------
### Enable GPT-Vis Wrapper
Source: https://github.com/antvis/gpt-vis/blob/ai/src/vis-wrapper/README.md
Instantiate GPTVis with the `wrapper` option set to `true` to enable the enhanced UI controls. This example shows rendering a pie chart.
```typescript
import { GPTVis } from '@antv/gpt-vis';
// Create a GPTVis instance with wrapper enabled
const g = new GPTVis({
container: '#container',
width: 600,
height: 400,
wrapper: true, // Enable the wrapper (default: false)
});
// Render a chart
g.render({
type: 'pie',
data: [
{ category: '分类一', value: 27 },
{ category: '分类二', value: 25 },
{ category: '分类三', value: 18 },
],
innerRadius: 0.6,
theme: 'academy',
});
// Clean up when done
g.destroy();
```
--------------------------------
### Reference Example: Harry Potter Network Graph
Source: https://github.com/antvis/gpt-vis/blob/ai/evaluations/prompts/network-graph/text2chart.md
A reference example demonstrating a question-answer pair for visualizing character relationships in Harry Potter using a network graph. This includes the natural language question and the corresponding JSON configuration for the chart.
```json
[
{
"type": "text2chart",
"question": "在《哈利波特》系列中，有几个主要人物：哈利·波特、赫敏·格兰杰、罗恩·韦斯莱和伏地魔。哈利·波特是主角，他的两个最好的朋友是赫敏·格兰杰和罗恩·韦斯莱。伏地魔是哈利·波特的主要敌人，曾试图杀死哈利。用网络图可视化。",
"answer": {
"type": "network-graph",
"data": {
"nodes": [
{ "name": "哈利·波特" },
{ "name": "赫敏·格兰杰" },
{ "name": "罗恩·韦斯莱" },
{ "name": "伏地魔" }
],
"edges": [
{ "source": "哈利·波特", "target": "赫敏·格兰杰", "name": "朋友" },
{ "source": "哈利·波特", "target": "罗恩·韦斯莱", "name": "朋友" },
{ "source": "哈利·波特", "target": "伏地魔", "name": "敌人" },
{ "source": "伏地魔", "target": "哈利·波特", "name": "试图杀死" }
]
}
}
}
]
```
--------------------------------
### Render Table with Restaurant Revenue Data
Source: https://github.com/antvis/gpt-vis/blob/ai/src/vis/table/README.md
Renders a table displaying restaurant revenue data, including categories and their revenue percentage. This example demonstrates basic table creation with data and a title.
```javascript
import { GPTVis } from '@antv/gpt-vis';
const gptVis = new GPTVis({
container: '#container',
width: 600,
height: 400,
});
const visSyntax = `
vis table
data
- 类别 火锅
营收额占比(%) 22
- 类别 自助餐
营收额占比(%) 12
- 类别 小吃快餐
营收额占比(%) 8
- 类别 西餐
营收额占比(%) 6
- 类别 其它
营收额占比(%) 44
title 餐饮业营收额数据表
`;
gptVis.render(visSyntax);
```
--------------------------------
### Render User Conversion Funnel with Dark Theme
Source: https://github.com/antvis/gpt-vis/blob/ai/src/vis/funnel/README.md
This example demonstrates rendering a user conversion funnel with the 'dark' theme applied. It visualizes stages such as '注册', '激活', and '付费'.
```javascript
import { GPTVis } from '@antv/gpt-vis';
const gptVis = new GPTVis({
container: '#container',
width: 600,
height: 400,
});
const visSyntax = `
vis funnel
data
- category 注册
value 800
- category 激活
value 500
- category 付费
value 200
title 用户转化流程
theme dark
`;
gptVis.render(visSyntax);
```
--------------------------------
### Render a Histogram Chart with Data
Source: https://github.com/antvis/gpt-vis/blob/ai/src/vis/histogram/README.md
Basic example to render a histogram chart. Ensure the GPTVis library is imported and initialized. The data can be provided as a list of numbers.
```javascript
import { GPTVis } from '@antv/gpt-vis';
const gptVis = new GPTVis({
container: '#container',
width: 600,
height: 400,
});
const visSyntax = `
vis histogram
data
- 78
- 88
- 60
- 100
- 95
binNumber 5
title 成绩分布
`;
gptVis.render(visSyntax);
```
--------------------------------
### Vis Syntax Example: Pie Chart
Source: https://github.com/antvis/gpt-vis/blob/ai/README.md
Define a pie chart using the declarative vis syntax. This format is suitable for LLMs to generate.
```plaintext
vis pie
data
- category Sales
value 30
- category Marketing
value 25
innerRadius 0.6
```
--------------------------------
### Create a Basic Waterfall Chart
Source: https://github.com/antvis/gpt-vis/blob/ai/src/vis/waterfall/README.md
Renders a basic waterfall chart showing the composition of enterprise profits. Requires GPTVis import and container setup.
```javascript
import { GPTVis } from '@antv/gpt-vis';
const gptVis = new GPTVis({
container: '#container',
width: 600,
height: 400,
});
const visSyntax = `
vis waterfall
data
- category 期初利润
value 100
- category 销售收入
value 80
- category 运营成本
value -50
- category 税费
value -20
- category 总计
isTotal true
title 企业利润构成
`;
gptVis.render(visSyntax);
```
--------------------------------
### Use GPTVis Base Component
Source: https://github.com/antvis/gpt-vis/blob/ai/README.md
Example of using the GPTVis component with a vis syntax string. The theme prop can be customized.
```tsx
import { GPTVis } from '@/components/ui/gpt-vis';
;
```
--------------------------------
### Example: Simple Area Chart Q&A
Source: https://github.com/antvis/gpt-vis/blob/ai/evaluations/prompts/area/text2chart.md
Demonstrates a question-answer pair for generating a simple area chart showing monthly stock price changes. The answer includes the chart configuration with data, title, and axis labels.
```json
{
"type": "text2chart",
"question": "每月的股票价格的变化，1 月份股票价格为 23.895，2 月份股票价格为 23.695，3 月份股票价格为 23.655。用面积图可视化",
"answer": {
"type": "area",
"data": [
{ "time": "1 月", "value": 23.895 },
{ "time": "2 月", "value": 23.695 },
{ "time": "3 月", "value": 23.655 }
],
"title": "1月到3月股票价格的变化",
"axisXTitle": "月份",
"axisYTitle": "价格"
}
}
```
--------------------------------
### Vis Syntax Example: Line Chart with Dark Theme
Source: https://github.com/antvis/gpt-vis/blob/ai/README.md
Render a line chart and apply the 'dark' theme using the vis syntax. Themes control the overall appearance of the chart.
```plaintext
vis line
data
- time 2020
value 100
- time 2021
value 120
theme dark
```
--------------------------------
### Vis Syntax Example: Hierarchical Mindmap
Source: https://github.com/antvis/gpt-vis/blob/ai/README.md
Create a hierarchical mindmap using the vis syntax, defining parent-child relationships within the data.
```plaintext
vis mindmap
data
- name Project Plan
children
- name Phase 1
- name Phase 2
```
--------------------------------
### Render Grouped Scatter Chart
Source: https://github.com/antvis/gpt-vis/blob/ai/src/vis/scatter/README.md
This example demonstrates how to create a scatter plot with data points grouped by a specified category. Ensure GPTVis is imported and initialized.
```javascript
import { GPTVis } from '@antv/gpt-vis';
const gptVis = new GPTVis({
container: '#container',
width: 600,
height: 400,
});
const visSyntax = `
vis scatter
data
- x 25
y 5000
group A
- x 35
y 7000
group A
- x 45
y 10000
group A
- x 30
y 6000
group B
- x 40
y 8000
group B
- x 50
y 11000
group B
`;
gptVis.render(visSyntax);
```
--------------------------------
### Vis Syntax Example: Line Chart with Custom Styles
Source: https://github.com/antvis/gpt-vis/blob/ai/README.md
Customize the appearance of a line chart, including line width and a custom color palette, using the 'style' property in the vis syntax.
```plaintext
vis line
data
- time 2020
value 100
- time 2021
value 120
style
lineWidth 3
palette
- #5B8FF9
- #5AD8A6
```
--------------------------------
### Example: Stacked Area Chart Q&A
Source: https://github.com/antvis/gpt-vis/blob/ai/evaluations/prompts/area/text2chart.md
Illustrates a question-answer pair for a stacked area chart visualizing air pollution index changes across three cities over several years. The configuration includes the 'stack: true' property.
```json
{
"type": "text2chart",
"question": "在某项研究中，2019 年到 2023 年中三个城市的空气污染指数变化如下：北京分别为 150，160，145，155，165；广州分别为 100，110，105，115，120；上海分别为 90，85，80，75，70。堆叠面积图可视化",
"answer": {
"type": "area",
"data": [
{ "time": "2019年", "value": 150, "group": "北京" },
{ "time": "2020年", "value": 160, "group": "北京" },
{ "time": "2021年", "value": 145, "group": "北京" },
{ "time": "2022年", "value": 155, "group": "北京" },
{ "time": "2023年", "value": 165, "group": "北京" },
{ "time": "2019年", "value": 100, "group": "广州" },
{ "time": "2020年", "value": 110, "group": "广州" },
{ "time": "2021年", "value": 105, "group": "广州" },
{ "time": "2022年", "value": 115, "group": "广州" },
{ "time": "2023年", "value": 120, "group": "广州" },
{ "time": "2019年", "value": 90, "group": "上海" },
{ "time": "2020年", "value": 85, "group": "上海" },
{ "time": "2021年", "value": 80, "group": "上海" },
{ "time": "2022年", "value": 75, "group": "上海" },
{ "time": "2023年", "value": 70, "group": "上海" }
],
"stack": true,
"title": "城市空气污染指数变化",
"axisXTitle": "年份",
"axisYTitle": "空气污染指数"
}
}
```
--------------------------------
### Display Waterfall Chart with Dark Theme
Source: https://github.com/antvis/gpt-vis/blob/ai/src/vis/waterfall/README.md
Renders a waterfall chart for budget execution using the dark theme. Requires GPTVis import and container setup.
```javascript
import { GPTVis } from '@antv/gpt-vis';
const gptVis = new GPTVis({
container: '#container',
width: 600,
height: 400,
});
const visSyntax = `
vis waterfall
data
- category 基础预算
value 500
- category 市场投入
value 120
- category 采购优化
value -60
- category 运营效率
value -30
- category 总利润
isTotal true
title 预算执行情况
theme dark
`;
gptVis.render(visSyntax);
```
--------------------------------
### Render Three-Set Venn Diagram
Source: https://github.com/antvis/gpt-vis/blob/ai/src/vis/venn/README.md
This example demonstrates how to render a Venn diagram for three sets, including all pairwise and three-way intersections. The 'data' property must define each set and their combined values.
```javascript
import { GPTVis } from '@antv/gpt-vis';
const gptVis = new GPTVis({
container: '#container',
width: 600,
height: 400,
});
const visSyntax = `
vis venn
data
- sets A
value 10
label 集合A
- sets B
value 8
label 集合B
- sets C
value 6
label 集合C
- sets A B
value 4
- sets A C
value 2
- sets B C
value 1
- sets A B C
value 1
title 三集合关系
`;
gptVis.render(visSyntax);
```
--------------------------------
### Homepage Navigation Flow
Source: https://github.com/antvis/gpt-vis/blob/ai/site/SITE_SUMMARY.md
Illustrates the hierarchical structure of the website's navigation, starting from the homepage and branching into documentation, examples, and external links.
```text
Homepage (/)
├── Documentation (/docs)
│ ├── API Reference
│ ├── Syntax Guide
│ ├── Components
│ └── AI Integration
├── Examples (/examples)
│ └── 20+ Chart Cards
└── GitHub (external link)
```
--------------------------------
### Example of Original Chart Data Structure
Source: https://github.com/antvis/gpt-vis/blob/ai/evaluations/datastes/recommend/README.en.md
This JSON structure represents a single data entry for chart recommendation. It includes metadata about the data fields, the original data itself, and the target recommended chart type with its encoding.
```json
{
"source": {
// Metadata about data fields
"metas": [{"name": "City", "dataType": "string"}, {"name": "Population", "dataType": "number"}],
// Original data
"data": [{"City": "Beijing", "Population": 2154}, {"City": "Shanghai", "Population": 2424}, {"City": "Guangzhou", "Population": 1530}]
},
"target": [
{
"type": "column",
"encode": {
"x": ["City"], // Field for x-axis
"y": ["Population"] // Field for y-axis
}
}
]
}
```
--------------------------------
### Render Stacked Area Chart for Air Pollution Index
Source: https://github.com/antvis/gpt-vis/blob/ai/src/vis/area/README.md
This example demonstrates a stacked area chart for comparing air pollution indices across multiple cities over years. Ensure 'group' is provided for each data point to enable stacking.
```javascript
import { GPTVis } from '@antv/gpt-vis';
const gptVis = new GPTVis({
container: '#container',
width: 600,
height: 400,
});
const visSyntax = `
vis area
data
- time 2019年
value 150
group 北京
- time 2020年
value 160
group 北京
- time 2021年
value 145
group 北京
- time 2019年
value 100
group 广州
- time 2020年
value 110
group 广州
- time 2021年
value 105
group 广州
stack true
title 城市空气污染指数变化
axisXTitle 年份
axisYTitle 空气污染指数
`;
gptVis.render(visSyntax);
```
--------------------------------
### Build the Server
Source: https://github.com/antvis/gpt-vis/blob/ai/bindings/dify-plugin-visualization/README.md
Build and run the Dify Plugin Visualization server.
```bash
python -m main
```
--------------------------------
### Build for Production
Source: https://github.com/antvis/gpt-vis/blob/ai/site/README.md
Execute this command to create a production build of the website.
```bash
npm run build
```
--------------------------------
### Violin Chart with Y-axis Starting at Zero
Source: https://github.com/antvis/gpt-vis/blob/ai/src/vis/violin/README.md
Configures a violin chart to ensure the Y-axis starts at zero using the 'startAtZero' option. This is important for accurate visual representation of magnitudes.
```javascript
import { GPTVis } from '@antv/gpt-vis';
const gptVis = new GPTVis({
container: '#container',
width: 600,
height: 400,
});
const visSyntax = `
vis violin
data
- category 班级A
value 15
- category 班级A
value 18
- category 班级A
value 22
style
startAtZero true
`;
gptVis.render(visSyntax);
```
--------------------------------
### Example Scatter Chart JSON Data
Source: https://github.com/antvis/gpt-vis/blob/ai/evaluations/prompts/scatter/text2chart.md
An example of a question-answer pair for generating a scatter chart. The question describes the data and visualization type, and the answer provides the chart configuration in JSON format.
```json
[
{
"type": "text2chart",
"question": "研究广告支出与销售额之间的关系，广告支出（单位：千元）为 10, 20, 30, 40，销售额（单位：万元）分别为 15, 25, 35, 45。用散点图可视化我的数据：",
"answer": {
"type": "scatter",
"data": [
{ "x": 10, "y": 15 },
{ "x": 20, "y": 25 },
{ "x": 30, "y": 35 },
{ "x": 40, "y": 45 }
]
}
}
]
```
--------------------------------
### Project File Structure
Source: https://github.com/antvis/gpt-vis/blob/ai/site/SITE_SUMMARY.md
Overview of the project's directory structure for the GPT-Vis website.
```bash
site/
├── app/
│ ├── page.tsx (Homepage - 450 lines)
│ ├── docs/
│ │ └── page.tsx (Documentation - 550 lines)
│ ├── examples/
│ │ └── page.tsx (Examples - 400 lines)
│ ├── layout.tsx (Root layout - 35 lines)
│ ├── globals.css (Global styles - 43 lines)
│ └── sitemap.ts (SEO sitemap - 25 lines)
├── public/
│ ├── robots.txt (Crawler rules)
│ └── *.svg (SVG assets)
├── README.md (Site documentation)
├── DEPLOYMENT.md (Deployment guide)
├── CONTRIBUTING.md (Contribution guide)
├── package.json (Dependencies)
└── tsconfig.json (TypeScript config)
```
--------------------------------
### Build and Run Docker Image
Source: https://github.com/antvis/gpt-vis/blob/ai/site/DEPLOYMENT.md
Commands to build a Docker image from the Dockerfile and run it as a container. Ensure you are in the root directory of the project.
```bash
docker build -t gpt-vis-website .
docker run -p 3000:3000 gpt-vis-website
```
--------------------------------
### Run Tests in Watch Mode
Source: https://github.com/antvis/gpt-vis/blob/ai/CLAUDE.md
Starts the test runner in watch mode, automatically re-running tests on file changes.
```bash
pnpm test:watch
```
--------------------------------
### Render Treemap with Product Sales Data
Source: https://github.com/antvis/gpt-vis/blob/ai/src/vis/treemap/README.md
Demonstrates how to render a treemap chart to visualize product sales proportions. Ensure the GPTVis library is imported and initialized.
```javascript
import { GPTVis } from '@antv/gpt-vis';
const gptVis = new GPTVis({
container: '#container',
width: 600,
height: 400,
});
const visSyntax = `
vis treemap
data
- name 苹果
value 800
children
- name 红富士
value 400
- name 黄元帅
value 400
- name 橙子
value 600
- name 香蕉
value 500
title 水果销售量
`;
gptVis.render(visSyntax);
```
--------------------------------
### Customize Background Color of Waterfall Chart
Source: https://github.com/antvis/gpt-vis/blob/ai/src/vis/waterfall/README.md
Customizes the background color of the waterfall chart. Requires GPTVis import and container setup.
```javascript
import { GPTVis } from '@antv/gpt-vis';
const gptVis = new GPTVis({
container: '#container',
width: 600,
height: 400,
});
const visSyntax = `
vis waterfall
data
- category 初始
value 50
- category 增长
value 30
- category 减少
value -10
- category 最终
isTotal true
style
backgroundColor #f0f2f5
`;
gptVis.render(visSyntax);
```
--------------------------------
### SSRResult Type Definition
Source: https://github.com/antvis/gpt-vis/blob/ai/bindings/gpt-vis-ssr/README.md
Defines the structure of the result returned by the render function, including methods to get the buffer and destroy the result.
```ts
type SSRResult = {
toBuffer: (meta?: any) => Buffer;
destroy: () => void;
};
```
--------------------------------
### Run Production Build with pnpm
Source: https://github.com/antvis/gpt-vis/blob/ai/CLAUDE.md
Generates production-ready builds in ESM, CJS, and UMD formats using the father build tool.
```bash
pnpm build
```
--------------------------------
### Use Typed Line Chart Component
Source: https://github.com/antvis/gpt-vis/blob/ai/README.md
Example of using the typed Line component with a JSON config object. The height prop is specified.
```tsx
import { Line } from '@/components/ui/line';
;
```
--------------------------------
### Run All Tests with pnpm
Source: https://github.com/antvis/gpt-vis/blob/ai/CLAUDE.md
Executes the complete test suite for the project.
```bash
pnpm test
```
--------------------------------
### Display Waterfall Chart with Intermediate Totals
Source: https://github.com/antvis/gpt-vis/blob/ai/src/vis/waterfall/README.md
Renders a waterfall chart that includes intermediate subtotals. Requires GPTVis import and container setup.
```javascript
import { GPTVis } from '@antv/gpt-vis';
const gptVis = new GPTVis({
container: '#container',
width: 600,
height: 400,
});
const visSyntax = `
vis waterfall
data
- category 基础预算
value 500
- category 市场投入
value 120
- category 总投入
isIntermediateTotal true
- category 采购优化
value -60
- category 运营效率
value -30
- category 总利润
isTotal true
title 预算分析
`;
gptVis.render(visSyntax);
```
--------------------------------
### Render Scatter Chart with Title Only
Source: https://github.com/antvis/gpt-vis/blob/ai/src/vis/scatter/README.md
A basic scatter plot example that includes a chart title. The GPTVis library must be imported and initialized before rendering.
```javascript
import { GPTVis } from '@antv/gpt-vis';
const gptVis = new GPTVis({
container: '#container',
width: 600,
height: 400,
});
const visSyntax = `
vis scatter
data
- x 10
y 15
- x 20
y 25
- x 30
y 35
- x 40
y 45
title 广告投入与销售额关系
`;
gptVis.render(visSyntax);
```
--------------------------------
### Basic Usage of GPT-Vis
Source: https://github.com/antvis/gpt-vis/blob/ai/README.md
Initialize GPTVis and render a visualization using markdown-like syntax. Ensure a container element with id 'container' exists in your HTML.
```javascript
import { GPTVis } from '@antv/gpt-vis';
const gptVis = new GPTVis({
container: 'container',
width: 600,
height: 400,
});
// Markdown-like visualization syntax
const visSyntax = `
vis line
data
- time 2020
value 100
- time 2021
value 120
- time 2022
value 150
`;
gptVis.render(visSyntax);
```
--------------------------------
### Set Axis Titles for Waterfall Chart
Source: https://github.com/antvis/gpt-vis/blob/ai/src/vis/waterfall/README.md
Sets custom titles for the X and Y axes of a waterfall chart. Requires GPTVis import and container setup.
```javascript
import { GPTVis } from '@antv/gpt-vis';
const gptVis = new GPTVis({
container: '#container',
width: 600,
height: 400,
});
const visSyntax = `
vis waterfall
data
- category 期初
value 100
- category 收入
value 80
- category 支出
value -50
- category 期末
isTotal true
title 财务流水
axisXTitle 项目
axisYTitle 金额（万元）
`;
gptVis.render(visSyntax);
```
--------------------------------
### Render a Line Chart for Population Change Trend
Source: https://github.com/antvis/gpt-vis/blob/ai/src/vis/line/README.md
Demonstrates how to render a basic line chart to show population change trends over years. Requires importing GPTVis and initializing it with a container and dimensions.
```javascript
import { GPTVis } from '@antv/gpt-vis';
const gptVis = new GPTVis({
container: '#container',
width: 600,
height: 400,
});
const visSyntax = `
vis line
data
- time 2015年
value 1700
- time 2016年
value 1500
- time 2017年
value 1200
title 出生人口变化
`;
gptVis.render(visSyntax);
```
--------------------------------
### Customize Positive and Negative Total Colors
Source: https://github.com/antvis/gpt-vis/blob/ai/src/vis/waterfall/README.md
Customizes the colors for positive and negative totals in a waterfall chart. Requires GPTVis import and container setup.
```javascript
import { GPTVis } from '@antv/gpt-vis';
const gptVis = new GPTVis({
container: '#container',
width: 600,
height: 400,
});
const visSyntax = `
vis waterfall
data
- category Q1收入
value 1000
- category Q2收入
value 1200
- category 成本
value -800
- category 净利润
isTotal true
title 季度财务报告
style
palette
- #52c41a
- #f5222d
- #1890ff
`;
gptVis.render(visSyntax);
```
--------------------------------
### Render Violin Chart with Data
Source: https://github.com/antvis/gpt-vis/blob/ai/src/vis/violin/README.md
Demonstrates how to render a basic violin chart to show the distribution of scores across different classes. Ensure the GPTVis library is imported and initialized.
```javascript
import { GPTVis } from '@antv/gpt-vis';
const gptVis = new GPTVis({
container: '#container',
width: 600,
height: 400,
});
const visSyntax = `
vis violin
data
- category 班级A
value 15
- category 班级A
value 18
- category 班级A
value 22
- category 班级A
value 27
- category 班级A
value 35
- category 班级B
value 10
- category 班级B
value 14
- category 班级B
value 19
- category 班级B
value 23
- category 班级B
value 30
title 成绩分布
`;
gptVis.render(visSyntax);
```
--------------------------------
### GPTVis Constructor and Methods
Source: https://github.com/antvis/gpt-vis/blob/ai/src/vis-wrapper/README.md
Documentation for the GPTVis class constructor and its primary methods, render and destroy.
```APIDOC
## VisualizationOptions Interface
```typescript
interface VisualizationOptions {
container: string | HTMLElement; // Container selector or element
width?: number; // Chart width
height?: number; // Chart height
wrapper?: boolean; // Enable wrapper (default: false)
}
```
## GPTVis Class
### Constructor
Initializes a new instance of the GPTVis class.
**Parameters**
- **options** (VisualizationOptions) - Configuration options for the GPTVis instance.
### render
Renders a chart with the specified configuration.
**Parameters**
- **config** (GPTVisConfig) - The configuration object for the chart to be rendered.
### destroy
Cleans up the GPTVis instance and removes associated elements.
```
--------------------------------
### Generate Prompts using npm
Source: https://github.com/antvis/gpt-vis/blob/ai/evaluations/README.md
Run this command to generate prompts for evaluation.
```bash
npm run prompt
```
--------------------------------
### Site File Structure
Source: https://github.com/antvis/gpt-vis/blob/ai/site/CONTRIBUTING.md
Overview of the site's directory structure within the Next.js App Router pattern.
```tree
site/app/
├── page.tsx # Homepage
├── [feature]/
│ └── page.tsx # Feature page
├── layout.tsx # Root layout
└── globals.css # Global styles
```
--------------------------------
### Vis Syntax Example: Pie Chart with Quoted String Values
Source: https://github.com/antvis/gpt-vis/blob/ai/README.md
Use quoted strings for data category values that contain spaces when defining a pie chart with vis syntax.
```plaintext
vis pie
data
- category "Q1 Sales"
value 30
- category "Q2 Sales"
value 25
```
--------------------------------
### Generate Evaluation Metrics using npm
Source: https://github.com/antvis/gpt-vis/blob/ai/evaluations/README.md
Use this command to generate column-based evaluation metrics.
```bash
npm run eval:metrics column
```
--------------------------------
### Render a Line Chart with 'academy' Theme
Source: https://github.com/antvis/gpt-vis/blob/ai/src/vis/line/README.md
Demonstrates rendering a line chart using the 'academy' theme. The theme can be specified in the vis syntax.
```javascript
import { GPTVis } from '@antv/gpt-vis';
const gptVis = new GPTVis({
container: '#container',
width: 600,
height: 400,
});
const visSyntax = `
vis line
data
- time 2015年
value 1700
- time 2016年
value 1500
- time 2017年
value 1200
title 出生人口变化
theme academy
`;
gptVis.render(visSyntax);
```
--------------------------------
### Generate Evaluation Data using npm
Source: https://github.com/antvis/gpt-vis/blob/ai/evaluations/README.md
Execute this command to generate column-based evaluation data.
```bash
npm run eval:data column
```
--------------------------------
### Add Typed Line Chart Component with shadcn CLI
Source: https://github.com/antvis/gpt-vis/blob/ai/README.md
Install a specific typed chart component, like the Line chart, using the shadcn CLI. This component requires a JSON config object.
```bash
npx shadcn@latest add @gpt-vis/line
```
--------------------------------
### Push to Fork
Source: https://github.com/antvis/gpt-vis/blob/ai/site/CONTRIBUTING.md
Push your feature branch to your forked repository.
```bash
git push origin feature/your-feature
```