Black Lives Matter. Please consider donating to Black Girls Code today.

Automatically generate Plotly charts using GPT-3

Summary

  • We created web apps that use GPT-3 to generate code for creating/updating plots from simple descriptions.
  • With only one line of Plotly Express code, it can generalize to display various types of data.
  • We are open-sourcing the code on our sample apps repository.
  • Each app was built with Dash in less than 200 lines of Python code (no JS/HTML/CSS).
  • We are also hosting live demos of our graph generation demos on Dash Enterprise.

Generating Bar Plots

TweetLive DemoSource Code

This Dash app lets you write a simple description, and GPT-3 can automatically generate the PX code to produce a bar chart for you.

It was able to learn how to generate Plotly Express code from this one code snippet:

Description: Our zoo has three twenty giraffes, fourteen orangutans, 3 monkeys more than the number of giraffes we have.
Code: px.bar(x=['giraffes', 'orangutans', 'monkeys'], y=[20, 14, 23], labels=dict(x='animals', y='count'), title='Our Zoo')

What’s impressive is that it is able to generate bar charts with very nuanced descriptions. If you spend hours and maybe days on finetuning a LSTM or create a regex parser, you might be able to retrieve exact numbers and plot them on the graph. However, if you want to give rather vague descriptions (e.g. we have “X apples, Y bananas, and many more pears”, then it will guess a number that is appropriate.

Moreover, it is somewhat capable of inferring arithmetic operations, although it does make mistakes. For example, if you say that “my mother is X years old, and my dad is Y years older”, it will give a number that is close to X + Y, but might not be exact. Similarly, if you say that someone was born in a certain year (DOB), it might give an age that is approximate to 2020 - DOB, but might also fail to give the correct age.

Generating/Updating Line Charts using Gapminder data

TweetLive DemoSource Code

This demo shows not only how to use GPT-3 to not only generate line charts using a given dataset (in this case, the Gapminder dataset), but also updates it in real-time with only natural language queries.

Again, we only gave this prompt to GPT-3:

Our dataframe “df” only contains the following columns: country, continent, year, life expectancy (lifeExp), population (pop), GDP per capita (gdpPercap), the ISO alpha, the ISO numerical.
Description: The life expectancy in Oceania countries throughout the years.
Code: px.line(df.query("continent == 'Oceania'"), x='year', y='lifeExp', color='country', log_y=False, log_x=False)

Then, you can start interacting with GPT-3 by asking it to generate a different plot by simply describing what you want. Let’s take this as an example:

Here, we asked for the “Gross Domestic Product per person over time in Europe” and it correctly plotted gdpPerCap as a function of years, even though neither of those variables was mentioned in our query. Just like the previous demo, this shows that GPT-3 correctly inferred the correct arguments to our function call without requiring explicit variable names.

Moreover, it seems that it has learned its deal of pandas during training since it is able to compose slightly more complex queries. For example, you can ask it to focus on a specific country in Europe:

and it is able to compose a valid pandas query. Here’s how the plotly.express figure was updated:

In addition to the examples above, GPT-3 is able to understand various changes you request, such as the value of the y-axis or whether the plot should be on the log scale or not:

Bonus: Chatbot interface with Dash

TweetDash DialoGPT DemoSource Code

Although generating charts is an extremely useful application of both Dash and Plotly.py, we wanted to see GPT-3’s capabilities in holding a realistic conversation, and perhaps even pass the Turing test. Overall, we were surprisingly pleased with GPT-3. By building the entire conversation UI with Dash Bootstrap Components (no Javascript needed), and generating the image with StyleGAN v2, we were able to achieve a realistic chatbot interface.

By releasing the source code, we hope that it could become a useful template or resource for building your own chatbot interface using Dash. In this case, the conversation area (the gray and blue boxes) is encapsulated in a single 20-lines function.

We also included a link to a previous chatbot demo we built. You can directly try this demo in Jupyter Notebooks.

Accessing the OpenAI API

In order to use GPT-3, you will need to gain access to the beta program and retrieve your API key. To do that, sign up on OpenAI Beta API and join the waitlist. Once the access is granted, you can try out the API through the playground and try our demos locally.

Our API key is managed by our DE App manager. You can also export the OPENAI_KEY locally to run our apps (instructions in the READMEs). We do not recommend hard coding your secret key in your Python files, since this might be leaked or changed after deployment.

6 Likes

Hey there!

This looks great. Was actually planning on making something like this with GPT-3 just in reverse and making use of Network graphs.

Plotly doesn’t seem to provide immediate functionality with network graphs. Is there an easy way to go about this while adhering to the token limits?

Interesting use case, can’t wait to see a demo of it!

If you’d like to use networks with Dash, highly recommend to check out Dash Cytoscape, which was recently updated to v0.2.0. It wraps around cytoscape.js, and adds so Dash-specific features.

1 Like

Hey all! The video for our second demo is available here:

It shows GPT-3 generate line charts from a preloaded dataset (Gapminder) based on natural language instructions we are giving it.

You can even tell it to correct the plot, or change the columns being visualized!

2 Likes

hi, can you share the source code for this?

Really nice. Great job. I can see this being a really useful helper app for dash users where users can write what type of chart they want and this suggests the code and then you can copy and paste into your own app/notebook/etc. I would totally use it.

We are currently in touch with OpenAI to ensure that we are releasing code that complies with their deployment conditions. Although I’d love to release the code for people to try out, it’s important to consider the broader impact of applications integrating GPT-3.

Thanks for the kind words! You can join the waitlist to access the beta API for GPT-3: https://beta.openai.com/

Hello all, I realized I didn’t share video links for the first and latest demo, so here are they are:

Dash Chatbot

Dash Bar Chart Generator

thanks, it’s great to know you’d love to release the code, how can i have a try with it?