Graphe dynamique d’utilisateurs québécois de GitHub

Connaissez-vous D3.js? Cette librairie de visualisation tire son nom de Data-Driven Documents. Depuis ses débuts il a y 8 ans, le logiciel a eu plus de 200 versions.

J’hésitais à l’utiliser à cause de son très vaste API, moi qui préfère des solutions plus simples en général. Par exemple, j’aime beaucoup Vega-Lite et sa spécification déclarative qui supporte plusieurs graphiques. Vega-Lite est basé sur Vega, qui est lui-même basé sur D3.js.

Bref, après quelques jours de tatonnage, voici un graphe dynamique d’utilisateurs québécois de GitHub avec des liens qui représentent les follows et followers.

Les sources se trouvent ici:

On peut cliquer sur un cercle pour charger et afficher ses liens (follows/followers) ou faire Shift-Click pour charger ses liens et les liens suivants (d’un niveau). L’interface permet aussi de glisser l’affichage (drag) et de zoomer (avec le bouton scroll de la souris).

Attention, il y a plusieurs limitations actuellement:

  • Ça utilise mon token GitHub personnel, limité à 5000 requêtes à l’heure (pour l’ensemble de mes projets)
  • Ça commence toujours en affichant mon compte millette
  • C’est limité à 100 follows et 100 followers par compte
  • Ça filtre automatiquement les comptes pour n’afficher que ceux de Montréal (ou «mtl»)

Toutes des limites que je compte bientôt lever.

J’ai d’autres idées bien sûr, comme afficher les photos, varier la taille des cercles, etc. C’est pas mal rough mais ça pourra servir de base si vous êtes inspirés.

Comme d’habitude, je serais heureux d’avoir vos commentaires et suggestions.

À bientôt!

J’ai ouvert et fermé quelques issues:

À part le login (la limite de 5000 requêtes/h), les autres limitations sont levées.

On peut aussi spécifier un nom dans l’URL après le hash, par exemple:

L’interface permet d’ajouter autant d’utilisateurs que vous le voulez, mais ça devient lourd avec 500 personnes.

Reste à polir l’interface et on aura une bonne base.