SLI.data, une visualisation interactive de données
Développée en D3.js et basée sur des calculs statistiques, cette interface permet de visualiser les chercheurs.euses de la section des Sciences du langage et de l'information (SLI) de l'Unil et leur affinité avec les différents thèmes de recherche.
Comment représenter la diversité des thèmes de recherche ?
La section des Sciences du langage et de l’information regroupe de nombreuses personnes aux thématiques variées : phonologie, linguistique, jeux vidéos, statistiques, littérature, etc. Impossible (et tant mieux !) de placer chacun dans une case précise.
Aussi la section a initié un projet sur la durée pour illustrer et faire comprendre la diversité non seulement des thématiques, mais aussi des chercheuses et chercheurs. En effet, si certains sujets divergent fortement, d’autres se prêtent bien à la multidisciplinarité.
Ainsi après avoir rassemblé un important jeu de données, la section a proposé à Loïc, dans le cadre d’un enseignement en visualisation de données par Isaac Pante, aussi écrivain et game designer, de réaliser une représentation interactive du dataset.
Extrait du code source
Des données riches, complexes et changeantes
15 personnes, 100 thématiques, les votes de chacun.e pour tous les sujets et enfin la possibilité de modifier, ajouter ou supprimer régulièrement les en-têtes et entrées.
Disponibles dans un Google Sheet, ces données sont récupérées à chaque chargement de la page. Ainsi, couplé à l’application, un module d’analyse des correspondances en Javascript, développé par Guillaume Guex, enseignant en méthodes quantitatives, permet d’obtenir des valeurs utiles pour représenter à la fois les sujets et les membres de la section.
Si des outils permettent de générer rapidement une visualisation du résultats à partir de Python ou de R, le design est rarement alléchant et l’interactivité quasi inexistante. Transformons donc ces résultats en une jolie visualisation lisible et utilisable.
Un graphique interactif avec D3.js
La bibliothèque D3.js permet, entre autres, de créer des représentations de données pour le web avec du SVG. Grâce à elle, on bénéficie notamment du zoom et du déplacement, des actions sur le graphique et des opérations d’échelles ou de positionnement.
En revanche, pour les éléments d’interface, il a fallu les créer de zéro, car s’appuyer sur un framework tel React, Vue ou Solid n’était pas indiqué. En effet, le projet sera poursuivi par des étudiants aux parcours et compétences variés avec D3.js comme dénominateur commun.
Liens utiles
Nota bene : Validé avec succès par Loïc mi-2022, ce projet est désormais développé en interne par la section.