RocketViz : Projet de Data Visualisation
Réalisé à l’automne 2023.
1ère Année de Master.
UE : Data Visualisation
Durée : 2 mois.
Langage de programmation : JavaScript (utilisation de la librairie D3.js)
Outil de visualisation des données d’un joueur sur l’ensemble d’une partie en ligne du jeu Rocket League.
Lien vers le site
Fonctionnalités
Fonctionnalité 1 : Timeline
La timeline est une représentation visuelle des événements clés qui se produisent pendant un match.
Elle permet aux joueurs de comprendre rapidement le déroulement du match et de repérer les moments importants.
Fonctionnalités de la Timeline
La timeline de Rocket League comprend les fonctionnalités suivantes :
-
Buts : Les buts marqués par chaque équipe sont représentés sur la timeline.
Chaque but est représenté par une icône de ballon de football, placée à l'endroit exact de la
timeline où le but a été marqué.
-
Démolitions : Les démolitions (lorsqu'un joueur détruit un autre joueur en le percutant à grande vitesse)
sont également représentées sur la timeline. Chaque démolition est représentée par une icône d'explosion,
placée à l'endroit exact de la timeline où la démolition a eu lieu.
-
Sauvegardes : Les sauvegardes (lorsqu'un joueur empêche un but en déviant le ballon) sont représentées
sur la timeline. Chaque sauvegarde est représentée par une icône de bouclier, placée à l'endroit exact de la
timeline où la sauvegarde a eu lieu.
-
Info-bulles : Lorsque l'utilisateur passe la souris sur une icône sur la timeline, une info-bulle apparaît,
fournissant des informations supplémentaires sur l'événement. Par exemple, pour une démolition, l'info-bulle
pourrait indiquer le nom du joueur qui a été détruit et le temps exact où la démolition a eu lieu.
La timeline permet donc à l'utilisateur de voir rapidement quand et où les événements clés ont eu lieu, ce qui peut
l'aider à comprendre comment le match s'est déroulé et où il peut s'améliorer pour les futurs matchs.
Fonctionnalité 2 : HeatMap
La HeatMap représente la position du ballon tout au long de la game.
Elle est reliée à la timeline et montre la position du ballon sur la période déterminée par l'utilisateur
si celui-ci utilise le slider.
Elle indique également la position du ballon entre chaque but si l'utilisateur le souhaite.
Fonctionnalité 3 : Aperçu global
Tableau des scores
Le tableau des scores indique les scores joueurs par joueur. En cliquant sur un joueur, l'utilisateur
peut consulter un histogramme comparant le joueur :
- à tous les autres joueurs
- aux joueurs de son équipe
- aux joueurs ennemis
- à un autre joueur
Statistiques par équipe
Les statistiques par équipe permettent la confrontation des scores totaux des deux équipes.
Pressure
La pressure est représentée par un diagramme circulaire montrant quel pourcentage de la partie la balle a passé
sur le demi-terrain de chacune des deux équipes.
Tout comme la HeatMap, il est connecté au slider de la timeline, permettant ainsi de calculer ce pourcentage
sur la période sélectionnée par l'utilisateur.