Among Us EDA Web Application using Streamlit
Hello Everyone! We continue our project regarding to Among Us Game User Ratings and Comments from Google (see “Our Projects Section” to sneak peek about our previous projects). In this ocassion, we will wrap our previous project result into a web application, and deploy it so that it is more easier to be accessed.
In case you missed it, in our previous project, we made a simple Exploratory Data Analysis (EDA) from the Google Play Store User Ratings and Comments for Among Us Game. The data were scrapped from Google Play Store User Rating and Comments for Among Us Game with the range of September 22nd to October 20th.
Our previous project analysis and graphs creation were made using Python with Jupyter Notebook as its platform. While it’s nice to use Jupyter Notebook for exploring the data, it’s hard to be accessed by non-programers that mostly prefers the end product over the process. Based on the problem, one of the option is to create a web application containing all the needed end result. Funny though, it raised another complex problem as creating a web application is not that easy. Lucky us, we heard about Streamlit, an open source library that easily turns Python code into a web application.
Getting Started with Streamlit
As the Streamlit homepage tells, it offers “the fastest way to build and share data apps, turn data scripts into sharable web apps in minutes, all in Python, all for free, no front-end experience required”. Interested with it, we have a try. Even though we really want to use Streamlit with Jupyter Notebook, we still have no luck in doing it. Instead, we use native Python and Visual Studio Code as the code editor. Take a sneak peek to what we’ve created here (http://project-streamlit.herokuapp.com/).
Let us split the code into three versions: intro, basic, advanced.
Introduction
For introduction, let us create a very simple web application using Streamlit in under 10 lines of code (or 15 if we prefer to make it easier for the code to be read). We begin by installing the Streamlit package. From your terminal (or CMD, or PowerShell), simply execute pip install streamlit. After that, we create a project folder (might be anywhere you want) and create a Python file (e.g. app_basic.py).
In the file, import the streamlit package by adding import streamlit as st. Let’s say we want to make a “Home” page. We can do that in Python and Streamlit by defining a function that contains all the needed components in the page. Some of Streamlit functions that we will often use are streamlit.title(), streamlit.header(), and streamlit.markdown(). As the function suggest, streamlit.title() is called to create a page title, streamlit.subheader() is used for the page title subheader, and streamlit.markdown() is used to create a paragraph in the page. For naming convention, it’s best to name the function with the purpose of the page.
Altough you can directly run it by addingif __name__ == '__main__': and call the home() function in the code, we want to make it more scalable by wrapping it in a main() function. Altogether, what we need to make a simple web application using Streamlit is these lines of code:
Let’s try to run the application on our local host (i.e. only you can access it). To run it, open the terminal, and navigate to the project folder of app_intro.py. Execute streamlit run <your-application-name>.py or as in this example streamlit run app_intro.py. Voila! Your (might be) first Streamlit web application is up and running!
Basic
We will now want to implement our previous project to be available in our Streamlit web application. You might want to continue using the same file as the intro version, or you might want to start again from scratch, you are free to choose. Basically, we will copy some parts of the previous project, and tune it in to be shown in the web application.
We begin by importing the needed package for using Streamlit and the one that we used in creating the graphs in our previous project:
Still the same with the previous project, we will want to read the Excel file and store it as a DataFrame df.
Assume that we want two have menus: “Home” (the one we created in intro) and “Dashboard” (the one that we want to put our graphs in). To create a navigation bar, we can usestreamlit.sidebar.selectbox() that Streamlit provides. We might also want to make the title of the pages are the same as the menu we created on the sidebar. If that so, we will need to set the streamlit.sidebar.selectbox() into a variable, and pass it to the page function (i.e. home(main_mode)).
We shall modify our previous home function a little so that it will accept a variable (i.e. main_mode ), and use it in streamlit.title().
For the dashboard, we create a new function called dashboard() (naming based on the page purpose) that accepts a variable mode. As we already loaded the DataFrame df, we can use it and present it in Streamlit way. Let’s start by creating a table of df.head() that shows first 5 data of the DataFrame.
Continuing on the dashboard() function, in plotting the rating distribution graph, instead of using fig.show() like the one in Jupyter Notebook, we use streamlit.plotly_chart() as it is a function of Streamlit that receive a plotly chart and plot it the Streamlit way.
It applies the same when plotting the “User Rating Over Time”:
So the entiredashboard() function will look like this:
Advanced
It’s kinda unrelated with creating graphs or charts or data analysis, but some of you might wonder is it possible to implement a custom HTML and CSS in Streamlit. While it’s possible, we thought that it’s a little bit complex, or maybe it’s just us that haven’t explore much. Please let us know if maybe you have suggestions to improve what we have done.
As simple as it sounds, we tried to put our personal image to be shown in the web. Here’s what we achieved:
Although we managed to make it, we feel that the codes were a little bit messy and should have been managed better. For research purpose, we shared what we did.
The modifications mostly took in the home() function and an addition in the main code. We defined the image_path so that it will be easier to maintain when there is a change in the image path.
image_path = drive_path + 'images/'We also found that Streamlit could not read the image as is, and we have to encode it to Base64 for the image to be read. After we import the library by adding import base64 in the import package part, we create a function image_to_base64() for code reusability.
We convert each image of our team member to be used by the html later.
We can use our custom HTML by calling the streamlit.markdown() function with the parameters of the HTML piece of code, and unsafe_allow_html set to True. For code readability, we stored the HTML piece of code in a variable, combined with f-String formatting to get our image resource by setting the src in img tag to src=”data:image/jpg;base64,{avatar_imam}. The content is then repeated for the other images of our next 6 members.
To make things work, we also have to import the CSS and the JavaScript file used for this. We wrapped it in a function to be easily called.
And we call the function in the main() function.
All done! Our images is now shown beautifully on the web.
Deploying to Heroku
After we make our Streamlit Python application on our local host, now we try to deploy our apps over the Internet. One of the simplest ways to deploy our app is using Heroku. It is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.It is easy to use and — IT IS FREE!
We begin by creating a Heroku account in https://www.heroku.com/ (or log in if in any chance you already have one). After we logged into our account, we can click the “New” button and click on Create New App to deploy our application.
We put the project name and the region where we want to deploy our application. Let’s say we will name our project “project-streamlit” and use “United State” Region. Click on “Create App” to make the project. In this post, the “project-streamlit” app name is not available because we have already used this name for this project.
Heroku requires several files to do the deployment, such as the Python file itself (e.g. app_advanced.py), a Procfile file, a Requirements file and a Setup file and we have to create it. We can use our editor (Visual Studio Code) to make this file. Write web:sh setup.sh && streamlit run <python-file> on our editor and save as the file with the name of Procfile. In our case,
To make setup file named “setup.sh” and write
Last, we create a new file on our editor and list all important package that we use on our application and save it as requirements.txt.
After we have these 4 files, we are ready to deploy our application. Heroku gives 2 alternatives to deploy: connect our Git Account to Heroku, or use the Heroku CLI. We will demonstrate the use of Heroku CLI from the website. Heroku CLI is used to connect our local host to Git, and get the SSH public key for deploying application in Heroku.
Write on our Terminal (or Conda Prompt) heroku login and connect our local host to our Heroku account.
After we logged in, we can initialize a new repository on our git by following these steps from heroku.
and We can deploy our application by following these steps.
- Write
git add . - Write
git commit -m “First try to deploy application”(or any informative message) - Write
git push heroku HEAD:masterand wait for the process - If everything is done, we can open our application by writing
heroku open
and voila! Our application has been deployed on Heroku. We can go to https://<app-name>.herokuapp.com/ (or in our case https://project-streamlit.herokuapp.com/) to check out on your deployed application.
Conclusion
We showed a simple way to create a web application using Python and Streamlit. We started by creating a simple Streamlit web app, moving to using our previous EDA of the Google Play Store User Ratings and Comments for Among Us Game as the object to be put in the web, moving to implementing custom HTML and CSS in Streamlit. We also shared about deploying the project in Heroku so that it is accessible for anyone around the web, and you can check it out here. There are still a lot for us to learn about Streamlit, but as far as it goes, we are happy with our current progress.
Remarks
- Please find the source code used for this post here.
- If you are using Anaconda as your Python Compiler while testing before deploying, you might get an error message
DLL load failed while importing ft2font. From what we did, we tackle the error by uninstalling and reinstallmatplotlib. You can do that by executingpip unistall matplotlibin the terminal, followed bypip install matplotlib. - You might notice that the title of the application shown in Tabs is the same as the project file name (e.g.
app_advanced.py). So make sure you named your file right, and any chance you want to use a space-separated title, make sure to use the double quote around the file name when running Streamlit (i.e.streamlit run "Among Us.py").
- This post is a join writing between me and Imam Bhaskara, so we will post the story in both of our Medium. Please also find his story here, and if you don’t mind, support us both :D
- Feel free to discuss with us for anything :)
Our Projects
- Among Us Google Play Store User Rating Visualization Using Tableau (source)
- Among Us Google Play Store Rating Exploratory Data Analysis using Python (source)
- Among Us EDA Web Application using Streamlit (source)
Our Team
Above, from left to right: Imam Bhaskara, Ricky Nauvaldy Ruliputra, Rahman Firmansyah
Below, from left to right: Cahya Putera, Winata Syahputera, Muhamad Teo Khibran, Arnold P
