A Powerful Duo for Data Visualization: Streamlit and Plotly (2024)

Data visualization is a powerful technique for communicating insights from large amounts of data. In the world of Big data, data visualization tool helps you to identify patterns, trends, and outliers in your data.
Streamlit is a popular Python library that provides an intuitive and convenient way to develop interactive web applications specifically tailored for data science tasks. It offers an open and accessible framework, streamlining the process of creating dynamic web-based applications. Plotly is a Python visualization library that is used to create interactive visualization dashboard charts and graphs using Python and also deploy them to web apps. It is very efficient so we can create very powerful graphs with just a few lines of code. Plotly, on the other hand, is a versatile graphing library with a wide range of customizable charts and plots. When combined, Streamlit and Plotly offer a seamless environment for building captivating data visualizations. Can create beautiful, interactive data visualizations that can be used to explore and share your data.

Streamlit is a freely available Python library that simplifies the procedure of building and deploying interactive web applications for projects related to data science and machine learning. It greatly simplifies the creation of interactive visualizations, dashboards, and user interfaces, facilitating effortless data exploration and sharing. Streamlit’s syntax is intuitive and declarative, enabling developers to swiftly build applications. Its real-time capabilities enable users to observe immediate updates, making it a valuable tool for prototyping and presenting data-driven applications.

Before you get started, you’re going to need a few things:

• Your favorite IDE or text editor
• Python 3.7 — Python 3.11
• PIP

To install Streamlit, you can use pip, the package installer for Python. Here's how you can install Streamlit on your system:

To install Streamlit using pip:

pip install streamlit

Once the installation is finished, you can verify if Streamlit is installed correctly by running the following command:

streamlit --version

Example:

# Hello.py
import streamlit as st
st.title('Hello World!') # for Title
st.subheader('This is a simple Streamlit app.') #use for sub header
name = st.text_input('What is your name?') #for input Text Field
# Greeting
if name:
 st.write('Hello, ' + name + '!')
else:
 st.write('PLease Enter Your Name in the Given Text Field!')

To run the app by typing the following command in your terminal:

streamlit run .\Hello.py

We can customize the app theme in different ways.

In Streamlit, you can customize the styles of your web application using CSS. Here’s how you can apply custom styles to your Streamlit app:

1. Create a file named styles.css in the same directory as your Streamlit script.
2. In styles.css, define your custom styles using CSS syntax. For example:

style.css
body {
 font-family: Arial, sans-serif;
}
.header {
 background-color: #f2f2f2;
 padding: 10px;
 margin-bottom: 20px;
 text-align: center;
}
.chart {
 border: 1px solid #ddd;
 padding: 10px;
}

3. In your Streamlit script, import the streamlit module and use the st.markdown function to apply the custom styles. For example:

import streamlit as st
# Display the custom styles
st.markdown('<link href="styles.css" rel="stylesheet">', unsafe_allow_html=True)
st.markdown('<div class="header">Welcome to my Streamlit app</div>', unsafe_allow_html=True)
st.markdown('<div class="chart">This is a custom-styled chart</div>', unsafe_allow_html=True)

Certainly! Here’s a step-by-step guide on how to change the theme color in Streamlit and create documentation for your app:

1. Create a directory named .streamlit within the same directory as your Streamlit Python script.
2. Inside the .streamlit directory, create a file named config.toml.
3. Open the config.toml file and add the following lines to customize the theme color:

config.toml
[theme]
primaryColor="GREEN"
backgroundColor="#800d26"
titleColor="WHITE"
secondaryBackgroundColor="#262730"
textColor="##a20ccc"
font="sans serif"

Features of Streamlit.

• Easy to use: Streamlit is built with a user-friendly interface, ensuring that even beginners can easily navigate and utilize its features. With Streamlit, you can develop web applications using a few lines of code.
• Deployable: Streamlit apps can be deployed to the web with just a few clicks.
• Interactive: Streamlit apps are interactive, which means that users can interact with the data and see the results in real-time.
• Caching: Streamlit can cache expensive computations to improve performance.
• Community: Streamlit benefits from a thriving community of enthusiastic users and developers, ensuring ample support and assistance whenever you require it.
• Theming: Streamlit supports custom themes.
• Statefulness: Streamlit apps can be stateful, which means that they can remember the state of the app between user interactions.
• Deployment: Streamlit apps can be deployed to Heroku, Docker, or Google Cloud Platform.

Streamlit is a Python library that makes it easy to create interactive web apps for data science and machine learning. It is a powerful and user-friendly tool that can be used to prototype, explore, and visualize data, as well as build intuitive user interfaces and dashboards. Streamlit is a great choice for showcasing and sharing data-driven insights, and it can be used by data scientists, machine learning engineers, and developers alike.

Plotly is a powerful open-source library for creating interactive and visually appealing visualizations in Python. It is widely used by data scientists, engineers, and analysts to present and explore data in a meaningful way. Plotly supports a diverse range of chart types, including line charts, bar charts, scatter plots, heat maps, 3D plots, and geospatial visualizations.

