Visualiser des données avec D3

D3 est une bibliothèque JavaScript développée par Mike Bostock.

Voici ce que dit l'article de Wikipédia consacré à D3 :

D3.js (ou D3 pour Data-Driven Documents) est une bibliothèque graphique JavaScript qui permet l'affichage de données numériques sous une forme graphique et dynamique.

D3 n'est pas un "logiciel", vous allez donc produire du code (en JavaScript). Votre code va nécessairement être appelé par une page HTML.

À faire vous même 1.1

Dans un dossier "D3", que vous aurez créé au préalable dans votre dossier personnel, créez un dossier "exemple_0".

Dans le dossier "exemple_0", créez les fichiers suivants :

un fichier "index.html"
un fichier "script.js"

À faire vous même 1.2

Vous allez maintenant télécharger la bibliothèque D3 en vous rendant sur le site : https://d3js.org/

Une fois sur le site, cliquez sur "d3.zip" afin de télécharger l'archive (vous pouvez aussi directement télécharger l'archive ici).

"Dézipper" le fichier d3.zip que vous venez de télécharger dans votre dossier "exemple_0".

Vous devriez alors trouver dans votre dossier "exemple_0" :

un fichier "index.html" que vous avec précedemment créé
un fichier "script.js" que vous avec précedemment créé
un fichier "d3.js" que vous pouvez effacer
un fichier "d3.min.js" que nous allons utiliser
un fichier "LICENCE" que vous pourrez effacer après l'avoir lu

À faire vous même 1.3

Intéressons-nous au contenu du fichier "index.html" :

Cette page HTML devra lancer les scripts JavaScript ("d3.min.js" et "script.js").

Voici le code HTML minimum nécessaire à la bonne utilisation de D3 :

index.html


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Visualiser des données avec D3</title>
    <script src="d3.min.js"></script>
</head>
<body>
</body>
 <script src="script.js"></script>
</html>

Quelques remarques sur ce code :

Le "DOCTYPE" vous montre que nous sommes bien en HTML5.
Nous appelons bien les 2 fichiers JavaScript <script src="d3.min.js"></script> et <script src="script.js"></script>.
La balise <body> est vide.

La structure que nous venons de mettre en place (dossier "exemple_0") pourra être "copier-coller" à chaque fois que vous commencerez à coder un nouvel exemple, en n'oubliant pas de renommer le dossier pour chaque nouvel exemple ("exemple_1", "exemple_2"...). Dans la suite, seul le fichier "script.js" sera modifié.