Transform Raw Data Into Tactical Insights.
Analyze player performance → Compare tactical profiles → Identify role fits → Discover similar talents using advanced statistical modeling and interactive visualizations.
| Player Overview | Player Comparison | Role Analysis |
|---|---|---|
| Attribute breakdown + radar profiling | Head-to-head metrics + difference analysis | Role suitability scoring |
- Multi-Dimensional Player Profiling — Combines 11 key performance metrics across attacking, creative, defensive, and physical dimensions for comprehensive evaluation.
- Role-Based Analysis — Evaluate players against 7 predefined tactical roles (Poacher, Target Man, Winger, etc.) with weighted scoring algorithms.
- Euclidean Similarity Engine — Find statistically similar players based on performance vector distances across all metrics.
- Interactive Radar Charts — Spider diagrams showing player strengths across 6 composite categories with dynamic coloring.
- Positional Heatmaps — Algorithmic mockups of player activity patterns with intensity-based clustering visualization.
- Passing Network Graphs — Animated connection diagrams showing pass distribution and frequency patterns.
- Attribute Breakdown Charts — Bar graphs with color-coded performance tiers and professional styling.
- Global Filtering System — Filter by gender, competition, season, and country to narrow down player pools.
- Real-Time Comparison — Side-by-side player analysis with visual difference highlighting.
- Performance Trending — Track metrics over time with normalized per-90 minute calculations.
- Export-Ready Reports — Generate printable scouting reports with visual evidence and statistical breakdowns.
- Modern Dark Theme — Professional UI with glass-morphism effects and consistent color palette.
- Responsive Design — Adapts to different screen sizes with mobile-friendly layouts.
- Smooth Animations — Cascading transitions and micro-interactions for premium user experience.
- Cross-Browser Compatibility — Works seamlessly across Chrome, Firefox, Safari, and Edge.
┌─────────────────────────────────────────────────────────┐
│ HTML5 Frontend │
│ (dashboard/index.html — UI) │
└─────────────────────┬───────────────────────────────────┘
│ DOM Events & State Management
┌─────────────────────▼───────────────────────────────────┐
│ JavaScript Engine │
│ (dashboard/app.js — Logic) │
├─────────────────────────────────────────────────────────┤
│ Visualization Layer │
│ D3.js Charts + Google Charts Integration │
├─────────────────────────────────────────────────────────┤
│ Data Pipeline │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────────┐ │
│ │ Data Fetch │ │ Processing │ │ Normalization │ │
│ └──────────────┘ └──────────────┘ └──────────────────┘ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────────┐ │
│ │ Role Scoring │ │ Similarity │ │ Filtering │ │
│ └──────────────┘ └──────────────┘ └──────────────────┘ │
├─────────────────────────────────────────────────────────┤
│ Data Layer │
│ ┌──────────────────┐ ┌─────────────────────────────┐ │
│ │ players.json │ │ Cache System │ │
│ │ (1.9MB) │ │ (Individual Player Files) │ │
│ └──────────────────┘ └─────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘
| Layer | Technology |
|---|---|
| Frontend UI | HTML5, CSS3 (Custom Properties), JavaScript ES6+ |
| Data Visualization | D3.js (Radar Charts, Heatmaps), Google Charts (Bar Graphs) |
| State Management | Vanilla JavaScript with Global Variables |
| Data Processing | Python 3, pandas, statsbombpy |
| Data Source | StatsBomb Open Data API |
| Styling Framework | Custom CSS with DM Sans/DM Mono Fonts |
| Deployment | Static File Server (Python http.server) |
xScout/
├── dashboard/
│ ├── index.html # Main dashboard application
│ ├── app.js # Core application logic & visualizations
│ └── style.css # Custom styling & responsive design
│
├── data/
│ ├── players.json # Processed player statistics (1.9MB)
│ └── cache/ # Individual player data files
│ └── {player_id}_{season}.json
│
├── scripts/
│ └── pipeline.py # Data processing pipeline
│
├── requirements.txt # Python dependencies
├── README.md # Project documentation
└── xScout_PRD.docx # Product requirements documentation
- Python 3.8+
- Modern Web Browser (Chrome, Firefox, Safari, Edge)
- Local Server Environment (Built-in Python server recommended)
# 1. Clone the repository
git clone https://github.com/<your-username>/xscout.git
cd xscout
# 2. Create a virtual environment
python -m venv .venv
# 3. Activate the virtual environment
# Windows:
.venv\Scripts\activate
# macOS/Linux:
source .venv/bin/activate
# 4. Install dependencies
pip install -r requirements.txt# Start Python's built-in HTTP server
python -m http.server 8000
# Navigate to http://localhost:8000/dashboard# Open dashboard/index.html directly in your browser
# Note: Some features may not work due to CORS restrictionsData Pipeline Execution
│
▼
StatsBomb API Fetch ──► Event Processing ──► Per-90 Normalization
│
▼
JSON Data Generation ──► Dashboard Loading
│
▼
Player Selection ──► Dynamic Visualization Rendering
│
├──► Radar Chart Generation (D3.js)
├──► Attribute Bars (Google Charts)
├──► Heatmap Creation (Algorithmic Mockup)
└──► Network Diagrams (Animated SVG)
│
▼
Interactive Analysis
│
├──► Role Fit Scoring
├──► Player Comparison
└──► Similarity Matching
| Component | Methodology | Purpose |
|---|---|---|
| Role Fit Engine | Weighted Metric Scoring | Match players to tactical positions |
| Similarity Detector | Euclidean Distance | Find statistically comparable players |
| Normalization Engine | Per-90 Minute Calculation | Standardize playing time differences |
| Visualization Engine | D3.js + SVG Animation | Create interactive performance charts |
Key settings can be modified in dashboard/app.js:
// Performance metrics configuration
const METRICS = [
'shots_p90', 'xg_p90', 'shot_conversion',
'prog_passes_p90', 'pass_completion', 'key_passes_p90',
'dribbles_p90', 'pressures_p90', 'press_success',
'aerial_win_rate', 'distance_p90'
];
// Role templates with weighted importance
const ROLES = {
'Poacher': { shot_conversion: 0.30, xg_p90: 0.25, ... },
'Target Man': { aerial_win_rate: 0.30, xg_p90: 0.25, ... }
};
// Visualization thresholds
function getBarColor(val) {
if (val >= 85) return '#b8ff57'; // Excellent
if (val >= 70) return '#00e5ff'; // Good
if (val >= 55) return '#ffd166'; // Average
return '#ff5e3a'; // Below Average
}- Fork the repository
- Create your feature branch (
git checkout -b feature/player-analytics) - Commit your changes (
git commit -m 'Add advanced heatmap visualization') - Push to the branch (
git push origin feature/player-analytics) - Open a Pull Request
This project is licensed under the MIT License — see the LICENSE file for details.
Built with ❤️ using JavaScript, D3.js & Python
xScout — Transforming Data Into Tactical Excellence.