VizGPT：AI 数据可视化，通过聊天界面实现上下文感知的数据可视化

https://github.com/ObservedObserver/viz-gpt/assets/22167673/a09032d3-f3c8-4cdf-ac14-89df8754fd9f

使用 GPT，只需自然语言即可从数据集生成可视化图表。您可以在对话上下文中逐步编辑可视化，使其更加精准，而无需重新输入复杂的查询语句。VizGPT 可以将您的文本查询和聊天内容转化为数据可视化或图表。

您可以在 Playground 或 Kanaries 上的 vizGPT kanaries-vizgpt 中体验。

[!TIP] 如果您需要更多 AI 功能，我们还开发了 runcell，这是一款运行在 Jupyter 中的 AI 代码代理，能够理解您的代码、数据和单元格，并为您生成代码、执行单元格以及采取相应操作。您可以通过 pip install runcell 在 Jupyter Lab 中使用它。

https://github.com/user-attachments/assets/9ec64252-864d-4bd1-8755-83f9b0396d38

为什么选择 VizGPT

目前市面上有许多优秀的可视化工具，例如 Tableau 和 pygwalker。然而，传统的拖放式可视化工具对于不熟悉配置和数据转换的人来说往往难以上手。以 Tableau 的热力图为例，用户需要对两个坐标轴进行分箱处理，然后再将度量字段拖到颜色区域，整个过程相当复杂，对于初学者来说并不友好。

一些 text2viz 工具虽然支持自然语言生成可视化，但它们缺乏灵活性，无法让用户直接编辑生成的图表。比如，如果用户想更改热力图的颜色，就必须重新输入整句话。

而借助 VizGPT，您可以利用聊天界面一步步构建可视化，并在对话中随时调整和优化图表。它允许您先探索数据，不必一开始就纠结于如何搭建复杂的可视化，尤其适合对数据不太熟悉的用户。

此外，VizGPT 专注于基于文本的可视化探索，帮助用户从可视化中发现新见解，并根据这些见解提出新的问题。

功能与路线图

• 自然语言转数据可视化 vega-lite
• 利用聊天上下文编辑可视化，允许用户在图表不符合预期时进行修改
• 通过与可视化互动，逐步探索数据
• 支持上传自定义 CSV 数据集以创建可视化
• 保存可视化结果及聊天记录
• 允许用户使用可视化编辑器（如 graphic-walker 或 vega-editor）对可视化进行进一步编辑，并将编辑后的结果反馈给 GPT，从而生成更符合用户需求的可视化效果

目前，VizGPT 更擅长绘制数据可视化，而非进行数据转换、预处理或计算。您可以先使用 Kanaries/RATH 等工具对数据进行预处理，再利用 VizGPT 来生成可视化图表。

VizGPT + RAG

我还构建了一个基于 RAG 的 VizGPT 版本，可通过 vizgpt.ai 访问。该版本包含专为 vega/vega-lite 和 SQL 设计的 RAG 模块。

聊天生成可视化示例

添加自定义 CSV 文件

点击“上传 CSV”按钮即可添加您自己的数据。您可以在数据视图中查看或编辑数据的元信息。默认情况下，元信息会自动推断得出，但您也可以随时进行修改，以使可视化更加精确。

本地开发

步骤 1

在项目根目录下创建一个 .env 文件，内容如下：

BASE_URL=<Azure OpenAI BaseURL>
DEPLOYMENT_NAME=<Deployment Name>
AZURE_OPENAI_KEY=<Your key>

步骤 2

安装依赖：

yarn install

步骤 3

然后运行 vercel dev 或 npm run dev，即可在端口 3000 启动服务器。

VizGPT 快速上手指南

VizGPT 是一款基于自然语言的 AI 数据可视化工具。它允许用户通过对话界面，将文本查询转化为图表（基于 Vega-Lite），并支持在上下文语境中逐步调整和优化可视化结果，无需重复输入复杂指令。

环境准备

在开始本地开发之前，请确保您的系统满足以下要求：

• 操作系统：Windows, macOS 或 Linux
• 运行时环境：Node.js (推荐 v16 或更高版本)
• 包管理器：Yarn 或 npm
• AI 服务账号：需要拥有 Azure OpenAI 服务访问权限（包含 BaseURL、Deployment Name 和 API Key）

注意：本项目主要依赖 Azure OpenAI 接口进行推理，请提前准备好相关密钥。

安装步骤

1. 获取源码

克隆项目仓库到本地：

git clone https://github.com/ObservedObserver/viz-gpt.git
cd viz-gpt

2. 配置环境变量

在项目根目录下创建 .env 文件，并填入您的 Azure OpenAI 配置信息：

BASE_URL=<Azure OpenAI BaseURL>
DEPLOYMENT_NAME=<Deployment Name>
AZURE_OPENAI_KEY=<Your key>

请将 <...> 中的内容替换为您实际的配置值。

3. 安装依赖

使用 Yarn 安装项目依赖（国内用户若遇网络问题，可配置淘宝镜像源 yarn config set registry https://registry.npmmirror.com）：

yarn install

4. 启动开发服务器

运行以下命令启动本地服务，默认端口为 3000：

vercel dev

或者使用 npm 启动：

npm run dev

启动成功后，请在浏览器访问 http://localhost:3000。

基本使用

方式一：在线体验（无需安装）

如果您只想快速测试功能，可以直接访问官方 Playground：

• 地址：https://vizgpt.ai/
• 功能：直接上传 CSV 文件或选择示例数据集，通过聊天窗口输入自然语言指令生成图表。

方式二：本地使用流程

1. 上传数据 在界面中点击 Upload CSV 按钮，上传您本地的 CSV 数据文件。系统会自动推断数据元数据（Metas），您可以在 "Data View" 中查看或手动修正字段类型以确保可视化精度。

2. 生成图表 在聊天输入框中输入自然语言描述。

   • 示例：“展示销售额随时间变化的趋势图”或“绘制不同地区的热力图”。
   • VizGPT 会自动生成对应的 Vega-Lite 代码并渲染图表。

3. 迭代优化 利用上下文对话功能调整图表，无需重新描述整个需求。

   • 示例：“把颜色改成红色”、“将 X 轴改为对数坐标”或“只显示前 10 名的数据”。
   • 系统会基于上一轮对话历史理解您的意图并更新视图。

4. 探索洞察 基于生成的图表继续提问，发现数据中的新规律，实现“对话即探索”的分析流程。

提示：VizGPT 专注于可视化生成，而非复杂的数据清洗或计算。建议先使用 Kanaries RATH 或其他工具完成数据预处理，再导入 VizGPT 进行绘图。