Web
Données & Analyse (D&A)
Dans le cadre de la SAE 303, j’ai pu effectuer une visualisation des données.
À propos du projet
L'application est structurée autour de 4 pages principales, offrant une navigation fluide via une barre latérale (Sidebar) responsive :
Tableau de Bord (Dashboard) :
Affichage des KPIs (Indicateurs clés) : Nombre total de problèmes, taux de réussite global, meilleur solveur.
Graphique en bâtons (Chart.js) : Classement des solveurs par nombre de problèmes résolus.
Graphique en beignet (Chart.js) : Répartition globale des statuts (SAT, UNSAT, UNKNOWN, UNSUPPORTED).
Données Brutes :
Tableau complet des résultats issus du fichier JSON.
Système de filtres dynamiques : Possibilité de croiser les données par Solveur ET par Statut (ex: Voir tous les échecs du solveur "Choco").
Codes couleurs (Badges) pour identifier rapidement l'état d'un problème.
Classement & Analyse (Solvers) :
Tableau de leaderboard détaillé avec podium (ð¥, ð¥, ð¥).
Calcul du Temps Moyen sans échec (moyenne calculée uniquement sur les réussites, métrique la plus pertinente pour la vitesse pure).
Cactus Plot (D3.js) : Graphique avancé montrant la progression du nombre d'instances résolues en fonction du temps cumulé.
ð ️ Stack Technique
HTML5 / CSS3 : Basé sur le template Material Dashboard 3 (adapté).
JavaScript (ES6) : Logique de tri, filtrage et manipulation du DOM.
Chart.js : Pour les graphiques statistiques standards (Bar, Doughnut).
D3.js : Pour la visualisation avancée (Cactus Plot).
FontAwesome : Pour
Tableau de Bord (Dashboard) :
Affichage des KPIs (Indicateurs clés) : Nombre total de problèmes, taux de réussite global, meilleur solveur.
Graphique en bâtons (Chart.js) : Classement des solveurs par nombre de problèmes résolus.
Graphique en beignet (Chart.js) : Répartition globale des statuts (SAT, UNSAT, UNKNOWN, UNSUPPORTED).
Données Brutes :
Tableau complet des résultats issus du fichier JSON.
Système de filtres dynamiques : Possibilité de croiser les données par Solveur ET par Statut (ex: Voir tous les échecs du solveur "Choco").
Codes couleurs (Badges) pour identifier rapidement l'état d'un problème.
Classement & Analyse (Solvers) :
Tableau de leaderboard détaillé avec podium (ð¥, ð¥, ð¥).
Calcul du Temps Moyen sans échec (moyenne calculée uniquement sur les réussites, métrique la plus pertinente pour la vitesse pure).
Cactus Plot (D3.js) : Graphique avancé montrant la progression du nombre d'instances résolues en fonction du temps cumulé.
ð ️ Stack Technique
HTML5 / CSS3 : Basé sur le template Material Dashboard 3 (adapté).
JavaScript (ES6) : Logique de tri, filtrage et manipulation du DOM.
Chart.js : Pour les graphiques statistiques standards (Bar, Doughnut).
D3.js : Pour la visualisation avancée (Cactus Plot).
FontAwesome : Pour
Galerie
