Creating a Dashboard with Streamlit

Introduction
In this document, we will explore how to create an interactive dashboard using Streamlit, an open-source tool for building web applications in Python. Streamlit simplifies the development process by allowing you to create web interfaces with just a few lines of code.

Requirements

To follow this example, you will need to have Python installed and the following libraries:

• streamlit
• pandas
• numpy
• altair

You can install them using pip:

pip install streamlit pandas numpy altair

Code Structure

The code is divided into several sections:

1. Library imports: We import the necessary libraries to generate sample data and create visualizations.
2. Generation of sample data: We create a Pandas DataFrame with random data to use in our visualizations.
3. Dashboard setup: We set the title of the dashboard using st.title().
4. Creation of visualizations:
   • We display a line chart using st.line_chart().
   • We create an interactive scatter plot using Altair and display it with st.altair_chart().

Code Explanation

Library imports:

streamlit as st: We import the Streamlit library and rename it as st for easier use.
pandas as pd: We import Pandas and rename it as pd.
numpy as np: We import NumPy and rename it as np.
altair as alt: We import Altair and rename it as alt.

Generation of sample data:

We create a Pandas DataFrame called data with two columns: 'x' and 'y'.
The 'x' column contains integer values from 0 to 99 using np.arange().
The 'y' column contains random values between 0 and 1 using np.random.rand().

Dashboard setup:

We set the title of the dashboard using st.title() and passing the title as an argument.

Creation of visualizations:

We display a line chart using st.line_chart() and passing the data DataFrame as an argument.
We create an interactive scatter plot using Altair:

alt.Chart(data): We create a chart object from the data DataFrame.
.mark_circle(): We specify that we want to use circles as marks.
.encode(x='x', y='y', tooltip=['x', 'y']): We assign the 'x' and 'y' columns to the x and y axes respectively, and specify that we want to show the 'x' and 'y' columns as tooltips.
.interactive(): Makes the chart interactive, allowing the user to zoom and pan.

We display the Altair chart using st.altair_chart() and pass the chart object as an argument. We also specify use_container_width=True so that the chart takes up the full width of the container.

Deployment on Streamlit Cloud

To deploy this Streamlit app, you can use Streamlit Cloud:

1. Upload your code to a GitHub repository.
2. Sign in to Streamlit Cloud.
3. Connect your GitHub repository.
4. Deploy your app with a few clicks.

Streamlit Cloud handles the entire deployment process, making it very easy to share your applications with the world.

Results

Repository url: [](https://github.com/FabianChavezLinares/Research-Group-Activity.git)

Page url: https://research-group-activity-bi-2024-ii.streamlit.app

Conclusion

In this document, We have learned how to create an interactive dashboard using Streamlit. We generated sample data, created visualizations using Streamlit and Altair, and explained each section of the code. Finally, We mentioned how to deploy the application on Streamlit Cloud to share it with other users.

Streamlit greatly simplifies the process of creating interactive web applications in Python, making it a valuable tool for data scientists and developers who want to share their visualizations and analyses in an easy and quick manner.