Licence CC BY

Introduction à la visualisation de graphes avec VisNetwork

Création de graphes personnalisables et interactifs en javascript

Dernière mise à jour :
Auteur :
Ce contenu a bénéficié des apports de 1 contributeur
Catégorie :
Temps de lecture estimé : 3 heures

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.

Ces contenus pourraient vous intéresser

Aucun commentaire

Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte