Titanic Data Visualization Dashboard

A modular, full-stack dashboard showcasing interactive charts of the Titanic dataset. The backend is built with Python and FastAPI to process data and generate Plotly figure JSON. The frontend uses Vue.js and Plotly.js to render those charts and apply dynamic filters.

🔍 Project Overview

• Backend: FastAPI (Python) reads the built‑in Titanic dataset from Seaborn, preprocesses it, and exposes REST endpoints that return Plotly JSON for various plots.
• Frontend: Vue 3 with Axios fetches chart data and renders it using Plotly.js. Filter controls let users narrow data by passenger class or survival status.

🛠️ Tech Stack

Layer	Technology
Backend	Python, FastAPI
Data	Seaborn (Titanic CSV)
Plotting	Plotly Express (Python), Plotly.js (JavaScript)
Frontend	Vue 3, Axios, Tailwind CSS (optional)
Server	Uvicorn

🚀 Why This Architecture?

Python + FastAPI Backend

• Rapid prototyping: Python’s data ecosystem (pandas, Seaborn, Plotly Express) makes loading, cleaning, and plotting data straightforward.
• Scalability: FastAPI’s async framework and built‑in documentation (Swagger) simplify routing and performance.
• Separation of concerns: All data processing and business logic live on the server, keeping the client lightweight.

JavaScript + Plotly.js Frontend

• Interactivity: Plotly.js offers zoom, pan, hover details, and responsive layouts in the browser.
• Compatibility: Although JavaScript plotting requires explicit DOM management and data/layout objects, Plotly’s JSON format bridges Python and JS seamlessly.
• Vue.js integration: Reactive data binding and component structure let us build filter controls and re-render charts efficiently.

Why not plot purely in JS?

• Direct data manipulation and complex transforms (grouping, aggregations, statistical calculations) are more verbose in vanilla JS compared to Python’s pandas.
• Backend plotting with Plotly Express produces ready‑to‑use JSON; the frontend only focuses on rendering.

📦 Installation & Setup

1. Clone the repo

   git clone https://github.com/<your‑username>/fastapi-vue-plotly-dashboard.git
   cd fastapi-vue-plotly-dashboard

2. Backend

   cd backend
   python -m venv .venv
   source .venv/bin/activate      # or .\.venv\Scripts\activate on Windows
   pip install -r requirements.txt
   uvicorn main:app --reload

3. Frontend

   cd frontend
   npm install
   npm run dev

4. Open in browser

   • FastAPI docs: http://localhost:8000/docs
   • Vue client: http://localhost:5173 (or printed dev URL)

📈 Features & Filters

• Survival Count: Bar chart of survivors vs. non‑survivors.

• Survival by Gender: Grouped bar chart showing survival split by gender.

• Age vs Fare: Scatter plot colored by passenger class and survival status, with dropdown filters:

  • Class: First, Second, Third, or All.
  • Survival: Survived, Died, or All.

• Survival Pie: Pie chart of overall survival rate.

• Age vs Survival Rate: Line chart showing average survival rate across ages.

• Age vs Sex Count: Line chart of passenger counts by age and gender.

🧩 How Filters Work

1. Backend: Endpoints under /filters expose unique values for classes and survival labels directly from the DataFrame.
2. Frontend: Vue fetches these options on mount, populates dropdowns, and rebuilds the chart URL with query parameters.
3. API: The /plot/age-vs-fare route applies pclass and survived filters before generating the Plotly JSON.

🤝 Contributing

Feel free to open issues or pull requests:

• Add new filters (e.g., age range, gender selection)
• Introduce authentication or user sessions
• Improve chart styling (themes, custom color scales)

📄 License

This project is licensed under the MIT License. See LICENSE for details.