Streamlit and Plotly: Interactive Data Visualization Made Easy

Name

Olaf Källström

Published on 7/24/2023

(opens in a new tab) (opens in a new tab) (opens in a new tab) (opens in a new tab) (opens in a new tab) (opens in a new tab)

In the realm of data science, visualization plays a crucial role in understanding complex datasets and extracting meaningful insights. Two powerful tools that have revolutionized this field are Streamlit and Plotly. This article aims to provide a comprehensive guide on how to use these tools together to create interactive visualizations and dashboards. Whether you're a beginner or an experienced developer, you'll find everything you need to get started with Streamlit and Plotly.

Introduction to Streamlit and Plotly

Streamlit is an open-source Python Framework that allows developers to create interactive web applications with ease. It's designed to help data scientists and machine learning engineers turn data scripts into shareable web apps in just a few lines of code. Streamlit's simplicity and flexibility have made it a popular choice among data professionals.

Plotly, on the other hand, is a versatile library that enables the creation of beautiful and interactive plots. It supports over 40 unique chart types covering a wide range of statistical, financial, geographic, scientific, and 3-dimensional use-cases. Plotly's interactivity gives users the ability to zoom, pan, hover, and drill down into the visualizations, making data exploration intuitive and informative.

When used together, Streamlit and Plotly form a powerful combination, allowing developers to create interactive dashboards with complex visualizations with relative ease.

Alternative to using Plotly in Streamlit: Use PyGWalker:

While Plotly is a powerful tool, it's not the only option available for data visualization in Python. PyGWalker (opens in a new tab) is also another awesome tool that works wonders as the alternative to Streamlit AgGrid.

PyGWalker + Streamlit Online Demo (opens in a new tab)

PyGWalker (opens in a new tab) is a Python Library that helps you easily embed a Tableau-like UI into your own Streamlit app effortlessly.

Check out this amazing video produced by Sven from Coding is Fun (opens in a new tab) demonstrating the detailed steps for empowering your Streamlit app with this powerful Data Visualization Python Library!

Special Thanks to Sven and his great contribution (opens in a new tab) to PyGWalker community!

Additionally, you can also check out these resources:

• How to Explore Data and Share Findings with Pygwalker and Streamlit (opens in a new tab)
• PyGWalker GitHub Page (opens in a new tab) for more PyGWalker examples.

(opens in a new tab)

Creating Interactive Visualizations with Streamlit and Plotly

Creating interactive visualizations using Streamlit and Plotly is a straightforward process. The first step is to import the necessary libraries in your Python script. Here's an example:

import streamlit as st
import plotly.express as px

Next, you can create a Plotly figure and display it in your Streamlit app. For instance, let's create a simple bar chart using Plotly and display it in Streamlit:

## Create a sample dataframe
df = pd.DataFrame({
   'Fruit': ['Apples', 'Oranges', 'Bananas', 'Apples', 'Oranges', 'Bananas'],
   'Amount': [4, 1, 2, 2, 4, 5],
   'City': ['SF', 'SF', 'SF', 'Montreal', 'Montreal', 'Montreal']
})
 
## Create a bar chart using Plotly
fig = px.bar(df, x='Fruit', y='Amount', color='City', barmode='group')
 
## Display the figure in Streamlit
st.plotly_chart(fig)

In this example, px.bar is used to create a bar chart, and st.plotly_chart is used to display the chart in the Streamlit app. The result is an interactive bar chart that users can hover over to see data values, zoom in and out, and even download as a static image.

Advanced Streamlit and Plotly Techniques

While creating basic interactive visualizations with Streamlit and Plotly is simple, these tools also offer advanced features that allow for more complex and customized visualizations.

One such feature is the ability to update Plotly figures in Streamlit. This can be done using the update_layout and update_traces methods in Plotly. For instance,

you can update the layout of a figure to change its title, axis labels, and more:

fig.update_layout(
    title='New Title',
    xaxis_title='New X Axis Title',
    yaxis_title='New Y Axis Title',
)

Similarly, you can update the traces of a figure to change the properties of the plotted data, such as the marker color:

fig.update_traces(marker_color='rgb(158,202,225)')

Another advanced feature is the ability to resolve sizing issues with Plotly charts in Streamlit. Sometimes, a Plotly chart might not fit well within the layout of a Streamlit app, causing it to be cut off or overlap with other elements. This can be resolved by adjusting the height and width parameters of the st.plotly_chart function:

st.plotly_chart(fig, use_container_width=True)

In this example, use_container_width=True makes the chart take up the full width of the Streamlit app's main column, ensuring that it fits well within the layout.

Building a Streamlit Plotly Dashboard

Building a dashboard with Streamlit and Plotly involves combining multiple interactive visualizations and controls into a single app. The controls, such as sliders, checkboxes, and select boxes, allow users to interact with the visualizations and update them in real-time.

Here's a simple example of a Streamlit Plotly dashboard:

import streamlit as st
import plotly.express as px
import pandas as pd
 
## Load data
df = pd.read_csv('data.csv')
 
## Add a select box for choosing the chart type
chart_type = st.selectbox('Choose a chart type', ['Bar', 'Line'])
 
## Create the chart
if chart_type == 'Bar':
    fig = px.bar(df, x='Fruit', y='Amount', color='City', barmode='group')
elif chart_type == 'Line':
    fig = px.line(df, x='Fruit', y='Amount', color='City')
 
## Display the chart
st.plotly_chart(fig, use_container_width=True)

In this example, a select box is added to the Streamlit app using st.selectbox. The selected value is used to determine the type of chart to create with Plotly. The chart is then displayed in the app using st.plotly_chart.

Building a Streamlit Plotly dashboard can be as simple or as complex as needed, depending on the requirements of your data visualization project. With the flexibility and power of Streamlit and Plotly, the possibilities are endless.

Conclusion: The Power of Streamlit and Plotly for Data Visualization

Streamlit and Plotly together form a powerful combination for creating interactive data visualizations and dashboards. Streamlit's simplicity and flexibility make it an excellent tool for building web apps, while Plotly's wide range of chart types and interactivity features make it a versatile tool for data visualization.

The integration of Streamlit and Plotly opens up a world of possibilities for data scientists and developers. From creating simple bar charts to building complex dashboards with multiple interactive visualizations, these tools provide the capabilities needed to turn data into insights.

As data continues to play an increasingly important role in our world, tools like Streamlit and Plotly will continue to evolve and improve. By staying up-to-date with these tools and learning how to use them effectively, you can enhance your data visualization skills and create more impactful and insightful visualizations.

Have you heard of this awesome Data Analysis & Data Visualisation tool, that turns your Streamlit App into Tableau?

PyGWalker (opens in a new tab) is a Python Library that helps you easily embed a Tableau-like UI into your own Streamlit app effortlessly.

(opens in a new tab)

FAQs

1. How can I display an interactive Plotly chart in Streamlit?

You can display an interactive Plotly chart in Streamlit using the st.plotly_chart function. First, create a Plotly figure, then pass it to st.plotly_chart to display it in your Streamlit app. The result is an interactive chart that users can hover over, zoom in and out, and even download as a static image.

2. How can I update a Plotly figure in Streamlit?

You can update a Plotly figure in Streamlit using the update_layout and update_traces methods in Plotly. The update_layout method allows you to change the layout of the figure, such as the title and axis labels. The update_traces method allows you to change the properties of the plotted data, such as the marker color.

3. How can I avoid sizing issues with Plotly charts in Streamlit?

You can avoid sizing issues with Plotly charts in Streamlit by adjusting the height and width parameters of the st.plotly_chart function. For example, setting use_container_width=True makes the chart take up the full width of the Streamlit app's main column, ensuring that it fits well within the layout.