D3.js - Installation

Dans ce chapitre, nous allons apprendre comment configurer l'environnement de développement D3.js. Avant de commencer, nous avons besoin des composants suivants -

Bibliothèque D3.js
Editor
Navigateur Web
serveur Web

Passons en revue les étapes une par une en détail.

Bibliothèque D3.js

Nous devons inclure la bibliothèque D3.js dans votre page Web HTML afin d'utiliser D3.js pour créer la visualisation des données. Nous pouvons le faire des deux manières suivantes -

Incluez la bibliothèque D3.js du dossier de votre projet.
Inclut la bibliothèque D3.js du CDN (Content Delivery Network).

Télécharger la bibliothèque D3.js

D3.js est une bibliothèque open-source et le code source de la bibliothèque est disponible gratuitement sur le Web à l'adresse https://d3js.org/site Internet. Visitez le site Web D3.js et téléchargez la dernière version de D3.js (d3.zip). À partir de maintenant, la dernière version est la 4.6.0.

Une fois le téléchargement terminé, décompressez le fichier et recherchez d3.min.js. Ceci est la version minifiée du code source D3.js. Copiez le fichier d3.min.js et collez-le dans le dossier racine de votre projet ou dans tout autre dossier, où vous souhaitez conserver tous les fichiers de la bibliothèque. Incluez le fichier d3.min.js dans votre page HTML comme indiqué ci-dessous.

Example - Prenons l'exemple suivant.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "/path/to/d3.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

D3.js est un code JavaScript, nous devons donc écrire tout notre code D3 dans la balise «script». Nous pouvons avoir besoin de manipuler les éléments DOM existants, il est donc conseillé d'écrire le code D3 juste avant la fin de la balise «body».

Inclure la bibliothèque D3 à partir du CDN

Nous pouvons utiliser la bibliothèque D3.js en la reliant directement à notre page HTML à partir du Content Delivery Network (CDN). CDN est un réseau de serveurs où les fichiers sont hébergés et livrés à un utilisateur en fonction de leur emplacement géographique. Si nous utilisons le CDN, nous n'avons pas besoin de télécharger le code source.

Incluez la bibliothèque D3.js à l'aide de l'URL CDN https://d3js.org/d3.v4.min.js dans notre page comme indiqué ci-dessous.

Example - Prenons l'exemple suivant.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

Éditeur D3.js

Nous aurons besoin d'un éditeur pour commencer à écrire votre code. Il existe d'excellents IDE (environnement de développement intégré) prenant en charge JavaScript comme -

Code Visual Studio
WebStorm
Eclipse
Texte sublime

Ces IDE fournissent une complétion de code intelligente et prennent en charge certains des frameworks JavaScript modernes. Si vous n'avez pas d'IDE sophistiqué, vous pouvez toujours utiliser un éditeur de base tel que Notepad, VI, etc.

Navigateur Web

D3.js fonctionne sur tous les navigateurs sauf IE8 et les versions antérieures.

Serveur Web

La plupart des navigateurs diffusent des fichiers HTML locaux directement à partir du système de fichiers local. Cependant, il existe certaines restrictions concernant le chargement de fichiers de données externes. Dans les derniers chapitres de ce didacticiel, nous chargerons des données à partir de fichiers externes commeCSV et JSON. Par conséquent, ce sera plus facile pour nous, si nous configurons le serveur Web dès le début.

Vous pouvez utiliser n'importe quel serveur Web avec lequel vous êtes à l'aise - par exemple IIS, Apache, etc.

Affichage de votre page

Dans la plupart des cas, nous pouvons simplement ouvrir votre fichier HTML dans un navigateur Web pour l'afficher. Cependant, lors du chargement de sources de données externes, il est plus fiable d'exécuter un serveur Web local et d'afficher votre page à partir du serveur(http://localhost:8080).