Building a professional dashboard with streamlit
Step-by-Step Guide to Building a Dashboard in Python with Streamlit
Dashboards are like command centers for data. They take rows and columns from your dataset and transform them into interactive visual stories that anyone—managers, analysts, or decision-makers—can understand at a glance.
In this tutorial, we’ll build a professional sales insights dashboard using Streamlit
, powered by the Big Mart Sales dataset from Kaggle. By the end, you’ll have your own web app that retail managers could actually use to make data-driven decisions.
🎯 Before diving in:
Make sure you’ve already performed Exploratory Data Analysis (EDA) and data cleaning. If you need a refresher, check out our “Pandas Simplified” video where we walk through exactly how to clean and prepare data with pandas.
For this tutorial, we’ll use a cleaned dataset: clean_data.csv.
1. Defining Our Dashboard Goals
After exploring the Big Mart dataset, we know it focuses on product sales across multiple retail outlets. The aim of our dashboard is simple:
👉 Help stakeholders understand performance at product and outlet levels so they can fine-tune pricing, promotions, and inventory.
Here are the key metrics (KPIs) we’ll track:
Total Sales → Sum of all revenue (Item_Outlet_Sales)
Average Sales per Item → Mean sales to gauge typical product performance
Top Products → Best-performing categories by Item_Type & Item_Fat_Content
Outlet Performance → Compare sales by Outlet_Type & Outlet_Size
Regional Performance → Sales trends across Outlet_Location_Type (Tier 1, 2, 3)
Pricing Impact → Explore Item_MRP vs. sales
Visibility Effect → See how Item_Visibility influences sales
2. Choosing the Right Visualizations
Every insight deserves the right visualization. Here’s our visual roadmap:
📌 KPI Cards → Show Total Sales, Average Sales, Best Outlet, Top Category
📈 Line Chart → Pricing trends over time (Item_MRP distribution)
📊 Bar Charts → Compare Item Types, Outlet Types, and Outlet Sizes
🥧 Pie/Donut Chart → Regional contribution by outlet tier
🔵 Scatter Plot → Visibility vs Sales impact
📦 Box Plot → Spread of sales across product categories
🌡️ Heatmap (Optional) → Correlations among numerical features
With our “map” ready, let’s start building 🚀.
3. Getting the Environment Ready
We’ll work inside Visual Studio Code (though you can use any editor you like). First, let’s create a virtual environment so project dependencies don’t mess up your global Python setup.
python -m venv dashboardenv
Activate it (on Windows)
dashboardenv\Scripts\activate
Install requirements
pip install pandas==2.2.2
pip install plotly==5.22.0
pip install numpy==1.26.4
pip install matplotlib==3.9.0
Confirm installs
pip show pandas plotly numpy matplotlib streamlit
Project folder setup
mkdir retails_dashbord
Inside, create an app.py file — this will be the heart of our Streamlit app
4. Building the App Skeleton
Let’s start simple: set up the page and add a title.
import streamlit as st
--- Page config & Header ---------------------------------------------------
st.set_page_config(
page_title="Retails Insights Dashboard",
page_icon="📊",
layout="wide",
initial_sidebar_state="expanded"
)
st.title("📊 Retails Insights Dashboard")
st.write("Welcome! This dashboard helps track performance, customers, and revenue.")
🔍 What this does:
Sets a wide layout for better charts.
Adds a page title + chart emoji.
Welcomes users with a clean message.
5. Loading the Data
utils.py
import pandas as pd
def load_data(path):
return pd.read_csv(path)
We’ll keep things neat by creating a utils.py file for reusable helper functions.
Back in app.py, let’s add a cached loader to avoid reloading the CSV each time
--- Data loading (cached) --------------------------------------------------
@st.cache_data
def get_data():
return load_data("data/cleaned_data.csv")
df = get_data()
dff = df # alias for filtered data later
✅ Caching = faster reloads when interacting with filters or re-running the app
6. Adding Polish with Markdown
st.markdown("""
*Polish applied:*
Theming via `.streamlit/config.toml`
Caching (`@st.cache_data`) for faster reloads
Consistent spacing, emojis, and concise titles
Footers with ownership & version
Ready for Streamlit Community Cloud deployment
""")
7. Streamlit Config for Styling
To make our dashboard visually appealing, create a .streamlit/config.toml file:
[theme]
base="light"
primaryColor="#FF5733"
backgroundColor="#F9F9F9"
secondaryBackgroundColor="#F0F0F0"
textColor="#333333"
font="sans serif"
This instantly gives your app a polished, branded look
8. Writing Plot Functions
We’ll keep our visualizations clean and reusable by putting them into plots.py.
(… [Here you’d paste your full plots.py code block] …)
Each function is neatly explained, from KPIs like kpi_total_sales to advanced visuals like fig_corr_heatmap. By modularizing code this way, your app stays maintainable and extensible.