On the Shoulders of Cloud Giants: visualisation de données avec JavaScript dans Observable

Mon projet On the Shoulders of Cloud Giants qui tente de décrire les pratiques de citations dans les publications de jeux de rôle sur table dort un peu en ce moment. Je suis en train de tester une nouvelle technique qui consiste à créer des index automatiques de citations mais ça prend du temps.

En attendant, j’ai expérimenté des visualisations de données avec Observable, la plateforme qui permet d’intégrer des données avec des bibliothèques de visualisation JavaScript.

Elle se trouve ici : https://observablehq.com/@pascaliensis/on-the-shoulders-of-cloud-giants

Voici son fonctionnement :

1. Le code interroge Wikidata et rapatrie les données de manière structuré sous la forme (principalement) de séries de paires entre un jeux de rôle qui cite et un jeux de rôle qui est cité.
   1. Les données existent dans Wikidata grâce à la propriété P2860 (cites work).
   2. Le code se trouve en annexe (tout en bas de la page Observable) dans la variable query=
   3. D’autres données sont rapatriées au passage : date de publication, “mouvement” auquel appartient le jeu de rôle (The Forge, OSR, etc.), maison d’édition et mécaniques de jeu.
2. Ces données sous la forme d’un tableau sont codées au format JSON. C’est important car comme nous allons faire des visualisations JavaScript, il faut structurer les données dans ce format pour qu’elles soient absorbées correctement par les bibliothèques de visualisation JavaScript.
3. Ensuite, ce tableau JSON est transformé dans une hiérarchie JSON, c’est une organisation de l’information spécialement conçue pour les visualisations de réseau / de relation.
   
   1. En gros, la structure de cette hiérarchie JSON se découpe en deux parties : une partie décrivant chaque jeu indépendamment (partie nodes) et une partie listant chaque relation (partie edges).
   2. La transformation a été effectuée par une fonction nommée table2hierarchy
   3. La variable contenant ce fichier se trouve dans data_citingCited
4. À partir de là, l’essentiel est fait car les bibliothèques JavaScript font tout le reste du travail. Il faut juste les modifier un petit peu chaque fois pour avoir l’effet désiré (comme le fait de filtrer les données ou de les colorer). Plusieurs visualisations sont ainsi faites :
   1. Des graphes non orientés (undirected graphs)
   2. Des diagrammes d’accord (chord diagrams)
   3. Des diagrammes à barre bien classiques, etc.

https://observablehq.com/@pascaliensis/on-the-shoulders-of-cloud-giants

---

---