Interactive City Dashboard

🌍 Interactive City Dashboard
Explore world cities with an interactive map, charts, and live data

Repo Size Last Commit

🗺️ Interactive City Map + Population Dashboard

A fully interactive Dash application that visualises world cities with:
A dynamic Mapbox map
A responsive population bar chart
A collapsible Wikipedia-powered city information panel
A clean light/dark theme system
Multiple layout modes (side-by-side, stacked, wide, minimalist, pro)
A modular, test-driven architecture designed for clarity and maintainability

This project demonstrates professional-grade Dash engineering, clean separation of concerns, and a fully tested callback + layout system.

🚀Features

Interactive Map

Click any city to update the dashboard
Map auto-centres and highlights the selected city
Built using Plotly Mapbox

Population Chart

Shows population for the selected city
Automatically scales the y-axis
Theme-aware styling

Wikipedia Summary Panel

Collapsible “City Information” panel
Fetches live summaries via a service layer
Clean separation between UI and data fetching

Light/Dark Themes

Full theme propagation across map, chart, and layout
Smooth transitions

Multiple Layout Modes

Side-by-side
Stacked
Sidebar
Wide map focus
Chart focus
Minimalist
Three-column “Pro” layout

Testing

Layout tests
Callback unit tests
Integration tests using Dash’s callback map

Demo

🎥 Video Preview

Click below to watch the 1 minute demo:

▶️ View Demo Video

📸Screenshots

Dashboard (Light Mode)

Dashboard Light

Dashboard (Dark Mode)

Dashboard Dark

City Views

City 1 City 2 City 3 City 4 City 5

⚒️ Project Structure

project_flask_api/
│
├── api.py                     # Dash app entrypoint
│
├── data/
│   └── populations.py         # City dataset
│
├── services/
│   └── wiki.py                # Wikipedia summary fetcher
│
├── components/
│   ├── map_builder.py         # Map figure builder
│   ├── charts.py              # Population chart builder
│   ├── details_panel.py       # Wiki/details panel builder
│   └── theme.py               # Light/Dark theme definitions
│
├── layout/
│   └── layout.py              # serve_layout() → full UI tree
│
├── callbacks/
│   └── callbacks.py           # Pure callback logic + register_callbacks()
│
└── tests/
    ├── test_layout.py
    ├── test_callbacks.py
    └── test_integration_app.py

💻 Installation

git clone https://github.com/reory/Interactive-City-Dashboard.git
cd Interactive-City-Dashboard
pip install -r requirements.txt

Running the App

python api.py

Then open: http://127.0.0.1:8050

🧪 Running Tests

pytest -q

The suite includes:
Layout structure validation
Callback logic tests
Integration tests using Dash’s callback registry

🏢 Architecture Principles

This project follows:

Pure functions - All callback logic is pure and testable.

Separation of concerns - Layout = static UI

Callbacks = behaviour
Components = reusable UI builders
Services = external data
Data = static datasets

Predictable state - No hidden globals, no side effects.

Test-driven structure - Every major part of the app is validated.

💻 Deployment

This app can be deployed to:

Heroku
Render
Azure App Service
Docker
Gunicorn + Nginx
Expose the server object in api.py:

server = app.server

🤝 Contributing

Pull requests are welcome. For major changes, open an issue first to discuss what you’d like to change.

📃 License

MIT License — free to use, modify, and distribute.

Built by Roy Peters Click here for contact details 😁