Visualiser des données avec D3

Comme évoqué dans l'activité 1, le fichier "index.html" ne sera pas modifié, nous nous intéresserons donc uniquement au fichier "script.js".

D3 facilite grandement l'ajout de balise non présente à l'origine dans le code HTML

À faire vous même 2.1

script.js


var body=d3.select("body");
var p=body.append("p");
p.text("Un paragraphe généré par D3 !");

Testez ce code

Quelques remarques sur ce code :

var body=d3.select("body"); permet de créer un objet qui correspond à la balise <body> du code HTML (index.html)
La méthode append permet d'ajouter une balise (au sens HTML du terme). Ici, cette méthode est appliquée à l'objet body que nous venons de créer. La méthode append prend en paramètre le type de balise à créer (ici nous ajoutons une balise dans la balise <body>). Résultat des courses, tout se passe comme si nous avions maintenant <body></body> dans notre code HTML. La variable p va permettre de manipuler cette balise nouvellement créée.
p.text("Un paragraphe généré par D3 !"); permet de modifier le contenu de la balise que nous venons d'ajouter. Tout se passe comme si nous avions maintenant <body>Un paragraphe généré par D3 !</body>

Dans le "À faire vous même 2.1" nous avons ajouté une balise , il est possible d'ajouter la balise de votre choix (<h1>,...)

À faire vous même 2.2

En repartant de l'exemple précédent, modifiez le fichier "script.js" afin de pouvoir afficher un titre ("Ceci est un titre h1") en haut de votre page.

D3 propose d'utiliser un "raccourci" pour ajouter des balises en "chainant" les instructions sans avoir à utiliser des variables.

À faire vous même 2.3

script.js


d3.select("body").append("p").text("Un paragraphe généré par D3 !");

Testez ce code.

Il est possible de mixer les 2 façons d'écrire, par exemple :


var body=d3.select("body");
body.append("p").text("Un paragraphe généré par D3 !");

ou encore


 var p = d3.select("body").append("p")
 p.text("Un paragraphe généré par D3 !");

produiront exactement le même résultat.

Vous êtes libre de choisir la méthode d'écriture qui vous conviendra le mieux.

Petite remarque : afin de rendre votre code plus lisible, si vous choisissez de "chainer" les instructions, je vous conseille d'aller à la ligne pour chaque nouvelle instruction.

On écrira :


d3.select("body")
    .append("p")
    .text("Un paragraphe généré par D3 !");

à la place de :


d3.select("body").append("p").text("Un paragraphe généré par D3 !");

À part la lisibilité du code, cela ne change rien du tout.

Dans la suite des activités, je privilégierai l'écriture "chainée" sans m'interdire d'utiliser des noms de variables quand je trouverais cela judicieux.