Introduction à la visualisation de graphes avec VisNetwork

Dans ce tutoriel, je vais vous présenter la bibliothèque JavaScript VisNetwork. Cette bibliothèque opensource permet de générer des graphes personnalisables et interactifs à partir de code JavaScript.

Prérequis

Un connaissance basique du JavaScript sera nécessaire pour suivre ce tuto, mais il est conçu pour être accessible aux débutants.

Objectifs

Le but est qu’à la fin de la lecture de ce tutoriel, vous soyez en mesure de maîtriser la création de graphe et que vous ayez découvert les principales fonctionnalités de VisNetwork.

Ce tutoriel est très axé sur la pratique, un petit exercice est proposé à la fin de chaque chapitre afin que vous preniez en main la bibliothèque.

Introduction

1. Un graphe, kesako ?
2. Utilisation des graphes
3. Faire des graphes en javascript
4. VisNetwork

Création de notre premier graphe

1. Créer un page vide
2. Créer une instance de VisNetwork
3. Création de noeuds
4. Création de liens
5. Les graphes orientés
6. Exercice

La personnalisation visuelle partie 1

1. Première personnalisation visuelle
2. Premières personnalisations visuel
3. Personnalisation des liens
4. Personnalisation avancée des noeuds
5. Exercice

La personnalisation visuelle partie 2

1. Les groupes
2. Le design des groupes
3. Les images
4. Excercice
5. Défis
6. Récapitulatif des propriétés

Les forces

1. Qu'est qu'une force
2. Les différents algoritmes de force
3. Paramétrer une force
4. Exemple avec barnesHut
5. Gestion de la masse des noeuds

La gestion des évènements

1. La capture des évènements
2. Clic et double-clic
3. Zoom/Dézoom
4. Exercice

Placements hiérarchiques et clusters

1. Les placements hiérarchiques
2. Les clusters
3. Exercice

Si vous souhaitez poursuivre votre apprentissage, rendez vous sur la documentation et sur la liste des exemples de VisNetwork.