Jusqu'à maintenant les données étaient incluses dans le fichier script.js. Il est possible (et même recommandé) de placer ses données dans un fichier à part.
D3 accepte de nombreux formats de fichiers de données : CSV, TSV, JSON...(si nécessaire, pour en savoir plus sur ces formats, consultez ces activités).
D3 propose des méthodes permettant de récupérer ces données :
Dans tous les cas, ces méthodes acceptent deux paramètres : le chemin vers le fichier qui contient les données et une fonction anonyme.
La fonction anonyme est une fonction de callback, elle sera exécutée dès que les données seront "prêtes".
Téléchargez le fichier donnees.csv
Ouvrez-le à l'aide d'un tableur ou d'un éditeur de texte.
Dans la suite de cette activité, nous utiliserons le fichier donnees.csv, placez-le dans le même répertoire que le fichier script.js
script.js
var body=d3.select("body");
d3.csv("donnees.csv",function(data){
var para=body.selectAll("p").data(data);
para.enter()
.append("p")
.text(function(d,i){
return ("Le "+d.jour+" il y a eu "+d.nbre_visiteurs+" visiteurs")
});
});
Analysez et testez ce code
La fonction de callback (d3.csv("donnees.csv",function(data)) prend un paramètre : data, ce paramètre contient les "données" qui viennent d'être télécharger.
Dans la fonction .text(function(d,i) le paramètre d, correspond à une ligne du fichier CSV (la première ligne correspond aux en tètes des colonnes). Il y a autant de balises <p&gl que de lignes dans le fichier CSV (à l'exception de la ligne qui contient les en tètes). d.jour permet de récupérer les données contenues dans la colonne qui a pour en-tète jour (même chose pour d.nbre_visiteurs).
Détaillons un la structure de data. Dans notre cas, nous avons :
[{"jour":"lundi,"nbre_visiteurs":15},{"jour":mardi,"nbre_visiteurs":34},{"jour":"mercredi,"nbre_visiteurs":27},{"jour":"jeudi","nbre_visiteurs":45},{"jour":"vendredi","nbre_visiteurs":24},{"jour":"samedi","nbre_visiteurs":54},{"jour":"dimanche","nbre_visiteurs":12}]
Comme vous pouvez le constater, nous avons un tableau d'objet JavaScript. Chaque objet du tableau correspond à une ligne du fichier CSV.
Dans les fonctions de callback le paramètre d correspond à un des objets du tableau, l'utilisation de la notation pointée (par exemple d.nbre_visiteurs) est donc logique.
En vous aidant de ce qui vient d'être vu, complétez le programme suivant afin qu'il affiche le nombre total de visiteurs.
var body=d3.select("body");
d3.csv("donnees.csv", function(data) {
var somme=0;
for (i=0;i<data.length;i++){
.....................
}
body.append("p").text("Il y a eu "+somme+" visiteurs");
});
Comme vous pouvez le constater, nous avons un léger problème puisque nous obtenons une concaténation à la place d'une somme.
Les valeurs issues du tableau data sont considérées comme des chaînes de caractères et pas comme des nombres. Nous allons voir un peu plus loin comment résoudre ce problème.
Dans l'exemple ci-dessus, nous avons utilisé une boucle "classique" pour parcourir tous les éléments du tableau, D3js propose une autre solution avec data.forEach
script.js
var body=d3.select("body");
d3.csv("donnees.csv", function(data) {
var somme=0;
data.forEach(function(d){
somme=somme+d.nbre_visiteurs;
});
body.append("p").text("Il y a eu "+somme+" visiteurs");
});
Analysez et testez ce code
Comme vous pouvez le constater, forEach est une méthode qui prend en paramètre une fonction anonyme. Cette fonction anonyme prend en paramètre d qui correspond à un élément du tableau data. forEach permet de boucler sur tous les éléments du tableau.
data.forEach(function(d){
somme=somme+d.nbre_visiteurs;
});
est équivalent à
for (i=0;i<data.length;i++){
somme=somme+data[i].nbre_visiteurs;
}
Il nous reste à résoudre le problème de la concaténation (d.nbre_visiteurs est une chaîne de caractères est pas un nombre).
Ici aussi, D3js nous facilite la vie en proposant une "instruction" permettant de transformer "automatiquement" la chaîne de caractères en nombre (quand c'est possible évidemment) :
d.nbre_visiteurs= +d.nbre_visiteurs
script.js
var body=d3.select("body");
d3.csv("donnees.csv", function(data) {
var somme=0;
data.forEach(function(d){
d.nbre_visiteurs= +d.nbre_visiteurs;
somme=somme+d.nbre_visiteurs;
});
body.append("p").text("Il y a eu "+somme+" visiteurs");
});
Analysez et testez ce code
Comme vous pouvez le constater, tout fonctionne normalement.
En utilisant le fichier donnees.csv, créez un programme permettant d'obtenir ceci :
Pour vous aider :
Vous pouvez vous appuyer sur ce qui a été fait dans l'activité 8 ("À faire vous-même 8.5")
Il est possible d'éviter d'avoir à écrire tous les jours de la semaine:
var echelleX=d3.scale.ordinal()
.domain(["lundi","mardi","mercredi","jeudi","vendredi","samedi","dimanche"])
.rangeBands([30, 370]);
en écrivant :
var echelleX=d3.scale.ordinal()
.rangeBands([30, 370]);
.....
.....
.....
.....
echelleX.domain(data.map(function(d,i) { return d.jour; }));
data.map(function(d,i) { return d.jour; }) renvoie un tableau ["lundi","mardi","mercredi","jeudi","vendredi","samedi","dimanche"]
De la même façon, comme vous ne connaissez pas forcément la valeur maximum, il est possible de remplacer :
var echelleY=d3.scale.linear()
.domain([0,54])
.range([370,30]);
par :
var echelleY=d3.scale.linear()
.range([370,30]);
.....
.....
.....
.....
echelleY.domain([0, d3.max(data, function(d,i) { return d.nbre_visiteurs; })]);
d3.max(data, function(d,i) { return d.nbre_visiteurs; }) est équivalent à .domain([0,30]). La méthode d3.max renvoie la valeur maxi.
Comme déjà dit plus haut, il est aussi possible de travailler avec des données aux formats TSV ou JSON, le principe est exactement le même.