import {Plot} from "npm:@observablehq/plot"
import {FileAttachment} from "npm:@observablehq/stdlib"
import * as d3 from "npm:d3@7" // Specify the version to avoid issues
import {Inputs} from "npm:@observablehq/inputs"
import {html} from "npm:htl"
// Load datasets
const fifaRawData = await FileAttachment("fifa_teams_cleaned.csv").csv({typed: true});
const matchRawData = await FileAttachment("match_teams.csv").csv({typed: true});
// Helper function to convert currency strings to numbers
function convertCurrencyToNumeric(value) {
if (typeof value !== 'string') return 0;
// Remove currency symbols, spaces, and convert to uppercase
let cleanValue = value.replace(/[€£$\s]/g, '').toUpperCase();
// Convert K to thousands and M to millions and B to billions
if (cleanValue.endsWith('K')) {
return parseFloat(cleanValue.replace('K', '')) * 1000;
} else if (cleanValue.endsWith('M')) {
return parseFloat(cleanValue.replace('M', '')) * 1000000;
} else if (cleanValue.endsWith('B')) {
return parseFloat(cleanValue.replace('B', '')) * 1000000000;
} else {
return parseFloat(cleanValue) || 0;
}
}
// Convert categorical attributes to numeric scales for visualization
const attributeScales = {
Speed: { 'Slow': 25, 'Balanced': 50, 'Fast': 75 },
Passing: { 'Safe': 25, 'Normal': 50, 'Risky': 75 },
Positioning: { 'Free form': 25, 'Organised': 75 },
Aggression: { 'Contain': 25, 'Press': 75 },
Pressure: { 'Deep': 25, 'Medium': 50, 'High': 75 },
'Team width': { 'Narrow': 25, 'Normal': 50, 'Wide': 75 }
};
// Derive playing style based on team attributes
function derivePlayingStyle(team) {
const speed = team.Speed;
const passing = team.Passing;
const width = team['Team width'];
const pressure = team.Pressure;
// Simple classification based on available attributes
if (speed === 'Slow' && passing === 'Safe') {
return 'Defensive';
} else if (width === 'Wide') {
return 'Wing Play';
} else if (passing === 'Normal' && width === 'Normal') {
return 'Balanced';
} else if (pressure === 'High') {
return 'High Press';
} else {
return 'Possession';
}
}
// Process FIFA teams data
const fifaData = fifaRawData
.filter(d => d.Overall !== null && d.Attack !== null) // Only teams with ratings
.map(d => {
// Convert attributes to numeric
const numericAttributes = {};
Object.entries(attributeScales).forEach(([attr, scale]) => {
if (d[attr] && scale[d[attr]]) {
numericAttributes[attr] = scale[d[attr]];
} else {
numericAttributes[attr] = 50; // Default value
}
});
return {
...d,
...numericAttributes,
// Parse financial data
transferBudget: convertCurrencyToNumeric(d['Transfer budget']),
clubWorth: convertCurrencyToNumeric(d['Club worth']),
// Create derived fields
playingStyle: derivePlayingStyle(d),
technicalSkill: (numericAttributes.Passing + (d.Midfield || 70)) / 2,
physicalIndex: (numericAttributes.Speed + numericAttributes.Aggression) / 2,
// Use the most recent date for the visualization
isRecent: d.date === "2024-07-08"
};
});
// Process match teams data
const matchData = matchRawData
.filter(d => d.Pts !== null && d.name !== null)
.map(d => ({
...d,
// Extract country code from team name (first 2-3 characters)
country: d.name.split(' ')[0],
// Match with FIFA data if possible
fifaId: d.sofifa_id
}));
// Use the most recent data for visualization
const recentFifaData = fifaData.filter(d => d.isRecent);
// Get a list of unique leagues
const uniqueLeagues = [...new Set(matchData.map(d => d.league))]
.filter(d => d !== null)
.sort((a, b) => a - b);
// Map league IDs to counts for dropdown
const leagueOptions = uniqueLeagues.map(id => {
const count = matchData.filter(d => d.league === id).length;
return { id, label: `League ${id} (${count} teams)` };
});
// Get unique playing styles
const playingStyles = [...new Set(recentFifaData.map(d => d.playingStyle))];
// Create state for selections
let selectedTeamID = null;
let selectedLeagueID = 'all';
let selectedStyleName = 'All Styles';
let selectedSortMetric = 'Overall';
// Create viewof variables for interactive filtering
viewof leagueFilter = Inputs.select(
[{ id: 'all', label: 'All Leagues' }, ...leagueOptions],
{
label: "Filter by League",
value: selectedLeagueID
}
);
viewof styleFilter = Inputs.select(
['All Styles', ...playingStyles],
{
label: "Filter by Playing Style",
value: selectedStyleName
}
);
viewof sortMetric = Inputs.select(
['Overall', 'Attack', 'Midfield', 'Defence', 'clubWorth', 'transferBudget', 'technicalSkill', 'physicalIndex'],
{
label: "Sort Teams By",
value: selectedSortMetric
}
);
// Update shared state when selections change
leagueFilter; // This makes the variable reactive
styleFilter;
sortMetric;
selectedLeagueID = leagueFilter;
selectedStyleName = styleFilter;
selectedSortMetric = sortMetric;
// Function to highlight team across charts
function highlightTeam(teamID) {
selectedTeamID = teamID;
document.querySelectorAll(".highlight-team").forEach(el => {
el.classList.remove("highlight-team");
});
if (teamID) {
document.querySelectorAll(`[data-team="${teamID}"]`).forEach(el => {
el.classList.add("highlight-team");
});
}
}
// Function to filter data based on selections
function getFilteredTeams() {
let filtered = recentFifaData;
// Filter by playing style if selected
if (selectedStyleName !== 'All Styles') {
filtered = filtered.filter(d => d.playingStyle === selectedStyleName);
}
// Match with selected league if possible and filter
if (selectedLeagueID !== 'all') {
const leagueId = selectedLeagueID.id || parseInt(selectedLeagueID);
const teamsInLeague = matchData.filter(d => d.league === leagueId);
// If there are matching FIFA IDs, use them to filter
if (teamsInLeague.some(d => d.sofifa_id !== null)) {
const fifaIds = new Set(teamsInLeague.map(d => d.sofifa_id).filter(id => id !== null));
filtered = filtered.filter(d => fifaIds.has(d.ID));
}
}
return filtered;
}
// Get filtered data based on current selections
const filteredTeams = getFilteredTeams();
// Add some CSS for highlighting
const styles = html`<style>
.highlight-team {
stroke: #ff5500 !important;
stroke-width: 3px !important;
}
.team-tooltip {
font-size: 12px;
padding: 8px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid #ccc;
border-radius: 4px;
}
</style>`;
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
