Visualiser des données avec D3

Nous allons, dans cette activité, aborder une partie fondamentale de D3 : la gestion des données.

Pour commencer, nous allons utiliser une série de données "basique" : un tableau de nombre (var tab=[10,8,25,15,30])

À faire vous même 6.1

script.js


var tab=[10,8,25,15,30];
var body=d3.select("body");
body.selectAll("p")
    .data(tab)
    .enter()
    .append("p")
    .text(function(d,i){
        return ("La valeur n°"+i+" du tableau est : "+d)
    });

Testez ce code

L'exemple du "À faire vous même 6.1" est fondamental, toute la "philosophie" de D3 se trouve dans cet exemple.

Etudions cet exemple :

nous avons remplacé select par selectAll. Cela signifie que D3 va générer plusieurs balises (dans notre cas plusieurs balises ). Le fait d'utiliser une méthode selectAll("p") (sous-entendu "sélectionnez toutes les balises ") alors qu'au moment de cette instruction, il n'existe pas encore de balise , peut sembler un peu étrange au premier abord. Pourtant cela fait partie du fonctionnement normal de D3. Ne vous laissez pas déstabiliser pour cette "curiosité" propre à D3. Il faut comprendre le selectAll comme un "sélectionner toutes les balises qui seront potentiellement générées dans la suite du code".
data(tab) permet d'utiliser les données présentes dans le tableau tab
enter() permet de générer autant de balises qu'il y a de données dans le tableau tab
La méthode text prend en paramètre une fonction anonyme. Cette fonction anonyme prend 2 paramètres i et d : i représente l'indice de la donnée dans le tableau tab et d représente la donnée elle-même (Il est possible d'utiliser d'autres lettres que d et i. Le fait d'utiliser d et i est un choix arbitraire). Comme déjà dit plus haut, D3 va créer une nouvelle balise pour chaque valeur du tableau. Pour la première valeur du tableau (10), D3 crée un premier paragraphe, pour ce premier paragraphe i est égal à zéro (puisque c'est la première donnée du tableau) et d est égal à 10, la fonction anonyme renvoie donc la chaîne de caractères suivante : "La valeur n°0 du tableau est : 10". D3 crée ensuite un second paragraphe pour la seconde donnée du tableau. La fonction anonyme retournera la chaîne de caractères : "La valeur n°1 du tableau est : 8" et ainsi de suite tant qu'il restera des valeurs à traiter dans le tableau.

À faire vous même 6.2

Reprendre l'exemple précédent en ajoutant une ou deux données au tableau tab. Testez ce nouvel exemple.

Comme vous pouvez le constater, D3 s'adapte bien au nombre de données présentes dans le tableau.

A la place des balises , il est possible de générer des balises de type svg.

À faire vous même 6.3

script.js


var tab=[10,8,25,15,4,30];
var body=d3.select("body");
var svg=body.append("svg");
svg.attr({"width":"800px","height":"600px"})
svg.style("border","1px solid black");
svg.selectAll("rect")
    .data(tab)
    .enter()
    .append("rect")
    .attr({"height":"30px","x":"200px","fill":"blue","stroke":"black"})
    .attr("width",function(d,i){
        return d*10
    })
    .attr("y",function(d,i){
        return (100+i*34)
    });

Testez ce code.

Cet exemple commence vraiment à être complexe, mais normalement, toutes les notions dont vous avez besoin pour comprendre cet exemple, ont déjà été vues. N'hésitez pas à poser des questions si la moindre ligne vous pose problème.

Nous venons de créer notre premier diagramme en barre (même s'il manque encore pas mal de choses).

À faire vous même 6.4

En repartant de l'exemple précédent, arrangez-vous pour que les barres (les rectangles) qui représentent une valeur supérieure ou égale à 15 soient en bleu et que les autres barres soient en rouge.

À faire vous même 6.5

Toujours en repartant de l'exemple précédent, modifiez le code du fichier "script.js" afin que le diagramme soit maintenant à la verticale.

À faire vous même 6.6

Ajoutez 3 valeurs de votre choix au tableau tab et vérifiez que de nouvelles barres apparaissent sans avoir besoin de modifier le code.