Here’s a step-by-step guide to installing Plotly in your Python environment:

To install Plotly using pip:

pip install plotly

If you want to explore plotly dash use

pip install dash

Features of Plotly.

• Interactive Visualizations: Plotly allows users to create interactive plots and charts, where users can zoom, pan, and hover over data points to obtain additional information. This interactivity enhances data exploration and analysis.
• Wide Range of Plot Types: Plotly supports a variety of plot types, including line plots, scatter plots, bar charts, histograms, box plots, 3D plots, maps, and more. This diversity allows users to choose the most suitable plot type for their data.
• Web-based and Offline: Plotly can be used both as a web-based tool and as a library in programming languages such as Python, R, and Julia. This flexibility enables users to create visualizations either in a web browser or within their preferred programming environment.
• Customization and Theming: Plotly provides extensive options for customizing plots, such as adjusting colours, fonts, labels, titles, and annotations. Users can also create their own themes or use pre-defined themes to maintain consistent styling across multiple visualizations.
• Data Integration: Plotly seamlessly integrates with popular data analysis and visualization libraries, such as pandas, NumPy, and matplotlib in Python, as well as with tools like RStudio in R. This integration facilitates data preparation and manipulation prior to creating visualizations.
• Real-Time Streaming: Plotly supports real-time data streaming, allowing users to dynamically update visualizations as new data becomes available. This feature is particularly useful for monitoring live data streams or building real-time dashboards.
• Cross-Platform Compatibility: Plotly visualizations can be viewed on various platforms, including desktop computers, laptops, tablets, and smartphones. The plots automatically adapt to different screen sizes and resolutions, ensuring a consistent viewing experience across devices.

How to Create an Interactive Dashboard with Streamlit and Plotly.

Creating an interactive dashboard with Streamlit and Plotly allows you to build a powerful web application for visualizing and exploring your data. Streamlit provides an intuitive and user-friendly interface for creating the dashboard, while Plotly offers a wide range of interactive charts and visualizations. By combining the two, you can create a dynamic and engaging dashboard that enables users to interact with the data, gain insights, and make data-driven decisions. This combination provides an effective way to showcase complex data in an accessible and interactive manner.

Live Example :

We can create a sample dashboard for an ECG waveform.
Here created a random Ecg data and Plot for Continues Monotoring.

ECG wave plotting.

I can provide you with an example of a randomly generated ECG data plot using Streamlit and Plotly, demonstrating how simple it is to create a dashboard for visualizing ECG information.

import time
import streamlit as st
import plotly.graph_objects as go
import numpy as np
# creating a single-element container
placeholder = st.empty()
#a random ecg waveform
def generate_ecg_data():
 t = np.linspace(1, np.random.choice(range(8, 10)), np.random.choice(range(900, 1000)))
 p_wave = 0.1 * np.sin(2 * np.pi * t)
 qrs_wave = np.sin(2 * np.pi * t) + 0.5 * np.sin(20 * np.pi * t)
 s_wave = -0.2 * np.sin(2 * np.pi * t)
 ecg = p_wave + qrs_wave + s_wave
 return t, ecg
while True:
 t, ecg = generate_ecg_data()
 with placeholder.container():
 st.title("ECG Waveform")
 fig = go.Figure(data=go.Scatter(x=t, y=ecg))
 fig.update_layout(
 title="ECG Waveform",
 xaxis_title="Time",
 yaxis_title="Amplitude",
 template="plotly_white"
 )
 st.plotly_chart(fig)
 time.sleep(1)

Result

The continuous ECG data is presented in two images to aid comprehension, and you can also execute the given code.

Here is a random hospital dashboard and a live ventilator machine demo.

The data and datasets used in this example were manually created and do not represent real-world outcomes.

I’m attempting to suggest a new dashboard using Streamlit and Plotly in a virtual, not actual ventilation monitoring environment.

District Vice Covid Effected area.

A sample Demonstration for Monitor Patient data Using Kafka + Streamlit + Plotly

This demonstration showcases the integration of Kafka, Streamlit, and Plotly to monitor patient data. Kafka is used as a real-time data streaming platform, Streamlit enables interactive web-based visualization, and Plotly provides dynamic and engaging plots for analyzing patient data.

The Dashboard was created only as a demonstration and not as genuine Dashboard.

Patient 1

Patient 2

CODE :

Conclusion:

In this blog, we have explored the remarkable capabilities of Streamlit and Plotly, two powerful tools for data visualization. We have seen how Streamlit simplifies the process of building interactive web applications, while Plotly empowers users with a wide range of customizable charts and plots. By combining these tools, you can create captivating visualizations that communicate insights, identify patterns, and tell compelling data stories. With hands-on examples and code snippets, we have demonstrated the potential of this dynamic duo. As you embark on your data visualization journey, remember the power that Streamlit and Plotly hold in unlocking the true potential of your data. Let your visualizations speak volumes and captivate your audience.

Streamlit

Plotly

Plotly Dash