Tutoriel : Visualiser des relations entre entités à l'aide d'un graphe dynamique

Mis à jour le 10/08/2020 par Arnaud Fougerousse

Présenter visuellement un réseau ou obtenir une vue globale de celui-ci peut s'avérer plus complexe que prévu dès lors qu'il excède une certaine taille. Des solutions existent comme le schéma à main levé sur tableau Velleda ou encore le redoutable combo papier crayon ! Mais qu'avons nous côté numérique ?

Nous allons voir comment réaliser un graphe dynamique pour vos réseaux avec deux jeux de données.
L'un contenant les nœuds (sujets à associer).
L'autre contenant les liens (relations entre les nœuds).

Charger vos données

Pour cet exemple, nous utiliserons les jeux de données suivants:

Commencez par télécharger les deux jeux de données ci-dessus.
Connectez-vous à votre compte Koumoul et dirigez vous vers vos données dans la barre de navigation.
Cliquez sur le bouton Fichier et importez sur votre compte les jeux de données. Lorsque vous cliquerez sur lancer l'import, vous serez redirigé sur une page d'édition du jeu de données. Patientez jusqu’à ce que l'étape Finalisation soit validée.

finalisation

Vos jeux de données sont chargés, passons à la visualisation.

Créer la visualisation

Dirigez vous vers vos visualisations dans la barre de navigation.
Cliquez sur le bouton créer une visualisation et sélectionnez Graphes/Réseaux situé dans la partie Visualisation de type autre.

type visualisation

Renseignez un titre à votre visualisation et cliquez sur créer la visualisation. Votre visualisation est créée et vous avez été redirigé sur sa page d'édition.

Configurer la visualisation

Dans l'onglet SOURCES, commencez par renseigner les jeux de données que vous avez importés.

sources de données pour visualisation

Dans l'onglet RENDU, trois informations sont essentiels afin d'obtenir un premier résultat:

  • le champ utilisé pour lier vos nœuds (ex: name).
  • le champ source qui définit le point de départ d'un lien (ex: source).
  • le champ cible qui définit le point d'arrivée d'un lien (ex: target).

rendu visualisation

Le champ renseigné comme étant celui utilisé pour lier vos nœuds doit comporter les valeurs attendues dans les champs source et cible de vos liens.

Personnaliser d'avantage votre visualisation

Toujours dans l'onglet RENDU, vous avez remarqué la présence d'options globales au graphe ou propres aux nœuds.

Du côté des nœuds, vous pouvez:

  • influer sur leur taille et leur nom en indiquant les champs prévus à cet effet (ex: nodesize & name).
  • attribuer des couleurs en fonction des valeurs d'un champ. Plusieurs sélecteurs de couleurs apparaissent pour chaque valeur du champ renseigné précédemment (ex: group).

rendu nœuds visualisation

Du côté des options, vous pouvez:

  • influer sur la force de répulsion exercée entre les nœuds
  • modifier la taille de police
  • générer le graphe en SVG ou Canvas

rendu options visualisation

N'oubliez pas d'enregistrer votre visualisation et vous avez terminé ! Notez que la visualisation a une petite flèche en haut à gauche qui permet d'afficher ou de masquer la légende liée aux couleurs des nœuds.

Article qui pourrait également vous intéresser: