VizGPT: Make contextual data visualization with Chat Interface

viz-gpt.mp4

Use GPT to generate visualization from datasets with natural language. You can edit the visualization in the context step by step to make it more precise without retyping the complex query.

You can try it at Playground

Why VizGPT

There exist lots of great visualization products in the world, such as Tableau, pygwalker. The traditional drag-and-drop visualization tool is hard to use for people unfamiliar with configs and viz/data transformations. For example, making a tableau heatmap requires bin transformations to both axes and then dragging the measure to color. It is hard for people unfamiliar with data visualization to make a heatmap.

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

With VizGPT, you can build visualizations step by step with a chat interface. You can edit/adjust visualizations in the context. It allows you to explore the data first without figuring out how to build complex visualization initially, especially when unfamiliar with the data.

Features & Roadmap

• Natural language to data visualization vega-lite
• Use chat context to edit your visualization. Allow users to change the chart if it is not what they expected
• Explore the data step by step by chatting with visualizations.
• Upload your own dataset (CSV) to make visulizations.
• Save the visualizations and chat history.
• Allow user to use visualization 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.

vizGPT is now good at drawing data visualizations, not data transformations/preparation/computation. You can use other tools like Kanaries/RATH to prepare the data first and then use vizGPT to draw the visualization.

Chat to Viz Example

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 are inferred automatically by default. You can edit it anytime you want to make the visualization more precise.

Local Development

step 1

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>

step 2

Install dependencies:

yarn install

step 3

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