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: I import the necessary libraries to generate sample data and create visualizations.
2. Generation of sample data: I create a Pandas DataFrame with random data to use in our visualizations.
3. Dashboard setup: I set the title of the dashboard using st.title().
4. Creation of visualizations:
   • I display a line chart using st.line_chart().
   • I create an interactive scatter plot using Altair and display it with st.altair_chart().

Code Explanation

1. 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.

1. Generation of sample data:
2. I create a Pandas DataFrame called data with two columns: 'x' and 'y'.
3. The 'x' column contains integer values from 0 to 99 using np.arange().

4. The 'y' column contains random values between 0 and 1 using np.random.rand().

5. Dashboard setup:

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

7. Creation of visualizations:

• I display a line chart using st.line_chart() and passing the data DataFrame as an argument.

• I 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.

• I 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, I have learned how to create an interactive dashboard using Streamlit. I generated sample data, created visualizations using Streamlit and Altair, and explained each section of the code. Finally, I 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.