« STIC:STIC III (2018)/Physicalisation de statistiques au hockey sur glace » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
(→‎Démarche : ajout d'un how to)
Ligne 84 : Ligne 84 :
==== Code du parser ====
==== Code du parser ====
Le code est disponible sur GitHub : https://github.com/oulevey/hockey-heatmap.
Le code est disponible sur GitHub : https://github.com/oulevey/hockey-heatmap.
==== Comment utiliser les scripts ====


==== Difficultés rencontrées ====
==== Difficultés rencontrées ====

Version du 2 septembre 2019 à 20:57

Physicalisation de données
Module: STIC:STIC III (2018)/Projets
brouillon débutant
2019/09/02

Introduction

Ce projet créé dans le cadre du cours STIC III a pour but de proposer des visualisations évocatrices des statistiques de hockey sur glace. Elle se reposera sur un parser XML écrit en php, qui produira une heatmap qui sera déclinée sur divers supports.

Ce projet est en construction est sera terminé d'ici fin août 2019.

Objectifs

La compréhension de données statistiques est une tâche difficile, surtout lorsqu'elles sont présentées dans un tableau (la situation actuelle). Il existe actuellement des représentations visuelles assez basiques qui consistent à indiquer l'emplacement d'une action de jeu à l'endroit où elle a eu lieu. Bien que ces représentations graphiques en deux dimensions possèdent une certaine affordance elles ont comme faiblesse de ne pas fournir d'indications quant à la concentration des actions qui peuvent se superposer. Ce problème s'amplifie lorsque le nombre d'actions augmente, comme on peut le voir sur l'illustration jointe.

Sur cette image on a un exemple de visualisation bidimensionnelle que l'on utilise en hockey sur glace. Elle illustre bien le problème de la précision lorsque des évènements se superposent.
Sur cette image on a un exemple de visualisation bidimensionnelle que l'on utilise en hockey sur glace. Elle illustre bien le problème de la précision lorsque des évènements se superposent.

Apports théoriques

Un coach n'a que très peu de temps à consacrer à l'analyse statistique de son équipe, il faut donc que la physicalisation soit simple à comprendre tout en étant précise (nous avons vu précédemment que les visualisations actuellement utilisées sont simples à comprendre mais peu précises).

En s'appuyant sur la notion d'affordance popularisée par James Gibson nous allons chercher à créer un objet dont l'ergonomie suggère sa propre utilisation. Nous allons également nous intéresser aux apports de William Gaver pour qui l'affordance est « les propriétés de l'environnement qui rendent certaines actions possibles pour un individu équipé à cette fin ».

Nous allons donc proposer des objets tangibles qui seront évocateurs pour leur public cible (joueurs, coachs) en lui donnant une forme de patinoire, en ajoutant les lignes et les cages. Cette conclusion n'est pas simplement le fruit de la littérature scientifique mais d'une consultation avec les utilisateurs finaux.

Méthode utilisée

Il s'agit là d'une méthode centrée utilisateur, puisque tout à commencé par un entretien avec les utilisateurs. Ce projet va essayer de répondre du mieux possible à leurs besoins. On est en droit de se demander pourquoi ne pas utiliser une heatmap traditionnelle ? Toutes les heatmaps ont une échelle de couleurs pour pouvoir les lire. En remplaçant l'information de couleur par un ajout d'une information de hauteur physique on contourne ce problème et on y rend plus simple à lire. De même on peut opérer des comparaisons plus facilement. Par exemple sur une heatmap classique les valeurs en orange seront deux fois plus élevées que les valeurs en vert, sans lire la légende c'est impossible à déterminer, en revanche si vous comparez des hauteurs physique cela devient trivial.

Après s'être entretenu avec les utilisateurs il reste encore des défis à relever :

  • En premier lieu il faudra récupérer les données saisies sous un format utilisable par l'ordinateur (actuellement elles sont sous une forme visuelle).
  • Dans un deuxième temps il faudra développer un algorithme d'interprétation des données.
  • Ensuite il faudra développer un algorithme permettant de produire des objets tangibles à partir de ces données.
  • Dans un quatrième temps il faut

Projet 1 - Heatmap en 3D des tirs cadrés

Dans ce projet je vais imprimer en 3D une réplique de patinoire dont la topographie indiquera l'emplacement et la quantité de tirs cadrés.

Les données statistiques sont exportées au format XML. Le fichier obtenu ressemble à ce qui suit.

 1 <GAMEACTION>
 2 			<TEAM>Flaming Eagles HC</TEAM>
 3 			<TIME>3756</TIME>
 4 			<TYPE>SHOT</TYPE>
 5 			<DETAIL>SOG</DETAIL>
 6 			<SS>5-5</SS>
 7 			<SCORER>24</SCORER>
 8 			<PLUS1>3</PLUS1>
 9 			<PLUS2>11</PLUS2>
10 			<PLUS3>16</PLUS3>
11 			<PLUS4>25</PLUS4>
12 			<PLUS5>24</PLUS5>
13 			<PLUS6>14</PLUS6>
14 			<GK>14</GK>
15 			<GK_OPPONENT>149</GK_OPPONENT>
16 			<DATETIME>1541271623</DATETIME>
17 			<PERIOD>1</PERIOD>
18 			<POSITION_X>4.691489</POSITION_X>
19 			<POSITION_Y>20.90425</POSITION_Y>
20 			<POSITION>L-POINT</POSITION>
21 			<ZONE>OFFENSIVE</ZONE>
22 		</GAMEACTION>

Pour réaliser ma heatmap je vais avoir besoin des éléments suivants :

  • <DETAIL> pour identifier si il s'agi d'un tir cadré
  • <POSITION_X> et <POSITION_Y> pour pouvoir y situer sur la surface de jeu.

Il y a là un premier problème, je ne sais pas à quoi correspondent ces valeurs. Où se trouve le 0 ? Quel est le maximum ? Après avoir placé des données dans les coins de la patinoire j'ai pu déterminer que les positions vont de 0 à 30 sur l'axe des X (petit côté de la patinoire) et de 0 à 60 pour l'axe des Y (long côté). C'est assez logique puisque une patinoire européenne fait 30m*60m.

L'algorithme que je vais mettre en place devra donc extraire les positions X et Y de tous les tirs cadrés (SOG).

Démarche

La première étape est la collecte de données, ces données ayant déjà été collectées je peux passer à l'étape suivante qui consiste à extraire les données pertinentes. Pour ce faire je vais coder un algorithme utilisant XPath qui me permettra de cibler les GAMEACTION correspondant à un tir cadré, puis à en récupérer la position.

Description de l'algorithme d'analyse syntaxique (parsing)

  • Scanner le dossier dans lequel se trouve les fichiers XML, placer leurs noms dans un array et les passer au parser.
  • Repérer tous les tirs cadrés d'une équipe dans le XML avec XPath et les placer dans un array (ces paramètres seront des arguments, utile si on veut travailler sur d'autres équipes ou d'autres actions de jeu).
  • L'array créé par SimpleXML contient des objets, il faut donc récupérer les valeurs contenues dans les objets les arrondir et les push dans un autre array.
  • Ensuite on crée un tableau (multidimensional array) que l'on rempli de 0.
  • Pour remplir les case correspondantes à chaque tir on récupère chaque paire de coordonnées (un x et un y), et ensuite on incrémente la case du tableau correspondant.
  • On répète l'opération pour tous les fichiers présents dans le dossier.
  • On exporte le tableau dans le dossier de travail.

Le code s'exécute en ligne de commande mais on pourrait imaginer lui donner une interface utilisateur dans le navigateur. L'avantage de l'exécution en ligne de commande est de s'affranchir de la durée d'exécution maximale. On peut augmenter cette valeur en modifiant php.ini cependant cela ne devrait pas être nécessaire.

Afin de respecter les bonnes pratiques l'utilisateur n'appelle pas directement le parser mais un script unique qui s'occupe lui d'appeler les autres fonctions.

Code du parser

Le code est disponible sur GitHub : https://github.com/oulevey/hockey-heatmap.

Comment utiliser les scripts

Difficultés rencontrées

La difficulté principale résidait dans le codage de l'algorithme en PHP car il s'agi d'un langage que je ne maîtrise que très peu cependant j'ai pu trouver de l'aide auprès de Sébastien Mischler (beaucoup) ainsi que Nicolas Hürzeler et Stéphane Morand.

C'était également assez compliqué de choisir comment représenter les évènements en impression 3D, l'idée de base était de faire des pics, mais c'était impossible de les imprimer. Je me suis donc tourné vers des formes plus basiques.

Finalement, ce n'est pas une difficulté à proprement parler mais plus une perte de temps considérable : la génération des fichiers XML doit se faire manuellement à l'heure actuelle et ils sont envoyés par email. C'était une tâche particulièrement chronophage.

Avantages et limites de ce projet

Probablement sous forme de tableau

Conclusion

Conclusion

Evolution futures

Ce projet ayant rencontré un grand intérêt et une bonne réception auprès du public j'ai prévu de le faire évoluer selon les axes suivants (sans notion de priorité) :

  • Création de heatmap classiques automatiquement et pendant le match
  • Placer ce projet sur un serveur qui traiterai automatiquement les données
  • Ajouter des arguments qui permettront de choisir quelles actions on veut obtenir
  • Créer une interface utilisateur
  • Pré-analyse automatique des données avec mise en évidence des statistiques problématiques

Ressources

Références

  • Gaver, W. W. (1991, April). Technology affordances. In Proceedings of the SIGCHI conference on Human factors in computing systems (pp. 79-84). Acm.
  • Gibson, J. J. (1979). The theory of affordances. The ecological approach to visual perception.