🏦 Banking Dashboard with 3D Storytelling

A modern, interactive banking dashboard built with Streamlit that combines traditional KPIs and charts with an innovative 3D data visualization experience. Perfect for financial analysts, data scientists, and anyone interested in banking analytics.

✨ Features

• 📊 Interactive KPIs: Real-time customer metrics, balance tracking, and delinquency rates
• 📈 Dynamic Charts: Time series analysis, segment breakdowns, and portfolio heatmaps
• 🧊 3D Data Storytelling: Immersive 3D scene with customizable metrics and color schemes
• 🎛️ Smart Filtering: Date ranges, customer segments, and product filtering
• 📱 Responsive Design: Works seamlessly on desktop and mobile devices
• 🔄 Multi-page Navigation: Organized sections for Overview, Portfolio, Risks, and 3D exploration

🚀 Demo

Live Application: https://classic-dashboard-with-kpis-and-graphs-3d.streamlit.app/

Experience the full dashboard with synthetic banking data that demonstrates real-world scenarios.

🛠️ Technology Stack

• Frontend: Streamlit 1.48+
• Visualization: Plotly (2D charts + 3D scenes)
• Data Processing: Pandas, NumPy
• Styling: Custom CSS + Streamlit themes
• Deployment: Streamlit Community Cloud

📋 Prerequisites

• Python 3.10+
• Windows PowerShell (or any shell)
• Git

⚡ Quick Start

1. Clone the Repository

git clone https://github.com/michaelgermini/classic-dashboard-with-kpis-and-graphs.git
cd classic-dashboard-with-kpis-and-graphs

2. Set Up Virtual Environment

python -m venv venv
.\venv\Scripts\python -m pip install --upgrade pip
.\venv\Scripts\python -m pip install -r requirements.txt

3. Run Locally

.\venv\Scripts\python -m streamlit run app.py

Visit http://localhost:8501 to see the dashboard in action!

📁 Project Structure

classic-dashboard-with-kpis-and-graphs/
├── app.py                 # Main application entry point
├── pages/                 # Multi-page navigation
│   ├── 1_Overview.py     # Dashboard overview with KPIs
│   ├── 2_Portfolio.py    # Portfolio analysis
│   ├── 3_Risks.py        # Risk metrics and analysis
│   └── 4_3D_Storytelling.py # Interactive 3D scene
├── components/           # Reusable UI components
│   ├── kpi_cards.py     # KPI display components
│   ├── filters.py       # Data filtering interface
│   ├── layout.py        # Navigation and layout
│   └── menu.py          # Sidebar navigation
├── viz/                 # Visualization modules
│   ├── charts.py        # 2D Plotly charts
│   └── plotly_3d.py     # 3D scene builder
├── services/            # Data and business logic
│   └── data_loader.py   # Data generation and caching
└── .streamlit/          # Streamlit configuration
    └── config.toml      # Theme and settings

🎯 Key Features Explained

Interactive 3D Scene

• Multi-metric Support: Switch between balance sums, averages, account counts, and delinquency rates
• Customizable Colors: Choose from 6 different color schemes (Blues, Viridis, Plasma, etc.)
• Dynamic Sizing: Adjust bar thickness for optimal visualization
• Hover Information: Detailed tooltips with segment, product, and metric values

Smart Data Management

• Auto-generation: Synthetic banking data created on first run
• Caching: Optimized performance with Streamlit's caching system
• Real-time Filtering: Instant updates based on date ranges and segment selections

Professional UI/UX

• Sticky Navigation: Always-accessible top navigation bar
• Sidebar Menu: Quick page switching with icons
• Responsive Layout: Adapts to different screen sizes
• Modern Theme: Clean, professional banking aesthetic

📊 Data Model

The dashboard uses synthetic banking data with the following structure:

• Customer Segments: Retail, Affluent, SME, Corporate
• Product Types: Current Accounts, Savings, Loans, Investments
• Metrics: Balance amounts, delinquency flags, transaction dates
• Time Range: 180 days of historical data

🔍 Code Quality Audit

📊 Audit Summary

Overall Grade: B+ (85/100)

Category	Score	Grade	Status
Code Quality	7/10	B	⚠️ Needs formatting
Security	9/10	A	✅ No vulnerabilities
Performance	8/10	B+	✅ Optimized
Documentation	9/10	A	✅ Comprehensive
Structure	9/10	A	✅ Well-organized
Testing	3/10	C	⚠️ Basic coverage

✅ Strengths

• No Critical Errors: Clean codebase with proper type hints
• Modular Architecture: Well-organized component-based structure
• Security: No known vulnerabilities in dependencies
• Performance: Efficient caching and data processing
• Documentation: Comprehensive README and inline comments

⚠️ Areas for Improvement

• Code Formatting: 13 files need Black formatting
• Import Organization: Import sorting issues in 5 files
• Testing: Limited test coverage (only smoke tests)
• Error Handling: Basic exception handling

🔧 Recommended Actions

1. High Priority: Fix code formatting and import sorting
2. Medium Priority: Add comprehensive test suite
3. Low Priority: Enhance error handling and monitoring

🚀 Deployment

Streamlit Community Cloud

1. Fork this repository
2. Go to Streamlit Cloud
3. Connect your GitHub account
4. Select this repository
5. Set main file to app.py
6. Deploy!

Local Development

# Install development dependencies
.\venv\Scripts\python -m pip install -r requirements.txt

# Run with auto-reload
.\venv\Scripts\python -m streamlit run app.py --server.runOnSave true

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

📄 License

This project is open source and available under the MIT License.

👨‍💻 Author

Michael Germini

• 🌐 Website: upframe.com
• 📧 Email: michael@germini.info
• 🐙 GitHub: @michaelgermini

---

⭐ Star this repository if you find it useful!

🔗 Share the demo with your network: https://classic-dashboard-with-kpis-and-graphs-3d.streamlit.app/