Course: Data Visualization (COM-480) — Milestone 3 (Final Project)
| Student Name | SCIPER | Peer Contribution Weight |
|---|---|---|
| Hassene Ezzeddine | 357782 | 30% |
| Youssef Ben Lassoued | 361372 | 40% |
| Ismail Hammammi | 357804 | 30% |
The dashboard is built using a custom Vanilla JS Pub-Sub model component architecture and D3.js (v7). Styling is implemented using Tailwind CSS dark-mode templates.
To explore the dashboard, clone this repository and start a local HTTP server to avoid browser CORS restrictions when loading local CSV data.
# Using Python (standard utility)
python -m http.server 8000
# Or using Node.js
npm install -g live-server
live-serverThen open your browser and navigate to http://localhost:8000.
To resolve visual noise and unit discrepancies, we implemented a tabbed modular system:
- Indeed Global Index (Tab 1): Plots daily job posting demand across 7 countries (AU, CA, DE, FR, GB, IE, US) with an adaptive select country filter, ranking averages, and a global header timeline brush filter.
- U.S. Tech JOLTS Dynamics (Tab 2): Highlights hiring fluctuations, job openings, and layoffs rates within the U.S. Information Sector (NAICS 51). Contains annotated flags representing major economic events (e.g. COVID Shock, Tech Hiring Peak, Layoffs Correction, AI Restructuring).
- Phase-Space Scatter Plot (Tab 3): A Gapminder-style phase-space loop plotting Openings vs. Layoffs rates. Includes an automated play/pause animation cycle tracing the chronological trail of economic corrections.
- Volatility Heatmap Matrix (Tab 4): Displays normalized volatility (Coefficient of Variation) by country and quarter, helping to distinguish stable labor markets from volatile clustering.
- Guided Scrollytelling Tour: A fixed narrative panel overlay that automatically guides users through 4 key economic phases (2020 COVID shock through 2025-2026 AI transition), programmatically updating tabs and brush selections.
- index.html: Layout structure containing tabs, scrollytelling container, header filters, and script links.
- app.js: Application bootstrap, CSV loader pipelines, active tab switching logic, play/pause controls, and scrollytelling sequence configurations.
- charts.js: High-performance reusable D3.js component factories.
- process_book.md: Comprehensive project design document, motivation, design evolution, and methodology.
- screencast_script.md: Script narration and visual guides for the 3-minute video presentation.
Data/: Directory storing processed Indeed indexes and FRED JOLTS datasets.
- Milestone 1: Topic proposal, dataset discovery, problem framing, and related work.
- Milestone 2: Skeleton line charts, initial brush slider interface, and responsive resizing.
- Milestone 3: Full visual expansion (tab navigation, JOLTS line, scatter play trail, volatility heatmap, guided tour, and comprehensive process documentation).