/viz-gpt

Create and edit data visualization with simple chat.

Primary LanguageTypeScriptApache License 2.0Apache-2.0

VizGPT: Make contextual data visualization with Chat Interface

viz-gpt.mp4

Use GPT to generate visualization from dataset with natural language. You can edit the visualization in the contex step by step to make it more precise without retype the whole complex query.

You can try it at Playground

Why VizGPT

There exist lots of great visualization product in the world, such as tableau, pygwalker. Traditional drag-and-drop visualization tool is hard to use for people who are not familiar with configs and viz/data transformations. For example, making a heatmap in tableau requires to make bin transformations to both axis, and then drag the measure to color. It is hard for people who are not familiar with data visualization to make a heatmap.

Some text2viz tools accepts natural language to generate visualization. However, they are not flexible enough to allow user to edit the visualization. For example, if the user want to change the color of the heatmap, they have to retype the whole sentence.

With VizGPT, you can build visualizations step by step with chat interface. You can edit/adjust visualizations in the context. It allows your to explore the data first without figuring out how to build complex visualization at begining, especially when you are not familiar with the data.

Features & Roadmap

  • Natural language to data visualization vega-lite
  • Use chat context to edit your visualization. Allow user to change the chart if it is not they expected
  • Explore the data step by step by chatting with visualizations.
  • Upload your own dataset (CSV) to make visulization.
  • Save the visualizations and chat history.
  • Allow user to use visulization editor (like graphic-walker or vega-editor) to edit the visualization and show the edit to GPT to make better visualization as the user prefers.

Chat to Viz Example

vizapt-1 vizapt-2 vizapt-3

Xnapper-2023-05-10-00 28 07

Xnapper-2023-05-10-01 05 15

Add custom CSV file

Click upload csv button to add your own data. You can view or edit your data's metas at data view. The metas is infered automatically by default, you can edit it anytime you want to make the visualization more precise.

data view

Local Development

Create a .env file at the root of the project with the following contents:

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

Then run vercel dev or npm run dev to start the server at port 3000.