How to Combine Streamlit, Pandas, and Plotly for Interactive Data Apps

By
Admin
-
0
8



Image by Author | ChatGPT

 

Introduction

 
Creating interactive web-based data dashboards in Python is easier than ever when you combine the strengths of Streamlit, Pandas, and Plotly. These three libraries work seamlessly together to transform static datasets into responsive, visually engaging applications — all without needing a background in web development.

However, there’s an important architectural difference to understand before we begin. Unlike libraries such as matplotlib or seaborn that work directly in Jupyter notebooks, Streamlit creates standalone web applications that must be run from the command line. You’ll write your code in a text-based IDE like VS Code, save it as a .py file, and run it using streamlit run filename.py. This shift from the notebook environment to script-based development opens up new possibilities for sharing and deploying your data applications.

In this hands-on tutorial, you’ll learn how to build a complete sales dashboard in two clear steps. We’ll start with core functionality using just Streamlit and Pandas, then enhance the dashboard with interactive visualizations using Plotly.

 

Setup

 
Install the required packages:

pip install streamlit pandas plotly

 

Create a new folder for your project and open it in VS Code (or your preferred text editor).

 

Step 1: Streamlit + Pandas Dashboard

 
Let’s start by building a functional dashboard using just Streamlit and Pandas. This demonstrates how Streamlit creates interactive web interfaces and how Pandas handles data filtering.

Create a file called step1_dashboard_basic.py:

import streamlit as st
import pandas as pd
import numpy as np

# Page config
st.set_page_config(page_title="Basic Sales Dashboard", layout="wide")

# Generate sample data
np.random.seed(42)
df = pd.DataFrame({
    'Date': pd.date_range('2024-01-01', periods=100),
    'Sales': np.random.randint(500, 2000, size=100),
    'Region': np.random.choice(['North', 'South', 'East', 'West'], size=100),
    'Product': np.random.choice(['Product A', 'Product B', 'Product C'], size=100)
})

# Sidebar filters
st.sidebar.title('Filters')
regions = st.sidebar.multiselect('Select Region', df['Region'].unique(), default=df['Region'].unique())
products = st.sidebar.multiselect('Select Product', df['Product'].unique(), default=df['Product'].unique())

# Filter data
filtered_df = df[(df['Region'].isin(regions)) & (df['Product'].isin(products))]

# Display metrics
col1, col2, col3 = st.columns(3)
col1.metric("Total Sales", f"${filtered_df['Sales'].sum():,}")
col2.metric("Average Sales", f"${filtered_df['Sales'].mean():.0f}")
col3.metric("Records", len(filtered_df))

# Display filtered data
st.subheader("Filtered Data")
st.dataframe(filtered_df)

 

Let’s break down the key Streamlit methods used here:

  • st.set_page_config() configures the browser tab title and layout
  • st.sidebar creates the left navigation panel for filters
  • st.multiselect() generates dropdown menus for user selections
  • st.columns() creates side-by-side layout sections
  • st.metric() displays large numbers with labels
  • st.dataframe() renders interactive data tables

These methods automatically handle user interactions and trigger app updates when selections change.

Run this from your terminal (or VS Code’s integrated terminal):

streamlit run step1_dashboard_basic.py

 

Your browser will open to http://localhost:8501 showing an interactive dashboard.

 
How to Combine Streamlit, Pandas, and Plotly for Interactive Data Apps
 

Try changing the filters in the sidebar — watch how the metrics and data table update automatically! This demonstrates the reactive nature of Streamlit combined with Pandas’ data manipulation capabilities.

 

Step 2: Add Plotly for Interactive Visualizations

 
Now let’s enhance our dashboard by adding Plotly’s interactive charts. This shows how all three libraries work together seamlessly. Let’s create a new file and call it step2_dashboard_plotly.py:

import streamlit as st
import pandas as pd
import plotly.express as px
import numpy as np

# Page config
st.set_page_config(page_title="Sales Dashboard with Plotly", layout="wide")

# Generate data
np.random.seed(42)
df = pd.DataFrame({
    'Date': pd.date_range('2024-01-01', periods=100),
    'Sales': np.random.randint(500, 2000, size=100),
    'Region': np.random.choice(['North', 'South', 'East', 'West'], size=100),
    'Product': np.random.choice(['Product A', 'Product B', 'Product C'], size=100)
})

# Sidebar filters
st.sidebar.title('Filters')
regions = st.sidebar.multiselect('Select Region', df['Region'].unique(), default=df['Region'].unique())
products = st.sidebar.multiselect('Select Product', df['Product'].unique(), default=df['Product'].unique())

# Filter data
filtered_df = df[(df['Region'].isin(regions)) & (df['Product'].isin(products))]

# Metrics
col1, col2, col3 = st.columns(3)
col1.metric("Total Sales", f"${filtered_df['Sales'].sum():,}")
col2.metric("Average Sales", f"${filtered_df['Sales'].mean():.0f}")
col3.metric("Records", len(filtered_df))

# Charts
col1, col2 = st.columns(2)

with col1:
    fig_line = px.line(filtered_df, x='Date', y='Sales', color="Region", title="Sales Over Time")
    st.plotly_chart(fig_line, use_container_width=True)

with col2:
    region_sales = filtered_df.groupby('Region')['Sales'].sum().reset_index()
    fig_bar = px.bar(region_sales, x='Region', y='Sales', title="Total Sales by Region")
    st.plotly_chart(fig_bar, use_container_width=True)

# Data table
st.subheader("Filtered Data")
st.dataframe(filtered_df)

 

Run this from your terminal (or VS Code’s integrated terminal):

streamlit run step2_dashboard_plotly.py

 

Now you have a complete interactive dashboard!

 
How to Combine Streamlit, Pandas, and Plotly for Interactive Data Apps
 

The Plotly charts are fully interactive — you can hover over data points, zoom in on specific time periods, and even click legend items to show/hide data series.

 

How the Three Libraries Work Together

 
This combination is powerful because each library handles what it does best:

Pandas manages all data operations:

  • Creating and loading datasets
  • Filtering data based on user selections
  • Aggregating data for visualizations
  • Handling data transformations

Streamlit provides the web interface:

  • Creates interactive widgets (multiselect, sliders, etc.)
  • Automatically reruns the entire app when users interact with widgets
  • Handles the reactive programming model
  • Manages layout with columns and containers

Plotly creates rich, interactive visualizations:

  • Charts that users can hover, zoom, and explore
  • Professional-looking graphs with minimal code
  • Automatic integration with Streamlit’s reactivity

 

Key Development Workflow

 
The development process follows a straightforward pattern. Start by writing your code in VS Code or any text editor, saving it as a .py file. Next, run the application from your terminal using streamlit run filename.py, which opens your dashboard in a browser at http://localhost:8501. As you edit and save your code, Streamlit automatically detects changes and offers to rerun the application. Once you’re satisfied with your dashboard, you can deploy it using Streamlit Community Cloud to share with others.

 

Next Steps

 
Try these enhancements:

Add real data:

# Replace sample data with CSV upload
uploaded_file = st.sidebar.file_uploader("Upload CSV", type="csv")
if uploaded_file:
    df = pd.read_csv(uploaded_file)

 

Keep in mind that real datasets will require preprocessing steps specific to your data structure. You’ll need to adjust column names, handle missing values, and modify the filter options to match your actual data fields. The sample code provides a template, but each dataset will have unique requirements for cleaning and preparation.

More chart types:

# Pie chart for product distribution
fig_pie = px.pie(filtered_df, values="Sales", names="Product", title="Sales by Product")
st.plotly_chart(fig_pie)

 

You can leverage an entire gallery of Plotly’s graphing capabilities.

 

Deploying Your Dashboard

 
Once your dashboard is working locally, sharing it with others is straightforward through Streamlit Community Cloud. First, push your code to a public GitHub repository, making sure to include a requirements.txt file listing your dependencies (streamlit, pandas, plotly). Then visit https://streamlit.io/cloud, sign in with your GitHub account, and select your repository. Streamlit will automatically build and deploy your app, providing a public URL that anyone can access. The free tier supports multiple apps and handles reasonable traffic loads, making it perfect for sharing dashboards with colleagues or showcasing your work in a portfolio.

 

Conclusion

 
The combination of Streamlit, Pandas, and Plotly transforms data analysis from static reports into interactive web applications. With just two Python files and a handful of methods, you’ve built a complete dashboard that rivals expensive business intelligence tools.

This tutorial demonstrates a significant shift in how data scientists can share their work. Instead of sending static charts or requiring colleagues to run Jupyter notebooks, you can now create web applications that anyone can use through a browser. The transition from notebook-based analysis to script-based applications opens new opportunities for data professionals to make their insights more accessible and impactful.

As you continue building with these tools, consider how interactive dashboards can replace traditional reporting in your organization. The same principles you’ve learned here scale to handle real datasets, complex calculations, and sophisticated visualizations. Whether you’re creating executive dashboards, exploratory data tools, or client-facing applications, this three-library combination provides a solid foundation for professional data applications.
 
 

Born in India and raised in Japan, Vinod brings a global perspective to data science and machine learning education. He bridges the gap between emerging AI technologies and practical implementation for working professionals. Vinod focuses on creating accessible learning pathways for complex topics like agentic AI, performance optimization, and AI engineering. He focuses on practical machine learning implementations and mentoring the next generation of data professionals through live sessions and personalized guidance.