GitHub has recently introduced a free tier for Copilot, so there now is absolutely no reason not to try it out. I decided to give it a go on some day-to-day coding to see how much more productive it is than coding by hand.
To be honest, I rather like coding by hand so I haven’t used AI to generate code to any great extent. I think this is going to change.
Initially, I only used Copilot for simple coding tasks and I was pleasantly surprised how quick and easy it was - considerably quicker than coding by hand. Next, I created a Streamlit app that involved a bit of data analysis, and then I let Copilot make it more interactive by adding user interface controls. All this without me writing a single line of code!
I used Microsoft VSCode and added the GitHub Copilot extension, so, if you want to follow along you need to install the extension and read the instructions on how to get started with it. Copilot supports other editors as well but VSCode is currently my editor of choice.
I’ll get to the visualization and Streamlit code shortly, but first, we need to look at the ways we can use Copilot.
Copilot modes
There are three main modes of use: code completion, chat and inline chat.
Chat opens a new window that you can use in much the same way as ChatGPT. Inline chat lets you write shorter prompts that can add to or replace existing code. Code completion does exactly what it says but as well as completing code that you write, it can be started from a plain English comment, and will begin adding code for you.
I used all three modes to create the data visualization and Streamlit code but, first, let’s look at some simple illustrations.
Code completion
As you might expect, to use code completion you start typing and Copilot suggests what it thinks you want to do. Below you can see an example where I began to write a function definition. I got as far as def bub and Copilot suggested that I wanted to write a bubble sort function and suggested the code that you can see that is italic and greyed out.
To accept the code you just hit <tab>.
But you don’t have to write any code. If you write a comment that describes the code that you want, Copilot will suggest the code. Just hit <tab> to accept the first line of code and then <return> whereupon, if it thinks it is necessary, Copilot will suggest another line, so keep hitting <tab> and <return> until it runs out of ideas.
In the screenshot below I wrote the comment and hit <return>.
That is really quite a useful thing to be able to do. It’s a good idea to document your code with comments, so if you do that anyway, then it’s great that Copilot can write the code that should follow.
Inline chat
Inline chat is a sort of mini-chat interface and is good for modifying code.
Below is some simple plotting code (most of which is the result of code completion). I’ve selected the plotting code and hit <ctrl-i> which invokes the inline chat function. In the dialog box, I’ve asked Copilot to “use the ploty_white template, size the figure 800x600 and make the line red”.
The response to executing this request is as follows:
Copilot has suggested the three lines of code that are highlighted. I now have the choice to Accept, Discard, or retry. The code looks functional, so I accept it and, of course, it works fine.
You can modify your code in other ways, too. Select a chunk of code and simply tell Copilot to “refactor” and it will, among other things, substitute functions for inline code, where appropriate. You could ask it to comment the code, too.
You can use inline chat to create new code, as well. But if you need a lot of code creation, you might prefer the full chat interface.
Chat interface
This is fairly similar to a ChatGPT interface but it is incorporated into the editor environment so you can ask Copilot to create code and have it automatically inserted into a file.
You bring up the chat interface from the view menu, enter a request and Copilot will respond with an answer. Below, I have asked it to “Create a program to illustrate the use of matplotlib to create a scatter chart with a linear regression line.”.
It responds with the correct code in the same window.
If I am satisfied with the code I can transfer it to the editor with a single click - see the screenshot below.
Here is the result in the editor window. The button indicated is the one I clicked and is labelled “Apply in editor”. The code is now in the editor and I am being prompted to accept it (or not) as with inline chat.
The chat interface is best for creating large blocks of code and, as well as creating a complete program, you can create a chunk of code that can be inserted at the cursor position in the editor.
Copilot knows Plotly
Copilot relies on ChatGPT and that cannot keep up with all the new Python libraries published on PyPi. However, Plotly has been around and stable for a long time, so Copilot can create Plotly code easily.
I’m going to create some graphs with Plotly by writing a comment from which Copilot will create code. But we’ll start with something necessary though trivial in terms of coding. I’ll limit myself to a couple of examples but there are more in a Jupyter Notebook in the repo.
We need the following libraries.
# import plotly express, plotly graphic objects and pandas
import plotly.express as px
import plotly.graph_objects as go
import pandas as pd
And we need some data to plot.
# read the columns 'Year', 'Month', 'Tmax', 'Tmean', 'Tmin', 'Rain'
# and 'Sun' from 'Heathrow.csv' into the dataframe df0
df0 = pd.read_csv('Heathrow.csv', usecols=['Year', 'Month', 'Tmax', 'Tmean', 'Tmin', 'Rain', 'Sun'])
# New dataframe df2023
df2023 = df0[df0['Year'] == 2023]
By looking at the comment, you might think that I let Copilot write this code - and you’d be right. Now, of course, it would be fair comment to point out that it would have been as easy to write the code as it was to write the comment. And that is true, but it’s not in the spirit of this exercise and, also, if you are unfamiliar with the syntax, or are not a very good typist, it’s a time saver.
The data is a record of weather data for Heathrow, London’s main airport and nearest major weather station. The data comes from my own GitHub repo and is derived from the UK Met Office’s raw data. Both sources are freely usable (see the license information in the repo).
The second dataframe is a subset of that data from 2023. It looks like this:
I wanted to set some defaults for the plots I was going to create and, to be honest, I couldn’t remember exactly how to do it, so I used code completion from the comment.
# set plotly defaults: template - plotly_white, height - 600, width - 800
px.defaults.template = 'plotly_white'
px.defaults.height = 600
px.defaults.width = 800
I don’t why I forgot that, it’s pretty simple, but I remember now!
So, let’s draw some charts - or rather let’s let Copilot draw some charts for us.
In each case, I wrote the comment; Copilot suggested the code and I accepted it. In some cases the comment was fairly precise, others were less so.
Here’s a scatter chart with a trendline.
# Plot a scatter diagram of Rain and Sun for the year 2023 with a trendline
fig = px.scatter(df2023, x='Rain', y='Sun', title='Rain vs Sun for 2023', trendline='ols')
fig.show()
Yep, that’s what I wanted.
In the repo Notebook you’ll find examples of a line chart and a bar chart but I don’t want this to get too boring so here is something a little bit more ambitious.
I want to draw a line chart over the top of a bar chart. The line will plot the mean temperature for each month and the bars will represent the rainfall.
The values for the two charts are quite different and one is in degrees C and the other in millimetres. This means we need two y-axes. I wasn’t entirely certain how to do this; I know that Plotly Express doesn’t support this combining of charts and so I would have to use the Graphic Object library, instead.
I’m not that familiar with Plotly GO, I knew that I would have to use two plots and then use add_traces to combine them into a single figure but I wasn’t sure of the syntax. Also because I had little idea about how to draw the two y-axes so I was quite explicit with the prompt.
Copilot performed two tasks here, first, it wrote the code and second, it taught me how to do it.
# using plotly graphic object create a plot with two y-axes, one on the left of the
# figure and the other on the right add a traces for a bar plot of Rainfall and line
# plot of Tmax in the year 2023
fig = go.Figure()
fig.add_trace(go.Bar(x=df2023['Month'], y=df2023['Rain'], name='Rain', yaxis='y1'))
fig.add_trace(go.Scatter(x=df2023['Month'], y=df2023['Tmax'], name='Tmax', yaxis='y2'))
fig.update_layout(title='Rainfall and Tmax for 2023', yaxis=dict(title='Rain', side='left'),
yaxis2=dict(title='Tmax', side='right', overlaying='y', showgrid=False),
width=800, height=600)
fig.show()
Copilot has done more than I asked. It seems to have assumed that I would want to keep the same figure size and knows that the defaults I set earlier would have no effect on Plotly GO figures, so it has set the same height and width, explicitly, as well as adding a suitable title.
While simple plots are quite trivial, this one would have taken me much longer to code if I were not using Copilot.
A Streamlit app
So far, so good. The completion function works nicely for writing new code, let’s see if we can be slightly more ambitious and write a Streamlit app and use the other Copilot modes.
The first thing to say is that, for this experiment, Copilot still produces pretty good code but on occasion, it needs adjusting. And that is where we will use the in-line chat facility.
The app that we will develop uses the same data as before but does some analysis and attempts to show if we can detect the effect of Global Warming on summer temperatures in London. The app looks like the screenshot below and was written pretty much entirely by Copilot - even the textual descriptions and headers.
The data is the same as we saw above but, not just for 2023 - it starts in 1949.
I’ll go through the code bit by bit and you can see the complete app in the Github repo for this article.
We start off with the preamble code and by reading the data. Again, I wrote the comments and Copilot wrote the code - except where noted in the comments.
# import libraries streamlit, pandas and plotly express
import streamlit as st
import pandas as pd
import plotly.express as px
# Set display to wide
st.set_page_config(layout='wide')
# A function to read a csv file and return a dataframe
# The function takes a file path as an argument and the result is cached
# Only the columns 'Year', 'Month' and 'Tmean' are required
@st.cache_data
def read_csv(file_path):
return pd.read_csv(file_path, usecols=['Year', 'Month', 'Tmean'])
# Copilot wanted to use the decorator @cache - this is deprecated, it should use @cache_data
# A manual edit was required
# Read 'Heathrow.csv' as a dataframe
df = read_csv('Heathrow.csv')
Copilot is not completely up-to-date as can be seen by the use of the @cache decorator. Streamlit deprecated this some time ago and @cache_data should now be used. This is not a big deal as Streamlit reminds us that we should do this when we run the app but it is as well to bear in mind that Copilot might be a little old-fashioned. Apart from this, the code was properly constructed.
The comments are quite verbose and, again, you might think that you could have written the code as easily as writing the comments. My response to this criticism would be that I feel that I ought to write the comments anyway and this is for two reasons: first, well-commented code is more easily understood, and second, writing the comments clarifies my intentions - I am thinking about the problem that I am trying to solve rather than the Python code.
Next, we do a bit of analysis. My intention is to track summer temperatures across time but the data doesn’t have that information - we need to create it from the monthly figures.
Notice that the only observation that I have included in the dataframe is the mean temperature for each month. So, the first thing is to re-jig the dataframe so that we have columns for each month and rows that represent years. The cell contents will be Tmean.
That doesn’t give me the summer temperatures. I need to add the means for June, July and August and put the result in a new column. But if you look at the screenshot above you’ll see that the temperatures are shown as positive and negative changes from the average summer temperature. This gives us a better representation of the changes than the actual temperatures. So, I want another column with these values - the change from the average.
The resulting dataframe should look like the image below.
The description that I just gave boils down to just three lines of code.
The Pandas method pivot is used to re-shape the dataframe; the column Summer is the mean of columns 6,7, and 8; and the change column is the difference between the value for Summer and the mean of the entire Summer column.
# Create a new dataframe from df where the columns are months and the year are the rows
df = df.pivot(index='Year', columns='Month', values='Tmean')
# add a column to df that it the average temperature of month columns labelled 6, 7, and 8.
# Label it 'Summer'.
df['Summer'] = df[[6, 7, 8]].mean(axis=1)
# add a column to df that is the dfference between the average summer temperature over all
# years and the actual summer temparature. Label it 'dSummer'.
df['dSummer'] = df['Summer'] - df['Summer'].mean()
The code is not difficult but I would have written these comments to make sure that anyone reading the code would know what my intentions were. Copilot did that and produced code that was both correct and neat.
Below is the initial code for the bar chart that was generated with code completion from the comment.
# plot a bar chart of the dSummer temperature over all years
summer_fig = px.bar(df, x=df.index, y='dSummer', title='Summer Temperature Anomaly')
summer_fig.update_layout(yaxis_title='Temperature Anomaly (°C)')
I wanted to change the colour of the bars: positive values should be red and negative ones blue. And this is where inline chat comes in. I selected the two lines of code hit <ctrl-i> and in the dialog box asked it to update the layout and change the colours of the bars. It added this line:
summer_fig.update_traces(marker_color=df['dSummer'].apply(lambda x: 'red' if x > 0 else 'blue'))
This did the job.
Similarly, the original code that was produced for the scatter chart made the scatter dots and the trendline the same colour. For clarity, I wanted the trendline to be a different colour. So, again, I highlighted the chart code and in an inline chat window asked it to change the colour of the line. Here is the resulting code.
# plot a scatter chart with trendline of the dSummer temperature over all years.
scatter_fig = px.scatter(df, x=df.index, y='dSummer', trendline='ols', title='Summer Temperature Anomaly')
scatter_fig.update_layout(xaxis_title='Summer Temperature (°C)', yaxis_title='Temperature Anomaly (°C)')
scatter_fig.update_traces(marker_color='red')
scatter_fig.data[1].line.color = 'blue' # Change the trendline color to blue
The rest of the code is fairly trivial Streamlit layout and all produced by Copilot. See the repo for the complete code - the program is well-commented and shows how it was produced.
And, as a matter of interest, it shows that there is a detectable rise in summer temperatures for the period 1949 to 2024.
Add functionality with Copilot
The app works perfectly well but is rather static. What if we were to add a slider to select the beginning and end years to be plotted?
I used the inline chat interface to make that exact request and Copilot responded perfectly. Again you can see the full code in the repo. Below you can see a close-up screenshot of the slider in action.
Conclusion
In this exercise, I have used Copilot to produce code that I could have written myself. But, on occasions, I forget the exact syntax or form of what it is I want to do but, helpfully, Copilot does not. I also make the occasional typo, Copilot doesn’t, and it types much faster than I can. All of this makes writing the code quicker and easier - considerably so.
I’m not sure that I would be entirely happy relying on it to produce code that I didn’t understand myself. But sometimes, it comes up with something that I hadn’t thought of and that is helpful as it increases my knowledge as well as producing a result.
Frankly, Copilot is a boon and I’ll carry on using it, or something like it. And if I run out of the free quota, I would definitely consider forking out the (fairly modest) monthly subscription.
Thanks for reading and, if you haven’t tried Copilot yet, I hope this encourages you to give it a try. To read more of my articles and tutorials please see my website and consider subscribing to my occasional newsletter where I link to new articles. You can also follow me on Medium.
Notes
- The complete source code can be found in the Github repo for this article.
- Here is the weather data GitHub repo.
- All Images and screenshots are by the author unless otherwise noted.