Picture from DALLE 3

5 Key Takeaways:

• The fundamental construction of an information visualization chart
• Utilizing Python Altair to construct an information visualization chart
• Utilizing GitHub Copilot to hurry up chart era
• Utilizing ChatGPT to generate related content material on your chart
• Utilizing DALL-E so as to add participating photographs to your chart

Are you bored with spending hours creating boring knowledge visualization charts? Use the facility of generative AI to enhance your knowledge visualization. On this article, we’ll discover how you should use generative AI to complement your chart. We’ll use cutting-edge instruments like Python Altair, GitHub Copilot, ChatGPT, and DALL-E to implement our chart with the assist of generative AI.

First, let’s implement the essential chart utilizing GitHub Copilot. Subsequent, we add textual annotations (such because the title) utilizing ChatGPT. Lastly, we’ll add photographs to the chart utilizing DALL-E. As a programming language, we’ll use Python and the Python Altair visualization library.

We are going to cowl:

• Defining the use case
• Constructing a fundamental chart: utilizing GitHub Copilot
• Including annotations: ChatGPT
• Including photographs: DALL-E.

As a use case, we’ll draw a chart representing the Analysis and improvement expenditure by efficiency sectors utilizing the dataset launched by Eurostat beneath an Open Information license. To make the method extra accessible, we’ll use a simplified model of the dataset, already transformed in CSV. The next desk exhibits an extract of the dataset:

The dataset incorporates the next columns:

• unit – the worth for this column is all the time set to Share of gross home product (PC_GDP)
• sectperf – efficiency sectors. Potential values embody: enterprise enterprise (BES); authorities (GOV); greater schooling (HES); non-public non-profit (PNP), and TOTAL
• geo – European international locations
• 2010-2021 – the expenditure worth for the required 12 months.

As a selected case, let’s give attention to BES in Italy and draw a chart utilizing Python Altair, an information visualization library.

GitHub Copilot is a generative AI instrument you should use as an assistant whereas writing your code. In GitHub Copilot, you describe the sequence of actions that your software program should run, and GitHub Copilot transforms it into runnable code in your most well-liked programming language. The power to make use of GitHub Copilot consists of studying find out how to describe the sequence of actions.

Putting in Copilot

Earlier than utilizing GitHub Copilot, you need to first arrange a free trial or subscription on your private GitHub account. If you’re a trainer or a pupil, you possibly can arrange a free subscription plan on the following hyperlink: https://schooling.github.com/discount_requests/pack_application.

After you have activated a subscription plan, you possibly can configure Copilot as an extension of Visible Studio Code (VSC), a free, open-source code editor designed for builders to write down and debug code.

Observe the steps described beneath to configure VSC with Copilot:

• Obtain VSC from its official web site: https://visualstudio.microsoft.com/it/downloads/
• Open Visible Studio and navigate to the Extensions tab
• Obtain and set up the GitHub Copilot extension, and choose Hook up with your account from the dashboard.
• Enter your GitHub credentials.
• As soon as logged in, the extension will detect current repositories and supply choices for configuring new initiatives.

Utilizing Copilot as a Code Assistant

Utilizing Copilot, let’s generate the essential chart for our visualization. To construct the chart, we carry out two steps:

• Load and preprocess knowledge – load the dataset as a Pandas DataFrame, drop pointless columns, choose solely rows associated to Italy, and use the Pandas soften() to transform columns associated to 2010-2021 into rows.
• Construct the chart as a line chart.

Let’s begin with step one, load and preprocess knowledge. Write the next directions for Copilot:

Press the ENTER button in your keyboard, and Copilot begins producing the code similar to the written directions. The next code snippet exhibits a potential output produced by Copilot:

import pandas as pd
import altair as alt

df = pd.read_csv('tsc00001.csv')
df = df.drop(columns=['unit'])
df = df[df['geo'] == 'IT']
df = df.drop(columns=['geo'])
df = pd.soften(df, id_vars=['sectperf'], var_name="date", value_name="worth")
df['date'] = df['date'].astype(int)
df['value'] = df['value'].astype(float)

Keep in mind that Copilot is a generative mannequin, so the output produced in your case could be totally different from the earlier one.

Now, let’s proceed with the directions to construct the chart. Write the next directions for Copilot:

Copilot will produce a Python code just like the code snippet proven beneath:

chart = alt.Chart(df).mark_line().encode(
    x='date:O',
    y='worth',
    coloration="sectperf"
)

chart.save('chart.html')

Save the script, and run it from the command line. As an output, the script produces an HTML file named chart.html. Open it utilizing your most well-liked browser. The next determine exhibits the produced chart:

Now that you’ve got constructed the essential chart, you possibly can enhance it manually or utilizing Copilot. For instance, you possibly can ask Copilot to generate the code to extend the stroke width for BES. Add a comma after the colour line, and begin writing the directions as proven beneath:

Press ENTER and look ahead to Copilot to write down the code for you. The next code snippet exhibits a potential output generated by Copilot:

strokeWidth=alt.situation(
        alt.datum.sectperf == 'BES',
        alt.worth(5),
        alt.worth(1)
    )

The next determine exhibits the improved chart:

