Streamlit — Everything You Need To Know
Table of Contents
- Introduction
- Who Are Streamlit & What Is the Framework’s Primary Objective?
- Programming Language Support
- Python Graphing Libraries Supported
- Multi-Page Application Support
- Open Source vs. Proprietary
- Installation & Getting Started
- Prerequisites
- How Easy Is It to Get Started?
- Development — Advantages + Disadvantages
- Prerequisite Skills Needed (Excluding Python)
- Ease of Use
- Design Flexibility
- Jupyter/IPython Support
- Streamlit Application Examples
- Deployment — Options, Advantages + Disadvantages
- Authentication Mechanisms
- Maintenance — Advantages + Disadvantages
- Support & Online Prevalence
- Overall Level of Support
- The Streamlit GitHub Community
- Streamlit’s Online Prevalence
- Helpful Resources
- Communities
- Conclusion & Optimal Use Case
- Bonus: Example Soccer Analytics Dashboard Using Streamlit
Introduction
Over the past four months I have been exploring and critically examining the leading frameworks in the Python dashboarding ecosystem. The current industry leaders in this space are Streamlit, Plotly Dash, Voilà, and Panel. As such, I opted to focus my research entirely on these four dashboarding frameworks, as I wanted to focus in-depth on the industry leaders, as opposed to the breadth of dashboarding frameworks available.
As no solidified criteria exist for reviewing and comparing dashboarding frameworks, I had to create my own comparison criteria which made sense in the context of choosing one particular dashboarding framework over another. These criteria can be found in the table of contents above, and each of the four frameworks mentioned will be examined under these criteria.
For my comparison to be more insightful and realistic I have exposed myself to each of the frameworks over a period of months, and have created a shared example dashboard application utilising each of the four frameworks. This allowed me to get a feel for each of the technologies and experience their advantages and disadvantages first-hand.
Over the coming weeks I will also be releasing an in-depth critical review of Plotly Dash, Voilà, and Panel. This will be followed by a comparison article in which I will compare the 4 frameworks directly.
The goal with these articles is not to make you proficient in using each of these frameworks — but rather to detail their strengths, weaknesses, best use cases, and all of the information that you should consider before choosing to utilise one of these frameworks in your own projects.
Who Are Streamlit & What Is the Framework’s Primary Objective?
Founded in 2018, Streamlit are a relatively new company in the world of Python dashboarding. After a year of development work, the beta version of the Streamlit dashboarding framework was released in Autumn of 2019. The company’s objective in creating Streamlit was to create an open source framework to “turn Python scripts into interactive apps”. Streamlit’s slogan is “The fastest way to build and share data apps”, and for the most part it is difficult to argue with this statement.
Founded by senior engineers from Google, Google X, and Twitter, such as Adrien Treuille — Google X project lead, and Thiago Teixeria — Founder of Google Hangouts Chat, the company’s founders knew first-hand of the difficulty in sharing their data insights and predictive models with co-workers in their respective organisations. It was this desire to share what they had learned through their programming, with their peers, that lead to the creation of Streamlit — enabling machine learning and data visualisation tools that were “repeatable, shareable, modifiable, and usable throughout an organization”.
In June of 2020 Streamlit announced a $21 million Series A investment into the company, led by GGV Capital and Gradient Ventures. Although Streamlit is nascent as a company and as a framework, through this investment round it will likely grow to become a well-known framework within the data science community.
Programming Language Support
Streamlit is built on Python, and currently only supports the Python programming language. As of writing (February 2020), I have not read anything to suggest that there are plans to extend the framework beyond Python to encompass further programming languages.
Python Graphing Libraries Supported
Streamlit supports all of the main Python plotting libraries and plans to add support for further libraries in the future. It currently has support for Matplotlib’s Pyplot library, Seaborn, Altair, Vega-Lite, Plotly, Bokeh, PyDeck (which supports 3D, and map graphing options), and GraphViz.
Streamlit also provide their own native graphing library consisting of line charts, area charts, bar charts, and maps. These charts are currently all that they offer, and as such their native graphing library is not yet considerable. They plan to expand their graphing options as the framework grows.
At present, although Streamlit have ample graphing library support, the level of interactivity you can include in Streamlit plots is limited.
Multi-Page Application Support
As of February 2021, Streamlit do not explicitly support multi-page applications. Multi-page application support is on the roadmap of the framework, but for the time being many workarounds can be found on the Streamlit support forum which provide implementations similar to multi-page applications, albeit without a change in URL. Here is a good discussion on the forum describing one of these processes, and here is a user-created GitHub repository which achieves a similar ends.
Open Source vs. Proprietary
Streamlit is a fully open source dashboarding framework, with an enterprise version in beta at present — called ’Streamlit for Teams’. The ‘for Teams’ platform will include authentication, logging, and improved scalability on the open source version.
The beta version of this enterprise-grade Streamlit was supposed to be launched in late 2020, however, there has not yet been an announcement from the Streamlit team regarding this beta version.
After clarification from a Streamlit team member I can now assuredly say that this beta version is being worked on and tested behind closed doors.
Installation & Getting Started
Useful link:
Streamlit is easy to install — simply use the command ‘pip install streamlit’ in your terminal. Having done this, you just need to import the library at the top of your Python script with the following import statement— ’import streamlit’ — and you are ready to begin using the framework. Note that the common convention for importing the Streamlit library is to do so as follows — ‘import streamlit as st’.
To run a Python script file with Streamlit and see its output in the browser, navigate to the directory in which the file resides using the command ‘cd path/to /your/streamlit_app’, and run the file using the following command in the terminal — ‘streamlit run filename.py’. Navigate to http://localhost:8501/ to see your Streamlit app in the browser, if it does not pop up itself after running the command. You can also run a Streamlit app which is hosted at a URL (on GitHub, for example) using the same command as above switching out ‘filename.py’ for the URL at which your app resides.
You can kill the server, and hence the app, by typing Ctrl + C in the terminal window at any time.
Prerequisites
An IDE/ Text Editor
Python 3.6–3.8
PIP (or Anaconda)
Not required but recommended: An environment management tool such as pipenv, venv, virtualend, conda.
Streamlit have included a list of sanity checks in their documentation on the off-chance you encounter an issue during the installation process.
How Easy Is It to Get Started?
Overall, I found Streamlit extremely straightforward and painless to get up and running. For most use cases simply installing Streamlit and importing it at the top of your Python script will be all that is necessary to get working with the framework.
The Streamlit API is currently minimal and is extremely easy to get to grips with. Very few code changes need to be made to your underlying Python script to create an interactive dashboard application using Streamlit.
Development — Advantages + Disadvantages
A major advantage of Streamlit is its quick and easy development flow. Once you have a Streamlit server running, you can make changes directly to your source code and any time the file is saved the application will update to reflect these changes in the browser. Note that you can toggle between the browser immediately reflecting changes in the code by setting the ‘always rerun’ option in the settings, located in the ‘burger nav’ on the top-right hand corner of the application page.
In my opinion, the biggest advantage was how little effort it took to create a visually appealing dashboard application from an existing code base. Streamlit prides itself on its simplicity, and it was very easy to display data and plots using their smart API. Very few changes to the underlying data analysis Python script were necessary to quickly create an interactive dashboard application.
One slight disadvantage is that it is recommended to work with a split screen layout, so that both the application code and its live representation in the browser are visible at the same time. In general, this is not in issue, however, it might be an issue on smaller devices where screen real estate is low.
Perhaps the biggest downside of Streamlit are its speed issues. The entire Python script is re-run in the browser every time you make a change to the application code, or anytime a user interacts with your application. This can be laborious in terms of development if the Python file (or the data there-in) is large and includes many computations. It can also negatively impact the user experience of your potential application users if they are made to wait seconds before plots update upon interaction. Streamlit have at least tried to remedy this issue by offering an @cache directive, which allows the bypassing of functions in the script if the function has been ran previously with the current parameters. However, this can only be applied to functions, and any time a change is made in the parameters the speed issues will rear their head once again.
Prerequisite Skills Needed (Excluding Python)
To get the full utility out of Streamlit no other prerequisite skills are needed. Some prerequisite skills are needed if you wish to create your own Streamlit Components. In this case, a good level of understanding in HTML and JavaScript are needed.
HTML and CSS are not needed to fully exploit the Streamlit API. Having said that, as Streamlit offer the ability to write your own markdown code, both HTML and CSS can certainly bolster your use of the framework — adding to more complex and visually appealing application layouts.
Ease of Use
Streamlit’s API is easily manageable and can be read in its entirety in a single sitting. The API enables users to create widgets using pure Python without having to worry about back-end code, routes and requests. Streamlit’s main strength is undoubtedly its simplicity, with the company priding itself on having a ‘minimal’ framework.
The st.write() function simplifies the rendering of data in the browser and can be used frequently if you’re not too pernickety about your application layout.
Design Flexibility
As the framework is currently young and focuses primarily on ease of use, it is not entirely flexible in its layout options. In saying that, there are functions such as sidebar, beta_columns, and beta_expander which offer some layout control. You can place widgets and inputs in the sidebar so as to not clutter your application interface. You can use beta_columns to create columns in your application to place items side-by-side, and likewise beta_expander enables you to conserve space by hiding content in clickable dropdowns.
If you are skilled in HTML and JavaScript you can create your own Streamlit Components which will provide you with more control over the layout of your application. The ‘Components’ section of the Streamlit website showcases a handful of featured components created by users within the Streamlit community. Some interesting ones include embedding the ability for application users to comment under your Streamlit application, embedding drawable canvasses within your application, and many more. As the framework grows in size and stature so too will the library of user-created components, enabling greater control and more fine-tuned features to use in your own applications.
This is a trade-off that data scientists will have to consider in choosing to use Streamlit over one of the other dashboarding frameworks available on the market — which is more important to your application context, ease of use or design flexibility?
Jupyter/IPython Support
One caveat of Streamlit is that it works directly with Python script files, not supporting notebook (.ipynb) files. This is a drawback if you are accustomed to conducting data analysis in the Jupyter/IPython environment as you will have to return to a normal IDE to work on your Streamlit application.
It is still possible to conduct all preliminary data analysis in the notebook environment, before converting your .ipynb files to .py files, to explicitly start working on your application front-end. This does add extra steps to the development process, though.
Streamlit Application Examples
You can find some sample Streamlit applications on the gallery page of the Streamlit website:
Deployment — Options, Advantages + Disadvantages
There are many different ways in which you can deploy a Streamlit application to the web. The most straightforward of which is using the ‘Streamlit Sharing’ platform, a platform released in October 2020 for deploying and sharing your Streamlit applications. As of writing, the platform is invite-only, however, you can request an invite to the platform here. It took around 24 hours for my invite to be accepted. Having personally used the platform I can attest to its ease of use. In essence, it allows a user to upload an application stored in a public GitHub repository in a handful of clicks. Like the rest of Streamlit, it is a visually appealing platform, and its strength is in its simplicity. If you are looking to deploy an open source Streamlit data science application this is the easiest way to go about it. If, for some reason, you do encounter an issue with the ‘Sharing’ platform you can read more about the finer details of deployment in the Streamlit docs.
Utilising the Sharing platform may not be a viable solution if the data used in your application is of a confidential nature. Besides this option, Streamlit applications can be hosted using any other hosting provider — as long as it is an environment from which a python application can be run. There are many possible options, such as deploying to cloud platforms, as a standalone executable file, or to web servers. I won’t go into detail here describing each method as they are plentiful, however, there is a great post on the Streamlit forum which acts as a ‘Deployment Guide Wiki’, and has the steps to take to deploy your application on a myriad of different platforms. These include AWS, Google Cloud Platform, Google Colab, Azure, Heroku, JupyterHub, Apache, Nginx, how to deploy as an executable file to Windows, MacOS, Linux, and even Android & IOS. More useful deployment information can be found in the FAQ section of the Streamlit docs.
Many of these deployment options can be utilised by organisations wishing to create private Streamlit applications. One disadvantage of this is that the security and authentication will need to be handled by the people deploying the application, as opposed to the Streamlit team themselves. This is one minor disadvantage in deploying Streamlit applications at present — only deployment of public open source applications is achievable without doing some of the ‘dirty work’ yourself.
One current workaround I routinely came across — which doesn’t involve too much technical skill — is a project known as ContainDS Dashboards. ContainDS claim to provide a ‘simple infrastructure to discreetly share prototypes and dashboards based on any open source frameworks’. This project currently works with JupyterHub, and you can read more about how it to use it with Streamlit here.
Authentication Mechanisms
The Streamlit framework does not currently include any authentication mechanisms. The workaround, for the time being, is to apply authentication mechanisms to the server hosting your deployed Streamlit application. This is on the user to set up and does not come out of the box with Streamlit.
Maintenance — Advantages + Disadvantages
In order to test out how easy it is to maintain a Streamlit application, I first created a basic dashboard using Streamlit a few months back from writing. On returning to my application nothing had broken due to deprecation, and the dashboard still functioned and looked as it did when it was first created.
Some new features had been added to Streamlit in the interim between creating and coming back to my application. It was very easy, even after months of having not looked at any ‘Streamlit code’, to continue developing from that base dashboard.
Streamlit maintain a clear and concise changelog, so on returning to my application, I simply had to read the release notes posts that had been uploaded during my absence to find any new features that had been added.
As previously mentioned, Streamlit prides itself on its ease of use, and due to this maintenance of Streamlit applications is about as straightforward as code maintenance can be.
Support & Online Prevalence
Overall Level of Support
Streamlit do not currently have a chat bot or support email that you can send your queries. In saying that, the Streamlit support forum is relatively active — receiving multiple posts daily from users of the framework. Senior engineers from the Streamlit team frequent the forum and it is not unusual to have them respond to issues as they arise, including the company’s founder, Adrien Treuille. Most issues posted to the forum are eventually resolved by either the people who created the framework itself, or other users from the greater Streamlit community.
The Streamlit Github Community
Below I will summarise some of the key statistics from Streamlit’s GitHub page. These numbers can give an idea of how active the community is, as well as its popularity. All stats provided are as they were in late January 2021.
Stars: 12.7k
Forks: 1.1k
Issues: 534 Open, 940 Closed
Contributors: 80
Streamlit’s Online Prevalence
Another thing worth considering when looking at potentially using a newer framework is its online prevalence and general popularity. Choosing a framework which has a good presence online is essential for when you run into any issues when utilising the framework. If the online presence of the framework is low, then attempting to find a solution to your issue will be more difficult. Three good places to search to get an inclination of a framework’s online presence are Google, Stack Overflow, and the ‘Issues’ section of the official framework repository.
A Google search for ‘Streamlit’ returns 241,000 results.
A Stack Overflow search for ‘Streamlit’ returns 485 results.
The Streamlit GitHub repository’s Issues section has 940 closed issues and 540 open issues.
Taking these search result figures into account, whilst also taking the direct Streamlit support forum into consideration, will give you an idea of the support that you will receive if you do come across an issue you can’t resolve by yourself.
Helpful Resources
Streamlit Cheatsheet: https://share.streamlit.io/daniellewisdl/streamlit-cheat-sheet/app.py
GitHub: https://github.com/streamlit/streamlit
Docs: https://docs.streamlit.io/en/stable/index.html
API Docs: https://docs.streamlit.io/en/stable/api.html
GitHub Issues: https://github.com/streamlit/streamlit/issues
Support Forum: https://discuss.streamlit.io/
Awesome Streamlit Website: http://awesome-streamlit.org/
Note that Awesome Streamlit also have a brilliant list of Streamlit resources.
Layout Options: https://discuss.streamlit.io/t/new-layout-options-for-streamlit/6148
Communities
Twitter: https://twitter.com/streamlit
LinkedIn: https://www.linkedin.com/company/streamlit/
GitHub: https://github.com/streamlit
Medium: https://medium.com/streamlit
Support Forum: https://discuss.streamlit.io/
Conclusion & Optimal Use Case
So, in the end, what is my overall opinion on the Streamlit dashboarding framework?
Streamlit is a very visually appealing framework that is great if you have an already existing Python code base which you want to turn into an interactive dashboard as quickly and painlessly as possible. Streamlit prides itself on its ease of use, and rightfully so. There is no learning curve at all to get started with Streamlit, and their API can be easily digested and utilised right away. If you are creating open source data science applications, the Streamlit Sharing platform is simplistic to use and is a great deployment option for those who do not want to deal with the stress of setting up their own servers. Streamlit has shown a rapid rate of growth since its inception, and has created a bustling community in the process, meaning support is never too far away if you experience issues.
The downsides of Streamlit are its lack of design flexibility and control over your application layout. If your application and/or dataset is large, you will likely run into speed issues due to the application flow — with the entire source code being re-run on every new change or interaction. The API is not currently comprehensive; however, the framework is still nascent, so this is bound to change with time.
Lastly, one disadvantage for some will be the lack of Jupyter support — meaning developers will have to leave the trusty world of IPython notebooks behind to work on their Streamlit applications in a regular IDE.
Due to its ease of use and rapid dashboard prototyping, Streamlit will likely grow to become a formidable and well-known framework within the data science community over the coming years.
Bonus: Example Soccer Analytics Dashboard Using Streamlit
The goal for this section was to draw a sketch of a dashboard layout I wanted to make and then use each of Streamlit, Dash, Voilà, and Panel to create a dashboard application as close as possible to this rough sketch.
Again, the goal here is not to explain the intricacies of programming with Streamlit, but rather to demonstrate the framework’s strengths and weaknesses through a real example.
I have split the coding sections up into ‘Baseline Code’, ‘Streamlit Code’, and ‘Streamlit Code After Markdown Touch-Ups’.
The ‘Baseline Code’ represents the bare bones code that was written in standard Python to create each element of the dashboard — namely the library imports, the functions needed to produce the plots, and the code to read in and clean the data.
The ‘Streamlit Code’ section demonstrates how quickly you can create a dashboard from the original base Python script. Some measures are applied to achieve the desired dashboard layout, however, for this section I was not concerned with the exact layout of the application.
Lastly, the ‘Streamlit Code After Markdown Touch-Ups’ section aims to amend the Streamlit Code section until it is more-or-less the exact layout as specified in the original dashboard sketch. This section gives an idea of how opinionated Streamlit is with regarding application layout, and how to go about overriding this opinionation.
Baseline Code:
#library imports
import numpy as np
import pandas as pd
import plotly.graph_objects as go
import plotly.express as px
from PIL import Image, ImageOps
import requests
from IPython.display import display, clear_outputdef get_and_display_player_image(df, player_name):
image_url = df[df['player_name'] == player_name] ['player_image_path'].values[0]
image = ImageOps.expand(Image.open(requests.get(image_url, stream=True).raw),border=5,fill='black')
image = image.resize((300, 300))
display(image)def apply_consistent_style(fig):
fig.update_yaxes(showgrid=False)
fig.update_xaxes(showgrid=False)
fig.update_yaxes(title_font=dict(size=16, color='white'), tickfont=dict(family='Courier', color='white', size=14))
fig.update_xaxes(title_font=dict(size=16, color='white'), tickfont=dict(family='Courier', color='white', size=14)) fig.update_layout(title_font=dict(size=18, family='Arial'), title_x=0.5, title_font_color='white', margin=dict(l=5,r=5,b=10,t=50,pad=0))
fig.update_layout({'plot_bgcolor': 'rgba(0, 0, 0, 0.5)', 'paper_bgcolor': 'rgba(0, 0, 0, 0.3)'})
return figdef plot_horizontal_bar(df, player):
df = df.groupby(['player_name'])['stats.goals.scored'].sum().sort_values(ascending = True)
df = df.reset_index()
x = df['stats.goals.scored'].tolist()
y = df['player_name'].tolist()
fig = px.bar(df,
x=x,
y=y,
orientation='h',
title='Top Goal Scorers - EPL 2020/2021 - Up to Game Week ' + str(df.shape[0]),
height=400,
text=x,
labels={'x':'Goals', 'y':'Player Name'})
fig.update_layout(xaxis_title="Goals Scored", yaxis_title="Player", plot_bgcolor="#FAFAFA")
fig.update_traces(textposition='outside', textfont={'color': 'white'})colours = ['blue',] * df.shape[0]
colours[df[df['player_name'] == player].index[0]] = 'crimson'
fig.update_traces(marker_color=colours)
fig = apply_consistent_style(fig)
fig.update_yaxes(title_font=dict(size=16, color='white'), tickfont=dict(family='Courier', color='white', size=12))
fig.update_xaxes(title_font=dict(size=16, color='white'), tickfont=dict(family='Courier', color='white', size=14))
fig.show(config={"displayModeBar": False, "showTips": False});
def plot_line_plot(df, player):
df = df[df['stats.shots.shots_total'].notna()]
x = df[df['player_name'] == player][['stats.shots.shots_total', 'fixture_string']]['fixture_string']
y = df[df['player_name'] == player][['stats.shots.shots_total', 'fixture_string']]['stats.shots.shots_total']
y1 = df[df['player_name'] == player][['stats.shots.shots_on_goal', 'fixture_string']]['stats.shots.shots_on_goal'] fig = go.Figure()
fig.add_trace(go.Scatter(x=x, y=y,
mode='lines+markers', name="Taken"))
fig.add_trace(go.Scatter(x=x, y=y1,
mode='lines+markers', name="On Target"))
fig.update_layout(title= player + " Shots Per Game - 2020/2021",height=400, xaxis_title="Fixture Date", yaxis_title="Shots Taken/On Target") fig.update_xaxes(tickangle=-60,
tickmode = 'array',
tickvals = x,
ticktext= [y[-11:-1] for y in x])
fig.update_layout(hovermode="x unified")
fig.update_layout(hoverlabel=dict(bgcolor="white",font_size=12,font_ family="Rockwell"))fig.update_layout(showlegend=False)
fig = apply_consistent_style(fig)
fig.show(config={"displayModeBar": False, "showTips": False});
def plot_scatter_plot(df, player):
df = df[df['stats.passing.accurate_passes'].notna()]
x = df[df['player_name'] == player]['stats.passing.accurate_passes']
y = df[df['player_name'] == player]['stats.passing.passes']
x = np.array(x, dtype=float)
y = np.array(y, dtype=float)
fig = px.scatter(df,
x=x,
y=y,
title= player + " Attempted Passes vs. Accurate Passes - 2020/2021",
height=400,
labels={'x':'Completed', 'y':'Attempted'}, trendline='ols', trendline_color_override="red") fig.update_layout(xaxis_title="Accurate Passes", yaxis_title="Attempted Passes") fig.update_traces(marker_color='blue') fig = apply_consistent_style(fig)
fig.update_xaxes(showgrid=True)
fig.update_yaxes(showgrid=True)
fig.show(config={"displayModeBar": False, "showTips": False});#start of computation
epl_strikers_df = pd.read_csv("data/epl_top_strikers_2020_2021.csv")#convert columns to integers
columns_to_convert_to_ints = ['stats.shots.shots_total','stats.shots.shots_on_goal','stats.goals.scored','stats.passing.total_crosses','stats.passing.crosses_accuracy','stats.passing.passes','stats.passing.accurate_passes','stats.passing.passes_accuracy','stats.passing.key_passes','stats.dribbles.attempts','stats.dribbles.success','stats.dribbles.dribbled_past','stats.other.aerials_won','stats.other.offsides','stats.other.hit_woodwork','stats.other.minutes_played']
epl_strikers_df[columns_to_convert_to_ints] = epl_strikers_df[columns_to_convert_to_ints].astype('Int64')
Streamlit Code:
import streamlit as st
#set the app to be the full page width
st.set_page_config(layout="wide")st.title('Streamlit Example Soccer Analytics Dashboard')left_column, right_column = st.beta_columns(2)
# You can use a column just like st.sidebar:
left_column.text('Choose A Player for Analysis:')# Or even better, call Streamlit functions inside a "with" block:
with right_column:
player = st.selectbox('', list(epl_strikers_df['player_name'].unique()))# Space out the maps so the second one is 3x the size of the other three
player_image_container, horizontal_bar_container = st.beta_columns((1, 3))with player_image_container:
st.image(get_and_display_player_image(epl_strikers_df, player), width=300)with horizontal_bar_container:
st.plotly_chart(plot_horizontal_bar(epl_strikers_df, player),
use_container_width=True
)line_plot_container, scatter_plot_container = st.beta_columns(2)with line_plot_container:
st.plotly_chart(plot_line_plot(epl_strikers_df, player),
use_container_width=True
)with scatter_plot_container:
st.plotly_chart(plot_scatter_plot(epl_strikers_df,player),
use_container_width=True
)
With just 17 lines of code added to the ‘Baseline Code’ above (including library importation), Streamlit has produced an interactive dashboard application from our Python script. This is the strength of Streamlit — rapid dashboard prototyping, with minimal effort.
The dashboard so far:
Not bad, but we can do better!
Streamlit Code After Markdown Touch-Ups:
I have bolded the additional lines of code used in this section. These lines of code are used to achieve a more granular level of layout control. Many of these additional lines exploit the st.markdown function, setting the ‘unsafe_allow_html’ argument to True.
import streamlit as st
#set the app to be the full page width
st.set_page_config(layout="wide")background_image = '''
<style>
body {
background-image: url("https://www.lefthudson.com/wp-content/uploads/2019/11/soccer-field-wallpapers-lovely-backgrounds-real-madrid-2017-wallpaper-cave-this-week-of-soccer-field-wallpapers.jpg");
background-size: cover;
}
</style>
'''st.markdown(background_image, unsafe_allow_html=True)
st.markdown("<style> body {color: white;}</style>", unsafe_allow_html=True)
st.markdown("<h1 style='text-align: center; margin-top: 15px;'>Streamlit Example Soccer Analytics Dashboard</h1>", unsafe_allow_html=True)
st.markdown("<style> .css-18c15ts {padding-top: 1rem; margin-top:-75px;} </style>", unsafe_allow_html=True)left_column, right_column = st.beta_columns(2)left_column.text(' ')
left_column.text(' ')
left_column.text(' ')
left_column.text('Choose A Player for Analysis:')with right_column:
player = st.selectbox('', list(epl_strikers_df['player_name'].unique()))# Space out the maps so the second one is 3x the size of the other three
player_image_container, horizontal_bar_container = st.beta_columns((1, 3))player_image_container.text(' ')
player_image_container.text(' ')
player_image_container.text(' ')with player_image_container:
st.image(get_and_display_player_image(epl_strikers_df, player), width=300)with horizontal_bar_container:
st.plotly_chart(plot_horizontal_bar(epl_strikers_df, player),
use_container_width=True
)line_plot_container, scatter_plot_container = st.beta_columns(2)with line_plot_container:
st.plotly_chart(plot_line_plot(epl_strikers_df, player),
use_container_width=True
)with scatter_plot_container:
st.plotly_chart(plot_scatter_plot(epl_strikers_df,player),
use_container_width=True
)
The finished product:
That’s better!
Thank you for reading!
If you enjoyed this article feel free to give it a clap and a share. How has your experience with Streamlit been? Are there any issues or features you’ve encountered that weren’t touched upon in this article? Let me know below!
Although every aspect of this article was thoroughly researched, due to the scope of the content herein and the everchanging nature of these newer dashboarding frameworks some aspects may be incorrect or have become outdated. I have checked the veracity of every sentence in this article, however, it is still possible I may have made a mistake. If you notice any inaccuracies please comment them below or message me on LinkedIn so that I can rectify them. Thank you!
Follow me on Medium to keep up to date with the coming articles in this series on Plotly Dash, Panel, & Voilà.
Find out more about me on my LinkedIn.
Stephen Kilcommins
