Among Us EDA Web Application using Streamlit
By: Imam Bhaskara
Tags: Heroku, Data Visualization, 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.

Create a home function

Altough you can directly run it by adding if __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:

Full code of app_intro.py

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!

You will see a notification like this when you successfully run your Streamlit file. Follow the http://localhost:8501 link.

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:

Import necessary package

Still the same with the previous project, we will want to read the Excel file and store it as a DataFrame df . Before we can read Excel file, we have to install excel reader libraries, xlrd ( pip install xlrd ) and openpyxl ( pip install openpyxl ).

Reading XLSX File

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 use streamlit.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) ).

Modify the main function with sidebar and mode selection

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() .

Home function modification with mode selection and title from mode

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.

Using streamlit.table() to create table in Streamlit

Our web displaying the sidebar and the Data Frame table

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.

Plotting Plotly chart the Streamlit way

Rating Distribution chart, basically the same as the one we created in the previous project

It applies the same when plotting the “User Rating Over Time”:

Plotting Plotly chart the Streamlit way for User Rating Over Time

User Rating Over Time chart, basically the same as the one we created in the previous project

So the entire dashboard() function will look like this:

Complete dashboard function

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:

Putting images in the Streamlit web

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.

Function converting image to base64

We convert each image of our team member to be used by the HTML later.

Converting each image to be used by the HTML

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.

Creation HTML template to make it readable by streamlit

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.

CSS get started code

And we call the function in the main() function.

Modify the main function with sidebar and mode selection

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.

Heroku Dashboard

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 Create New App Page

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,

Procfile file code

To make setup file named “setup.sh” and write

Setup.sh Code

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.

Requirements.txt Code

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.

Deployment method selection in Heroku

Write on our Terminal (or Conda Prompt) heroku login and connect our local host to our Heroku account.

Command line illustration of executing “heroku login”

After we logged in, we can initialize a new repository on our git by following these steps from heroku.

Initialize a new respository function

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:master and 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 reinstall matplotlib . You can do that by executing pip unistall matplotlib in the terminal, followed by pip install matplotlib .

. From what we did, we tackle the error by uninstalling and reinstall . You can do that by executing in the terminal, followed by . 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" ).

Title on the tab is the same as the file name

Change as you want but make sure to use double quote around the file name for space-seperated title when running Streamlit