{"id":693,"date":"2022-01-18T13:35:00","date_gmt":"2022-01-18T08:05:00","guid":{"rendered":"https:\/\/geekpython.in\/?p=693"},"modified":"2023-08-15T17:25:44","modified_gmt":"2023-08-15T11:55:44","slug":"python-web-app-under-100-lines-of-code-using-streamlit","status":"publish","type":"post","link":"https:\/\/geekpython.in\/python-web-app-under-100-lines-of-code-using-streamlit","title":{"rendered":"How to Create a Webapp Using Streamlit in Python – Covid19 Webapp"},"content":{"rendered":"\n

Less than 100 lines of code, I made a web app with just under 100 lines of code using Streamlit<\/a>, Plotly<\/a>, and Pandas<\/a> which is an open-source data analysis and manipulation tool, built on top of the Python programming language.<\/p>\n\n\n\n

Well, if you are not aware of what is Streamlit then I will give you a quick idea about Streamlit.<\/p>\n\n\n\n

Streamlit<\/strong> is an open-source app framework that allows you to create interactive and dynamic web apps without even knowing any frontend frameworks.<\/p>\n\n\n\n

Let’s get back to the topic, I am gonna walk you through the project so that you all can easily understand the code and hope to make a better web app by yourself.<\/p>\n\n\n\n

<\/a>Introduction<\/h1>\n\n\n\n

The web app is all about Exploratory<\/strong> Data<\/strong> Analysis<\/strong> and Visualization<\/strong> of Covid-19<\/strong> data from India in the year 2020.<\/p>\n\n\n\n

Well, I found the data on Kaggle<\/a>. You can download any kind of dataset for free on Kaggle.<\/p>\n\n\n\n

Let’s get back to the track, we gonna have a nice interactive user interface with an interactive sidebar where we’ll have some user inputs to select the type of graphs to visualize data.<\/p>\n\n\n\n

Last but not least, we gonna display reports like which state has the highest cases or lowest cases, etc.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Now the talk is over, let’s head over to the code. Let’s get started.<\/p>\n\n\n\n

<\/a>1. Setting up the Project<\/h1>\n\n\n\n

First of all, make sure Python<\/a> is installed on your system.<\/p>\n\n\n\n

Now open up your favorite IDE or Code Editor and start an empty project.<\/p>\n\n\n\n

Make a directory and then fire the terminal in the code editor or IDE, then install the necessary libraries which are used in this project.<\/p>\n\n\n\n

pip install streamlit pandas plotly<\/pre><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Now check if the streamlit is successfully installed on your system just run the following command in the terminal.<\/p>\n\n\n\n
streamlit hello<\/pre><\/div>\n\n\n\n
If everything is well and good then head over to the next step.<\/p>\n\n\n\n
<\/a>2. Cloning the Project<\/h1>\n\n\n\n
To clone the project head over to my Github profile and copy the repository URL.<\/p>\n\n\n\n
Visit this repository<\/a> to copy the URL and then run the following command in the terminal.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
git clone repository_url_here<\/pre><\/div>\n\n\n\n
Note<\/strong>: make sure the git<\/strong> is installed on your system.<\/p>\n\n\n\n
If you don’t know git<\/code> then don’t worry, simply download the project as a ZIP file and extract it to the directory.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
If every step is carried out successfully then proceed to the next step.<\/p>\n\n\n\n
<\/a>3. Understanding the Code<\/h1>\n\n\n\n
# Importing neccessary libraries\nimport streamlit as st\nimport pandas as pd\nimport plotly.express as px\n\nst.title(\"Covid-19 EDA and Visualization\")\n\nst.markdown('''\nA Web App to visualize and analyze the Covid-19 data from India\n* **Libraries Used:** Streamlit, Pandas, Plotly\n* **Data Source:** Kaggle\n''')\n# Inserting Image\nst.image('Covid-Banner.png', caption=\"Image by Sachin\")\n# Reading csv data\ndata = pd.read_csv('Covid-19.csv')\n# Displaying Data and its Shape\nst.write(\"**Covid-19 dataset**\", data)\nst.write(\"Shape of data\", data.shape)\n# Header of sidebar\nst.sidebar.header(\"User Input\")\n# Creating selectbox for Graphs & Plots\ngraphs = st.sidebar.selectbox(\"Graphs & Plots\", (\"Bar Graph\", \"Scatter Plot\", \"HeatMap\", \"Pie Chart\"))\n# Sorting the columns\nindex = sorted(data.columns.unique())\n# Setting default value for x, y, and color\ndefault_index_x = index.index('State\/UTs')\ndefault_index_y = index.index('Total Cases')\ndefault_index_col = index.index('Death Ratio (%)')\n\n\n# Creating selectbox for x, y and color label and setting default value\nx_label = st.sidebar.selectbox(\"X label Parameter\", index, index=default_index_x)\ny_label = st.sidebar.selectbox(\"Y label Parameter\", index, index=default_index_y)\ncol = st.sidebar.selectbox(\"Color\", index, index=default_index_col)\n\n\nst.markdown('''\n## **Visualization**\n''')\n# function to plot graphs\ndef visualize_plotly(graph):\n    if graph == \"Bar Graph\":\n        st.write(graph)\n        fig = px.bar(data, x=x_label, y=y_label, color=col)\n\n    elif graph == \"Scatter Plot\":\n        st.write(graph)\n        fig = px.scatter(data, x=x_label, y=y_label, color=col)\n\n    elif graph == \"HeatMap\":\n        st.write(graph)\n        fig = px.density_heatmap(data, x=x_label, y=y_label, nbinsx=20, nbinsy=20)\n\n    else:\n        st.write(graph)\n        fig = px.pie(data, values=x_label, names=data[y_label])\n\n    return fig\n\nfigure = visualize_plotly(graphs)\n\nst.plotly_chart(figure)\n\nst.markdown('''\n## **Report**\n''')\n# Creating buttons to display reports\nif st.button(\"Highest Cases\"):\n    st.header(\"Highest Cases in a State\/UT\")\n    highest_cases = data[data['Total Cases'] == max(data['Total Cases'])]\n    st.write(highest_cases)\n\nif st.button(\"Lowest Cases\"):\n    st.header(\"Lowest Cases in a State\/UT\")\n    lowest_cases = data[data['Total Cases'] == min(data['Total Cases'])]\n    st.write(lowest_cases)\n\nif st.button(\"Highest Active Cases\"):\n    st.header(\"Highest Active Cases in a State\/UT\")\n    high_active_cases = data[data['Active'] == max(data['Active'])]\n    st.write(high_active_cases)\n\nif st.button(\"Lowest Active Cases\"):\n    st.header(\"Lowest Active Cases in a State\/UT\")\n    low_active_cases = data[data['Total Cases'] == min(data['Total Cases'])]\n    st.write(low_active_cases)\n\nif st.button(\"Highest Death Ratio (%)\"):\n    st.header(\"Highest Death Ratio (%) in a State\/UT\")\n    high_death = data[data['Death Ratio (%)'] == max(data['Death Ratio (%)'])]\n    st.write(high_death)\n\nif st.button(\"Lowest Death Ratio (%)\"):\n    st.header(\"Lowest Death Ratio (%) in a State\/UT\")\n    low_death = data[data['Death Ratio (%)'] == min(data['Death Ratio (%)'])]\n    st.write(low_death)<\/pre><\/div>\n\n\n\n
Line 1 – 4<\/strong> — Importing the libraries which are used in the project.<\/p>\n\n\n\n
Line 6 – 12<\/strong> — By using streamlit’s title and markdown feature, we are setting up the title and some description about the project.<\/p>\n\n\n\n
Line 13 – 19<\/strong> — In that portion, we are inserting the banner image using streamlit’s image feature and reading the Covid-19<\/strong> data using Pandas<\/strong> library, and then finally displaying it on the web app.<\/p>\n\n\n\n
Line 20 – 29<\/strong> — Creating a sidebar and select boxes in which users can select different graphs and plots. Additionally sorting the columns and setting the default values for the x-axis, y-axis, and color parameters.<\/p>\n\n\n\n
Line 32 – 35<\/strong> — Creating the select boxes for the x-axis, y-axis, and color labels using st.sidebar.selectbox<\/code> and assigning the default values to them which we created just above.<\/p>\n\n\n\n
Line 38 – 63<\/strong> — Setting a heading for visualization and creating a function to show different-different graphs. Here, I created a function visualize_plotly(graph)<\/code> which takes graph<\/code> and declared if-else<\/code> conditions in which if the user will click on Bar Graph<\/strong> then it will visualize data on the bar graph and the same goes for other graphs also. Then creating a variable figure<\/code> to call the function visualize_plotly()<\/code> and passing the graphs<\/code> variable from line 23.<\/p>\n\n\n\n
Then using st.plotly_chart(figure)<\/code> to display graphs.<\/p>\n\n\n\n
Line 65 – 97<\/strong> — Creating a report section where we created buttons st.button<\/code> using streamlit and displaying it on web app.<\/p>\n\n\n\n
<\/a>4. Run the Script<\/h1>\n\n\n\n
Cool, we are at the end of this project. Now let’s see how our web app looks like.<\/p>\n\n\n\n
Run the following command in your terminal<\/p>\n\n\n\n
streamlit run your_project_name<\/pre><\/div>\n\n\n\n
<\/a>Conclusion<\/h1>\n\n\n\n
This web app is based on the older stats, you can try with a newer dataset on Covid-19.<\/p>\n\n\n\n
It is a beginner-friendly project or intermediate level to some extent, but you can take it to an advanced level by adding different datasets or adding more graphs.<\/p>\n\n\n\n
\n\n\n\n
\ud83c\udfc6Other articles you might be interested in if you liked this one<\/strong><\/p>\n\n\n\n
\u2705What is ABC of Python – Detailed guide on abstract base classes<\/a>?<\/p>\n\n\n\n
\u2705Displaying and Uploading images on the frontend using FastAPI<\/a>.<\/p>\n\n\n\n
\u2705What are __init__ and __call__ functions and what do they do<\/a>?<\/p>\n\n\n\n
\u2705Build APIs using the FastAPI web framework in Python<\/a>.<\/p>\n\n\n\n
\u2705Connect PostgreSQL database using psycopg2 in Python<\/a>.<\/p>\n\n\n\n
\u2705Tackle the shortage of data using data augmentation techniques<\/a>.<\/p>\n\n\n\n
\u2705Powerful one-liners in Python to boost the code<\/a>.<\/p>\n\n\n\n
\n\n\n\n
That’s all for now<\/strong><\/p>\n\n\n\n
Keep Coding\u270c\u270c<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
Less than 100 lines of code, I made a web app with just under 100 lines of code using Streamlit, Plotly, and Pandas which is an open-source data analysis and manipulation tool, built on top of the Python programming language. Well, if you are not aware of what is Streamlit then I will give you a quick idea about Streamlit. […]<\/p>\n","protected":false},"author":1,"featured_media":699,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"0","ocean_second_sidebar":"0","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"0","ocean_custom_header_template":"0","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"0","ocean_menu_typo_font_family":"0","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"0","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"off","ocean_gallery_id":[],"footnotes":""},"categories":[2,34,33],"tags":[28,12,35],"class_list":["post-693","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-python","category-streamlit","category-webapp","tag-project","tag-python","tag-streamlit","entry","has-media"],"_links":{"self":[{"href":"https:\/\/geekpython.in\/wp-json\/wp\/v2\/posts\/693","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geekpython.in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geekpython.in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geekpython.in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geekpython.in\/wp-json\/wp\/v2\/comments?post=693"}],"version-history":[{"count":13,"href":"https:\/\/geekpython.in\/wp-json\/wp\/v2\/posts\/693\/revisions"}],"predecessor-version":[{"id":1388,"href":"https:\/\/geekpython.in\/wp-json\/wp\/v2\/posts\/693\/revisions\/1388"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/geekpython.in\/wp-json\/wp\/v2\/media\/699"}],"wp:attachment":[{"href":"https:\/\/geekpython.in\/wp-json\/wp\/v2\/media?parent=693"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekpython.in\/wp-json\/wp\/v2\/categories?post=693"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekpython.in\/wp-json\/wp\/v2\/tags?post=693"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}