DaTeam Group
- Georg Schwabedal — 328434
- Mathurin Chritin — 288065
- Amene Gafsi — 345583
Course: COM-480 - Data Visualization
Instructor: Prof. Laurent Gilles Marie Vuillon
Date: 30 May 2025
Football transcends sport, uniting fans, analysts, and professionals through its blend of competition and strategy. Our project transforms this passion into an interactive data visualization platform exploring the relationships between match performance, player transfers, and financial strategies in European football from 2008 to 2016.
The platform is a map-based interface that allows users to navigate club histories through match outcomes (wins, losses, draws) and transfer networks. We integrate two comprehensive datasets: match statistics (2008–2016) and player transfers (2000–2018). Clubs are geolocated on a zoomable European map, transfer flows are visualized as connecting lines, and team details appear in dynamic side panels.
Our target audiences are football fans, data analysts, and scouts/managers. We balance statistical depth with an intuitive UI to inform and spark discussions about football’s modern evolution. ⚡️
Guided by course milestones, the team followed a steady collaborative workflow. We started by selecting datasets, building preprocessing scripts, and producing an MVP website. Work was modularized to allow concurrent development and regular integration checks.
Key project pages and components were prototyped early; the MVP helped to refine visual choices (color palettes, layout, single vs multi-page) and prioritize features.
The project was divided into major components. Below we summarize each, who implemented it, and the main technical considerations.
Implemented by: Amene & Mathurin
- Converted a ~29,000-match SQLite database and transfer records into browser-friendly JSON/CSV files.
- Standardized club names (mapping tables), filtered top-tier clubs (2008–2016), and precomputed per-season metrics for frontend performance.
- Tools: Python, SQL, Jupyter notebooks.
Limitations: Manual name corrections and static preprocessing (updates beyond 2016 require rerunning pipeline).
Implemented by: Georg
- Optimized logo file paths, preloading, and used logos as custom Leaflet markers and in the sidebar.
- Created a mapping dictionary to standardize names and link logos; fallbacks used for missing logos.
Limitations: Incomplete coverage for smaller clubs; manual maintenance required. 🖼️
Implemented by: Amene & Mathurin
- Landing page that summarizes the project and guides users to explore the map and team views.
- Includes a global year selector that filters visuals across the site.
Implemented by: Georg
- Leaflet-based map with custom logo markers, marker clustering, and polylines for transfers (D3 used for SVG paths occasionally).
- Addressed overlapping markers with offsets and clustering; synchronized map and sidebar selections.
Limitations: Visual clutter at wide zoom levels; some planned filters not implemented. 🗺️
Implemented by: Georg & Amene
- Dynamic dashboard showing team name, logo, win/draw/loss charts, and transfer stats.
- Implemented with D3 charts, HTML/CSS panels and JavaScript event handlers.
Implemented by: Amene & Georg
- Scrollable team list with search bar for direct selection; linked to standardized team IDs for synchronization.
Limitations: Search relies on exact matches; fuzzy search not implemented.
Implemented by: Amene
- D3.js charts showing season-by-season wins/draws/losses (2008–2016); interactive and responsive to year selector.
- Precomputed stats used to avoid heavy client-side processing.
Implemented by: Mathurin
- Visualized incoming/outgoing transfers as lines between clubs; encoding direction and volume with color and thickness.
- Filters applied dynamically to avoid overloading the interface.
Implemented by: Mathurin, Amene & Georg
- Combined Leaflet for maps and D3 for charts and SVG overlays; aligned D3 elements with Leaflet projections.
We created an interactive platform to explore club performance and transfer activity across Europe. While some advanced features remain (multi-team comparisons, advanced filters), the project demonstrates a robust data pipeline and an engaging map-driven UI.
We thank Professor Laurent Vuillon and the course staff for guidance and EPFL for supporting the course. 💙
- Mathien, H. (2016). European Soccer Database. Kaggle. https://www.kaggle.com/datasets/hugomathien/soccer
- Slehkyi, S. (2018). Football Transfers 2000–2018. Kaggle. https://www.kaggle.com/code/slehkyi/football-transfers-2000-2018
- Hopman, L. (2024). Football Team Logos 2024/2025. GitHub. https://github.com/luukhopman/football-logos
- Creamer, C. (n.d.). European Football Logos by League. SportsLogos.net. https://www.sportslogos.net/leagues/list_by_category/31/European-Football-Logos/
- Antimoni, A. (2019). Football Stadiums Dataset. Kaggle. https://www.kaggle.com/datasets/antimoni/football-stadiums
- Jokecamp. (2017). Stadiums with GPS Coordinates. GitHub. https://github.com/jokecamp/FootballData/blob/master/other/stadiums-with-GPS-coordinates.csv
- Wikipedia. (2024). List of top-division football clubs in UEFA countries. https://en.wikipedia.org/wiki/List_of_top-division_football_clubs_in_UEFA_countries
If you want to run the website on your local machine, follow these steps:
- 📥 Clone the repository
git clone https://github.com/com-480-data-visualization/Dateam.gitTip: if you want to work from your fork, clone
https://github.com/georgstsc/Dateam.gitinstead.
- 📂 Navigate to the web directory
cd Dateam/web▶️ Install dependencies & build
npm i
npm run build▶️ Start the development server
npm run start- 🌍 Open the website in your browser
Once the server is running, open your browser and go to:
http://localhost:8081
Notes & troubleshooting
- Ensure you have Node.js (LTS) and npm installed. Check with
node -vandnpm -v. - If ports conflict, update the port used by the dev server or stop the process using the port.
- If
npm ifails with permission errors on Unix systems, prefer using a node version manager (nvm) or run with a local project install (avoid global installs). - To work on frontend code and see live reloads, consult the web folder scripts — some projects provide
npm run devfor live hot-reload.
We gratefully acknowledge everyone who contributed to this project:
- Georg Schwabedal (student lead)
- Mathurin Chritin
- Amene Gafsi
- Professor Laurent Gilles Marie Vuillon (COM‑480 instructor)
- All COM‑480 course staff and teaching assistants
- EPFL for supporting the course