← Projets
Visualisation · canvas

187 nœuds sur une carte qu'on peut parcourir comme un ciel

Quand une base de connaissances dépasse quelques dizaines d'entrées, la liste ne suffit plus : il faut une carte.

187nœuds rendus
0librairie externe
1fichier HTML
Capture de la carte de connaissances : graphe de 187 nœuds
Capture de l'outil — interface d'origine en russe.

Le problème

Un graphe se lit mal en tableau. Il faut des distances qui veulent dire quelque chose, un zoom fluide, et une recherche qui ne casse pas la vue.

Ce que j'ai fait

Rendu sur canvas sans librairie : disposition par forces, liens calculés par entités partagées, filtres par catégorie, recherche, panorama et zoom. Tout tient dans un fichier unique, ce qui rend l'outil transportable et impossible à casser par une mise à jour de dépendance.

Résultat

187 nœuds et 140 entités affichés sans saccade, y compris en zoom arrière.

Ce que je ferais différemment

Prévoir le rendu progressif dès le départ : au-delà de quelques milliers de nœuds, il faudra regrouper les amas plutôt que tout dessiner.

Stack

  • Canvas
  • JavaScript vanilla
  • Graphe
  • UX
—
Suite

Le prochain système

Quand une décision de cette page est réutilisable, elle finit dans les notes techniques.