Sonia Dakhli

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

Visualisations d'une partie

Fonctionnalités

Fonctionnalité 1 : Timeline

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.

HeatMap

Fonctionnalité 3 : Aperçu global

Tableau des scores

Scoreboard

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.

Scoreboard

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.

Pression et démonstration du slider