Skip to content

Create and edit data visualization with simple chat.

License

Notifications You must be signed in to change notification settings

herongxhr/viz-gpt

 
 

Repository files navigation

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

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

data view

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.

About

Create and edit data visualization with simple chat.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 97.2%
  • JavaScript 1.3%
  • Other 1.5%