{"id":695,"date":"2021-08-09T06:08:43","date_gmt":"2021-08-09T06:08:43","guid":{"rendered":"https:\/\/fcpython.com\/?p=695"},"modified":"2021-08-09T06:12:55","modified_gmt":"2021-08-09T06:12:55","slug":"building-interactive-analysis-tools-with-python-streamlit","status":"publish","type":"post","link":"https:\/\/fcpython.com\/data-analysis\/building-interactive-analysis-tools-with-python-streamlit","title":{"rendered":"Building Interactive Analysis Tools with Python & Streamlit"},"content":{"rendered":"\n

Streamlit is a Python library that makes creating and sharing analysis tools far easier than it should be. Think of it like a Jupyter notebook that only shows the parts you would want a non-programmer end user to interact with – data, visualisations, filters – without the code.<\/p>\n

This article will introduce you to Streamlit. We\u2019ll take you through getting the package and your app set up, importing data into it, calculating new columns and finally creating the visuals and filters that make it into something interactive.<\/p>\n

Our project will use data from the 20\/21 season of the Premier League\u2019s Fantasy Football competition to build a basic app to filter and visualise player data.<\/p>\n

The data and code for this tutorial are available here.<\/a><\/p>\n

As general recommendations, I think that this is best learned with Anaconda to manage your environment, and VS Code to have your code and terminal running in the same place.<\/p>\n

Getting off the ground with Streamlit<\/h3>\n

The very first thing that we need to do is install Streamlit, which we do as we would any other package. Head over to the terminal in your Python environment and install Streamlit with either Conda or Pip.<\/p>\n

conda install streamlit
Or if you are not using Anaconda
pip install streamlit<\/p>\n

With it installed, let\u2019s now create a new folder for our app. In this folder, create a new file called fpl-app.py (or whatever you want – just remember to use your new name later in the tutorial). Also in this folder, download the csv here and place it alongside your new .py file.<\/p>\n

Before we get started properly, we need to get our blank app up and running. Open up Python environment terminal (easiest to do this in VS code by opening the command palette and selecting \u2018create new integrated terminal), make sure you are in the new folder and run \u2018streamlit run fpl-app.py\u2019. This will open up our blank app, which we are going to make a lot more useful in the coming steps.<\/p>\n

Importing our data and enhancing it<\/h3>\n

As with any Python code, we need to import our packages. Open up your blank fpl-app.py file and import the three modules we\u2019ll use in this tutorial:<\/p>\n\n\n\n

import pandas as pd\nimport numpy as np\nimport streamlit as st<\/code><\/pre>\n\n\n\n
With pandas installed, we can now import our data easily. Use read_csv to load in the data that you downloaded earlier and placed in the same folder:<\/p>\n\n\n\n
df = pd.read_csv('fpldata.csv')<\/code><\/pre>\n\n\n\n
This data frame is from FPL 20\/21. Each row is a player, and contains their data on points, cost, team, minutes played and a few basic performance metrics.<\/p>\n
Regardless of the project, we are hostage to the strength of our data. So let\u2019s improve what we have here before we create anything else.<\/p>\n
We have minutes played and we will use this metric to add context to the other performance metrics – goals, assists & points. Firstly, we will create a \u201990 minutes played\u2019 metric, then use this to create p90 stats of these three metrics:<\/p>\n\n\n\n
df[\u201890s\u2019] = df[\u2018minutes\u2019]\/90\ncalc_elements = [\u2018goals\u2019, \u2018assists\u2019, \u2018points\u2019]\nfor each in calc_elements:\n    df[f\u2019{each}_p90\u2019] = df[each] \/ df[\u201890s\u2019]<\/code><\/pre>\n\n\n\n
This will give us a lot more insight when it comes to our dashboard.<\/p>\n
Finally, to help us to create filters for teams and positions, we need to get lists of the unique values in each. Rather than do this manually, we can do this by simply creating a list of these columns, then dropping the duplicates:<\/p>\n\n\n\n
positions = list(df[\u2018position\u2019].drop_duplicates())\nteams = list(df[\u2018team\u2019].drop_duplicates())<\/code><\/pre>\n\n\n\n
And this is all we have to do to get our data together! We\u2019re now ready to get started on our app. The first thing we will do is create our filters in the sidebar of the app, which will be applied to our dataframe. The app will then use this filtered dataframe to present data and visualisations in the main part of the app.<\/p>\n
Adding Filters<\/h3>\n
Before displaying the data, we need to add filters that will allow the user to select just what is relevant to them.<\/p>\n
We add filters and other components to the app with the Streamlit library. As just two examples, adding a dataframe is done with st.dataframe() (we imported streamlit as st) and adding a slider is st.slider().<\/p>\n
We are going to add our filters in the sidebar of the app, which we do by calling sidebar before our component. So st.slider() would be placed in the sidebar with st.sidebar.slider() – easy!<\/p>\n
Let\u2019s first create a filter that allows us to pick which position we want to filter players by. A handy tool for this is multiselect, allowing us to pick one or many options.<\/p>\n
We add this to our app by assigning it to a variable, which will store our selection. Within the st.sidebar.multiselect() function, we pass the text label, the possible options and the default. Remember, we saved our positions in the \u2018positions\u2019 variable earlier, so our code looks like this:<\/p>\n\n\n\n
position_choice = st.sidebar.multiselect(\n    'Choose position:', positions, default=positions)<\/code><\/pre>\n\n\n\n
And let\u2019s add another multiselect for teams:<\/p>\n\n\n\n
teams_choice = st.sidebar.multiselect(\n    \"Teams:\", teams, default=teams)<\/code><\/pre>\n\n\n\n
Filtering by value would also be useful, but multiselect would be impractical. Instead a slider might be better. The st.slider() function needs a label, minimum value, maximum value, change step and default value. Something like this:<\/p>\n\n\n\n
price_choice = st.sidebar.slider(\n    'Max Price:', min_value=4, max_value=15.0, step=.5, value=15.0)<\/code><\/pre>\n\n\n\n
Refresh your app to take a look at your filters. It should look something like this, your filters across the left of the page.<\/p>\n
\"Screenshot<\/p>\n
There are many other types of filters available in Streamlit, including checkboxes, buttons and radio buttons. Check out your other options in the documentation<\/a>.<\/p>\n
Finally, we need to actually use these filters to slim down our dataframe to give the app the correct data to display to the user. You could do this all in one line, but for the sake of simplicity in this tutorial, let\u2019s do them one by one:<\/p>\n\n\n\n
df = df[df['position'].isin(position_choice)]\ndf = df[df['team'].isin(teams_choice)]\ndf = df[df['cost'] < price_choice]<\/code><\/pre>\n\n\n\n
The df variable will now be filtered by whatever the user picks! Our next job is to display it.<\/p>\n
Creating Visuals<\/h3>\n
As there are many types of filters, there are plenty of ways to display the information. We\u2019ll build a table and an interactive chart, but you’ll find the wealth of other options in the docs.<\/a><\/p>\n
Every page needs a title and st.title() gives us just that:<\/p>\n\n\n\n
st.title(f\"Fantasy Football Analysis\")<\/code><\/pre>\n\n\n\n
If you want to add normal body text, you can simply use st.write(). However, I prefer st.markdown() as it gives you more freedom to format. Markdown gives syntax that formats text for you, and this cheat sheet<\/a> runs through your options.<\/p>\n
To create a subheading with st.markdown(), we use the following code:<\/p>\n\n\n\n
st.markdown(\u2018### Player Dataframe\u2019)<\/code><\/pre>\n\n\n\n
Under which, we obviously need to add a dataframe, which Streamlit again makes so simple:<\/p>\n\n\n\n
st.dataframe(df.sort_values('points',\n             ascending=False).reset_index(drop=True))<\/code><\/pre>\n\n\n\n
We could simply pass the df variable, but I think it is more useful for the user to give it a relevant order. So we have sorted it by points when we pass it. Streamlit and pandas sort the table for us, before posting it in the app.<\/p>\n
Now for something visual. Streamlit allows us to display plots and images from loads of different sources. Local images, Matplotlib plots, the Plotly library and more (check the docs). In this example, we\u2019ll use a really nice library called vega-lite. Vega-lite is a javascript library, but streamlit will do the hard work for us to convert our streamlit function into everything we need.<\/p>\n
Let\u2019s take a look with an example for cost vs points, with some extra information shown by colour and in the tooltips:<\/p>\n\n\n\n
This is our header\n st.markdown('### Cost vs 20\/21 Points')\n This is our plot\n st.vega_lite_chart(df, {\n     'mark': {'type': 'circle', 'tooltip': True},\n     'encoding': {\n         'x': {'field': 'cost', 'type': 'quantitative'},\n         'y': {'field': 'points', 'type': 'quantitative'},\n         'color': {'field': 'position', 'type': 'nominal'},\n         'tooltip': [{\"field\": 'name', 'type': 'nominal'}, {'field': 'cost', 'type': 'quantitative'}, {'field': 'points', 'type': 'quantitative'}],\n     },\n     'width': 700,\n     'height': 400,\n })<\/code><\/pre>\n\n\n\n
You\u2019ll notice that we use the st.vega_lite_chart() function. Within this, we pass the data that we want to plot, then a dictionary that looks quite complicated, but makes sense when we break it down:<\/div>\n
 <\/div>\n