You possibly can additional enhance the chart by asking Copilot to rotate X labels, set the title, and so forth. You possibly can be taught extra particulars on find out how to enhance your chart in [1]. The next determine exhibits the decluttered model of the chart. You will discover the entire code at this hyperlink.

As soon as the essential chart is prepared, we are able to proceed with the following step, utilizing ChatGPT to set the chart title.

Including annotations: ChatGPT

ChatGPT is a sophisticated language mannequin developed by OpenAI. It’s designed to interact in human-like conversations and supply clever responses. We will use ChatGPT to generate textual content for our chart, together with the title and the annotations.

To make use of ChatGPT, navigate to https://chat.openai.com/, log in to your account, or create a brand new one, and begin writing your prompts within the enter textual content field like a dwell chat. Everytime you wish to begin a brand new subject, create a brand new chat session by clicking on the highest left button New Chat.

The Internet interface additionally supplies a paid account that provides some extra options, similar to the chance to make use of superior fashions, and a collection of extra functionalities, similar to precedence assist, expanded customization choices, and unique entry to beta options and updates. .

To work together with ChatGPT, write an enter textual content (immediate) that defines the directions to be carried out. Other ways exist to construction a immediate for ChatGPT. On this article, we think about a immediate composed of three major consecutive texts:

• Telling ChatGPT to behave in a selected [role] – for instance “You might be an examiner highschool college students’ English papers.”
• Telling ChapGPT to tailor its outputs to an supposed [audience] – for instance “Clarify your gradings in a manner that may be understood by excessive schoolers.”
• Outline the [task] – for instance “Grade this textual content and clarify your reasoning.”

In our instance, we are able to formulate the immediate as follows:

Act as an information analyst wanting to speak to determination makers. Generate 5 titles for the next subject: A chart displaying efficiency sectors from 2010 to 2021. Efficiency sectors embody enterprise enterprise (BES); authorities (GOV); greater schooling (HES); and personal non-profit (PNP). You wish to give attention to BES, which has the best values over time.

ChatGPT generates 5 titles, as proven within the following determine:

In case you run the identical immediate once more, ChatGPT will generate one other 5 titles. For instance, we are able to select the primary title, Driving Progress: A Decade of Enterprise Enterprise Efficiency Dominance (2010-2021), and set it because the title of our chart:

chart = alt.Chart(df).mark_line().encode(
   …
).properties(
    width=600,
    top=400,
    title=['Driving Growth:',
        'A Decade of Business Enterprise Performance Dominance (2010-2021)']
)

The next determine exhibits the ensuing chart:

The chart is nearly prepared. To enhance our chart readability and have interaction our viewers emotionally, we are able to add a picture.

Including photographs: DALL-E

DALL-E is a generative AI mannequin created by OpenAI. It combines the facility of GPT-3 with picture era capabilities, permitting it to create lifelike photographs from textual descriptions. To make use of DALL-E, you need to arrange an account on the Open AI web site and purchase some credit.

Other ways exist to construction a immediate for DALL-E. On this article, we think about a immediate composed of:

In our case, we are able to generate a generic picture with the next subject: a black and white icon representing analysis and improvement expenditure.

The next determine exhibits a potential output generated by DALL-E:

Let’s select the third picture and add it to the chart, as proven within the following code snippet:

df_red = pd.DataFrame({'url': ['red.png']})

purple = alt.Chart(df_red).mark_image(
    align='heart',
    baseline="high",
    width=300,
    top=300
).encode(
    url="url"
)

chart = (purple | chart + textual content)

To view the picture within the chart, you need to run it in an internet server. Run the next Python command from the listing containing the HTML file to run a easy net server: python3 -m http.server, after which level to localhost:8000/chart.html. It is best to see a chart just like the next:

You possibly can customise your chart as you like. For instance, you possibly can generate an icon for every efficiency sector.

Congratulations! You could have simply realized to make use of generative AI instruments to empower your knowledge visualization charts!

• First, write your fundamental chart utilizing GitHub Copilot.
• Subsequent, use ChatGPT to generate textual descriptions on your chart, such because the title and the annotations.
• Lastly, use DALL-E to generate photographs to incorporate in your chart to enhance readability and have interaction the viewers.

You possibly can obtain the complete code described on this instance from this GitHub repository. As well as, yow will discover extra particulars on find out how to use generative AI in knowledge storytelling in [1].

References

[1] A. Lo Duca.Information Storytelling with Generative AI utilizing Python and Altair. Manning Publications.

[2] A. Lo Duca. Utilizing Python Altair for Information Storytelling. Educative Inc.

Angelica Lo Duca (Medium) (@alod83) is a researcher on the Institute of Informatics and Telematics of the Nationwide Analysis Council (IIT-CNR) in Pisa, Italy. She is a professor of “Information Journalism” for the Grasp diploma course in Digital Humanities on the College of Pisa. Her analysis pursuits embody Information Science, Information Evaluation, Textual content Evaluation, Open Information, Internet Purposes, Information Engineering, and Information Journalism, utilized to society, tourism, and cultural heritage. She is the creator of the guide Comet for Information Science, printed by Packt Ltd., of the upcoming guide Information Storytelling in Python Altair and Generative AI, printed by Manning, and co-author of the upcoming guide Studying and Working Presto, by O’Reilly Media. Angelica can be an enthusiastic tech author.