“F1 Fantasy Analysis Hub” is a sophisticated data analytics platform designed for Formula 1 Fantasy league participants. The application provides comprehensive strategy and data intelligence through real-time data visualization, advanced statistical analysis, and predictive modeling. Built with modern web technologies and leveraging external F1 Fantasy data sources, it offers professional-grade analytics tools for optimizing fantasy team performance.
fantasydata/
├── index.html # Main analytics dashboard (48,878 lines)
├── index_new_clean.html # Alternative clean version
├── DATA_FORMAT_DOCUMENTATION.md # Comprehensive data format specifications
└── README.md # Project documentation and usage guide
<!-- Advanced Charting Libraries -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@sgratzl/chartjs-chart-boxplot"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
// Primary data source configuration
const BASE_URL = 'https://raw.githubusercontent.com/JoshCBruce/fantasy-data/refs/heads/main/latest';
const DRIVER_DATA_URL = `${BASE_URL}/driver_data`;
const CONSTRUCTOR_DATA_URL = `${BASE_URL}/constructor_data`;
// Data endpoints structure:
// - Driver Data: {BASE_URL}/driver_data/{ABBREVIATION}.json
// - Constructor Data: {BASE_URL}/constructor_data/{ABBREVIATION}.json
// - Summary Data: {BASE_URL}/summary_data/weekend_summary.json
// - Team Summary: {BASE_URL}/summary_data/team_summary.json
// - Rankings: {BASE_URL}/summary_data/percentage_picked_ranking.json
async function loadAllData() {
try {
// Load all driver data concurrently
const driverPromises = DRIVER_ABBREVIATIONS.map(abbrev =>
fetch(`${DRIVER_DATA_URL}/${abbrev}.json`)
.then(response => response.json())
.then(data => ({ abbreviation: abbrev, data }))
);
// Load all constructor data concurrently
const constructorPromises = CONSTRUCTOR_ABBREVIATIONS.map(abbrev =>
fetch(`${CONSTRUCTOR_DATA_URL}/${abbrev}.json`)
.then(response => response.json())
.then(data => ({ abbreviation: abbrev, data }))
);
// Parallel data loading for optimal performance
const [driverResults, constructorResults] = await Promise.all([
Promise.all(driverPromises),
Promise.all(constructorPromises)
]);
return { driverResults, constructorResults };
} catch (error) {
showError('Failed to load F1 Fantasy data. Please try again later.');
throw error;
}
}
Based on the comprehensive data documentation, each driver file contains:
{
"driverId": "String", // Unique F1 Fantasy identifier
"abbreviation": "String", // 3-letter driver code
"name": "String", // Full driver name
"team": "String", // Current/historical team
"position": "Number", // Championship position
"totalPoints": "Number", // Cumulative F1 Fantasy points
"races": [{ // Race-by-race breakdown
"raceName": "String",
"date": "ISO Date String",
"points": "Number",
"position": "Number",
"fastestLap": "Boolean",
"dnf": "Boolean",
"penalties": "Array"
}],
"teamSwaps": [{ // Team change tracking
"fromTeam": "String",
"toTeam": "String",
"effectiveRace": "String"
}]
}
{
"constructorId": "String", // Team identifier
"abbreviation": "String", // Team abbreviation
"name": "String", // Full team name
"totalPoints": "Number", // Team total points
"drivers": ["Array"], // Associated drivers
"races": [{ // Team performance by race
"raceName": "String",
"points": "Number",
"position": "Number"
}]
}
@font-face {
font-family: 'Formula1';
src: url('../fonts/Formula1-Regular.ttf') format('truetype');
font-weight: 400;
}
@font-face {
font-family: 'Formula1';
src: url('../fonts/Formula1-Bold.ttf') format('truetype');
font-weight: 700;
}
@font-face {
font-family: 'Formula1';
src: url('../fonts/Formula1-Black.ttf') format('truetype');
font-weight: 900;
}
:root {
--bg-primary: #0A0E15; /* Deep dark background */
--bg-secondary: #1C2028; /* Secondary panels */
--bg-tertiary: #2A2F38; /* Tertiary elements */
--text-primary: #FFFFFF; /* Primary text */
--text-secondary: #CCCCCC; /* Secondary text */
--text-muted: #888888; /* Muted text */
--glass-bg: rgba(255, 255, 255, 0.08); /* Glassmorphism background */
--glass-border: rgba(255, 255, 255, 0.15); /* Glassmorphism border */
--f1-red: #FF1E00; /* Official F1 red */
--f1-gold: #FFD700; /* F1 gold accent */
--accent-blue: #00D4FF; /* Data visualization blue */
--accent-green: #00FF88; /* Success/positive green */
--accent-purple: #8B5CF6; /* Analytics purple */
}
/* Modern glassmorphism styling throughout interface */
.glass-panel {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 16px;
}
// Tab structure with 9 specialized analysis sections
const tabs = [
'📊 Overview', // General dashboard and summary
'🏎️ Drivers', // Individual driver analysis
'🏁 Teams', // Constructor/team analysis
'🎯 Strategy', // Strategic recommendations
'📈 Trends', // Historical trend analysis
'🔮 Predictions', // Predictive modeling
'🔬 Analytics', // Advanced statistical analysis
'⚙️ Team Builder', // Fantasy team optimization
'🚀 Advanced' // Expert-level analysis tools
];
function switchTab(tabName) {
// Update active tab styling
document.querySelectorAll('.nav-tab').forEach(tab => {
tab.classList.remove('active');
});
event.target.classList.add('active');
// Load tab-specific content and data visualizations
loadTabContent(tabName);
}
Each tab provides specialized analysis tools:
// Comprehensive driver list for 2024 F1 season
const DRIVER_ABBREVIATIONS = [
'VER', 'LEC', 'SAI', 'RUS', 'HAM', 'NOR', 'PIA', 'ALO', 'STR',
'TSU', 'GAS', 'OCO', 'ALB', 'SAR', 'MAG', 'HUL', 'RIC', 'BOT',
'ZHO', 'LAW' // Including all drivers, reserves, and mid-season changes
];
// Constructor teams for analysis
const CONSTRUCTOR_ABBREVIATIONS = [
'RED', 'FER', 'MER', 'MCL', 'AST', 'ALP', 'WIL', 'HAA', 'RB', 'SAU'
];
// Statistical analysis functions for F1 Fantasy data
function calculateDriverEfficiency(driverData) {
const points = driverData.races.map(race => race.points);
const positions = driverData.races.map(race => race.position);
return {
averagePoints: points.reduce((a, b) => a + b, 0) / points.length,
consistency: calculateStandardDeviation(points),
positionTrend: calculateLinearRegression(positions),
valueRating: calculateValueScore(driverData)
};
}
function generatePredictiveModel(historicalData) {
// Implement machine learning algorithms for performance prediction
// Factors: track characteristics, weather, recent form, team performance
return {
nextRacePrediction: predictNextRacePoints(historicalData),
seasonProjection: projectSeasonPerformance(historicalData),
confidenceInterval: calculateConfidenceRange(historicalData)
};
}
// Professional chart configurations for F1 data
function createPerformanceChart(canvasId, driverData) {
const ctx = document.getElementById(canvasId).getContext('2d');
return new Chart(ctx, {
type: 'line',
data: {
labels: driverData.races.map(race => race.raceName),
datasets: [{
label: 'Fantasy Points',
data: driverData.races.map(race => race.points),
borderColor: '#FF1E00',
backgroundColor: 'rgba(255, 30, 0, 0.1)',
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
labels: { color: '#FFFFFF' }
}
},
scales: {
x: {
ticks: { color: '#CCCCCC' },
grid: { color: 'rgba(255, 255, 255, 0.1)' }
},
y: {
ticks: { color: '#CCCCCC' },
grid: { color: 'rgba(255, 255, 255, 0.1)' }
}
}
}
});
}
// Optimized concurrent data fetching
async function initializeApp() {
try {
showLoadingScreen();
// Load all data sources in parallel
const dataResults = await loadAllData();
// Process and cache data for optimal performance
processAndCacheData(dataResults);
// Initialize all visualizations
initializeCharts();
hideLoadingScreen();
} catch (error) {
handleLoadingError(error);
}
}
function showError(message) {
// Display user-friendly error messages
const errorContainer = document.createElement('div');
errorContainer.className = 'error-message';
errorContainer.textContent = message;
document.body.appendChild(errorContainer);
// Auto-remove after timeout
setTimeout(() => errorContainer.remove(), 5000);
}
// Network error handling with retry logic
async function fetchWithRetry(url, maxRetries = 3) {
for (let i = 0; i <= maxRetries; i++) {
try {
const response = await fetch(url);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response;
} catch (error) {
if (i === maxRetries) throw error;
await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));
}
}
}
/* Responsive design for all device types */
@media (max-width: 768px) {
.header-content {
flex-direction: column;
gap: 1rem;
}
.nav-tabs {
overflow-x: auto;
scrollbar-width: none;
}
.main-container {
padding: 1rem;
}
/* Responsive chart containers */
.chart-container {
height: 300px;
margin-bottom: 2rem;
}
}
F1 Fantasy Analysis Hub represents a professional-grade analytics platform that successfully transforms complex F1 Fantasy data into actionable insights through sophisticated visualization and analysis tools. The comprehensive integration of external data sources, advanced charting capabilities, and strategic analysis features creates an invaluable resource for fantasy racing enthusiasts.
Technical Rating: 9.0/10
The application successfully bridges the gap between raw F1 Fantasy data and strategic insights, providing users with professional-level analytics tools previously available only to industry experts.