Research Paper Page 1

Nityananda krishnamoorthy, Sahitya Priyadharshini K,

Department of Computer Science and Engineering, Department of Computer Science and Engineering,
Arunai Engineering College, Arunai Engineering College,
Tiruvannamalai -606603,TamilNadu. Tiruvannamalai -606603,TamilNadu.
E-mail : [email protected]. E-mail : [email protected]

Build a
Data Base Web App
in using Streamlit
Abstract:
Create a Data Science Web App Using Python with Stream-
Streamlit is Python framework for building we- lit. You will now become accustomed to working with
bapps,Machine Learning, and Data Science. It is a Python and Streamlit to create stunning and interactive
lightweight library that will allow developers to online applications without having any prior web pro-
quickly and Ef ciently create web applications from gramming knowledge! In less than 100 lines of Python code,
scratch. Streamlit includes the most commonly we'll load, explore, visualise, interact, and create dash-
needed libraries for Python backend development boards! By completing each stage, we shall succeed. Create
along with Several wrappers for popular machine Web Apps from Simple Python Scripts The Motor Vehicle
learning packages like TensorFlow, Scikit-learn and Collisions must be loaded. Data Map data visualisation Ta-
more. Streamlit can build you an app.In no time at bles with interactive lters . Filtered Data Plotting on an
all and your app can share-data with other apps de- Interactive 3D Map with Both graphs and histograms
veloped in any framework. Choose Data Using Dropdowns.

1.Introduction to Streamlit 1.2 Installation and running

. Streamlit 1.2.1 Installing Streamlit
Streamlit is an open-source python framework 1. Make sure you have python installed in your
for building web apps for Machine Learning
system
and Data Science. We can instantly develop
web apps and deploy them easily using Stream- 2. Use the following command to install
lit. Streamlit allows you to write an app the
Streamlit,
same way you write a python code. Streamlit
makes it seamless to work on the interactive
loop of coding and viewing re- sults in the web
app.
1
1
fi
fi
 Research Paper Page 2

1.2.2 The ow of Streamlit while developing a Whenever a callback is passed to a widget via
web app Running a Streamlit app the on_change ( or on_click ) parameter, the
callback will always run before the rest of your
First step to create a python script with Streamline script.
commands and then execute the script using the
command below. If you have some costly operations while rerun-
ning your web app, like loading data from data
bases, you

can use streamlit’s st.cache method to cache

1.3 Development ow those datasets, so that it loads faster.
Every time you want to update your app, save the
1.5 Display and style data
source le. When you do that, Streamlit detects if
there is a change and asks you whether you want to There are a few ways to display data(tables, ar-
rerun your app. rays, data frames) in Streamlit apps. Below, you
will be introduced to st.write( ), which can be
used to write anything from text to tables. After
that, let’s take a look at methods de- signed
Choose “Always rerun” at the top-right of your speci cally for visualising data.
screen to automatically up- date your app every
time you change its source code. 1.5.1 Write a data frame

This allows you to work in a fast interactive You can pass almost anything to st.write( ): text
method: you do some code, save it, try it out live data, Matplotlib gures, Altair chart, and more.
and then re- peat the same process until you get a Don’t worry, Streamlit will gure it out and
desired result. render things the right way.

1.4 Data ow Streamlit provides you with many methods to

display various types of data like arrays, tables,
Streamlit’s architecture allows you to write apps the and data frames.
same way you write normal Python scripts. To un-
lock this, Streamlit apps have a unique data ow: • To write a string simply use, st.write(“Your
any time something must be updated on the screen, string”)
Streamlit reruns your entire Python script from top
to bottom.
• To display a data frame use, st.dataframe
method
This can happen in Two situations:

1. Whenever you modify your app’s source

code.

2. Whenever a user interacts with widgets in

the app. For example, when dragging a slider
entering text in an input box, to clicking a
button.
fi
fi
fl
fl
fi
fl
fi
fl
 Research Paper Page 3

Thus the above program will execute with desire re-

sult as shown below,

C. Checkbox in Streamlit:

1.5.2 Widgets

There are several widgets available in streamlit, like

st.selectbox, st.check- box, st.slider, and etc. Let us
see an example for widget in streamlit.

A. Slider in Streamlit:

During the rst run, the web app would output the string
“0 squared is 0”, and then if a user increases or decreases
the widget, the code is rerun by the Streamlit from top to
bottom and assigns the present state of the widget to the The variable checkbox_one and checkbox_two contain
variable. a boolean value. If we have selected the checkbox
“Yes” then checkbox_one will be having a True value
e. else a False value. The executed result as follows,

For example, if the user slides the slider to point 19,

Streamlit will rerun the code and output the follow-
ing string “19 squared is 361”.

B. Select box in Streamlit: D. Line chart in Streamlit:

The rst argument to st.selectbox( ) is the string to dis-

play and the second argument is a list of options to select.
And then we display the selected value in the app using
st.write( ) method. The result will be shown below,

The DataFrame contains two-dimensional data

with ten rows and two columns, by using st.-
fi
fi
 Research Paper Page 4
line_chart we can plot those data in the app.Ex-
ecuted result as follows,

The above visual is the desire result for the sidebar in

Streamlin.

2. Develop a WEB APP FOR DATA

SCIENCE using streamlin
Let’s take a multi-class classi cation problem in Data
E. Plotly charts in Streamlit: science and build a web app for it. The data used here
The st.plotly_chart method displays the provided is Motor_Vehicle_Collisions_Crashes.csv dataset.
gure object of plotly.
The dataset description:

- Number of Rows: 1.94M

- Number of Columns: 29

F. Sidebar in Streamlit:

The st.sidebar.selectbox method makes the

select box to appear in the side box.
fi
fi
Research Paper Page 5

What happens in the above code?

First, an instance of the class StreamlitApp is

created and contruct_app method of the class is
invoked. The construct_app method does the
following steps,
 Research Paper Page 6

• Turn Simple Python Scripts into Web Apps by using

streamline library.
• Constructs the Data science Web app for New York
Cities most motor vehicle collision dangerous affected
area locating Data Base Web app though load a motor
vehicle collision crashes dataset.
• Though the loaded dataset, Now implemented the
Visualise Data on a Map with the ‘latitude’ and longi-
tude.
• When a user interacts with a widget the entire code is
executed again from the top to the bottom.To avoid
this, I have used st.cache method for executed the
dataset much more faster.
• Constructs the slider for Filtering Data and Interactive
Tables on the dashboard.
• I have plotted and Filtered Data on a 3D Interactive
Map which plot the layers over the map to visualize
the most people affected in particular hours using st.-
plotly_chart method in the streamlit app. Streamlit app
• After that, I have created a Charts and Histograms with
more interactive widgets tools such as zoom-in, zoom-
out, alter- lters and more. Here I have used plotly to
plot a histograms using date.
• After this process, it fetches the selected values of the
drop-down list and predicts top 5 most affected and
dangerous streets by the affected classes using the data.
• Through st.checkbox method to visualise the raw data of
motor vehicle collision dataset using DataFrame method
of write script.
fi