Interactive Dashboard in Plotly Dash – Build a Simple Web App

https://youtu.be/DosT-ewPv_w

If you’re looking to create a sleek, interactive dashboard using Python without touching JavaScript or HTML, you’re in the right place. In this tutorial, we’ll build a beginner-friendly web app using Plotly Dash to visualize and filter a small dataset like personal finance or sales. You’ll see exactly how to create dropdown filters, dynamic charts, and launch the app in your browser.

💪 What is Dash?

Dash is a Python framework developed by Plotly. It allows you to build fully interactive web apps for data visualization using just Python. It’s ideal for data professionals who want to build shareable dashboards without switching to front-end languages.

⚙️ Install Dash & Create Sample Data

Install Required Libraries

pip install dash pandas plotly

Sample Dataset

import pandas as pd

# Sample data
df = pd.DataFrame({
    'Month': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] * 2,
    'Category': ['Food']*6 + ['Transport']*6,
    'Spending': [250, 200, 300, 220, 270, 240, 100, 120, 90, 130, 110, 150]
})

This dataset simulates spending across two categories over six months. Perfect for a visual demo.

🖼️ Build the App Layout

We create a layout with a header, a dropdown filter, and two charts.

from dash import Dash, dcc, html
import plotly.express as px

app = Dash(__name__)

app.layout = html.Div([
    html.H1("Monthly Spending Dashboard"),
    dcc.Dropdown(
        id='category-filter',
        options=[{'label': cat, 'value': cat} for cat in df['Category'].unique()],
        value='Food'
    ),
    dcc.Graph(id='line-chart'),
    dcc.Graph(id='bar-chart')
])

---

🔀 Add Interactivity with Callbacks

The callback connects the dropdown with both charts.

from dash.dependencies import Input, Output

@app.callback(
    [Output('line-chart', 'figure'),
     Output('bar-chart', 'figure')],
    [Input('category-filter', 'value')]
)
def update_charts(selected_category):
    filtered_df = df[df['Category'] == selected_category]
    line_fig = px.line(filtered_df, x='Month', y='Spending', title='Spending Over Time')
    bar_fig = px.bar(filtered_df, x='Month', y='Spending', title='Monthly Spending Breakdown')
    return line_fig, bar_fig

With this, the charts update automatically based on your dropdown selection.

---

🚀 Run the App

if __name__ == '__main__':
    app.run_server(debug=True)

Launch the app, open your browser, and you’re live!

---

📄 Wrap-Up

“Dashboards like this are perfect for making your data usable, interactive, and shareable — all from a single Python script. Want to add more features like date pickers or tabs? Stick around for part 2! Like, subscribe, and let’s keep building!”

---

📌 Summary

• Built a simple Dash app with charts and filters
• Created a dynamic dropdown menu
• Displayed both line and bar charts using Plotly Express
• Added interactivity using Dash callbacks
• Ran the app locally

---

🔗 Resources

• Dash Documentation
• Plotly Express Gallery
• Pandas Docs

Stay tuned for more Python dashboard tutorials!