Dans cette activité, nous allons nous inspirer d'un des exemples proposés par l'excellent site http://www.datavis.fr/

Nous allons, principalement, voir 2 nouveautés :

Pour travailler nous allons utiliser le fichier TSV proposé par le site http://www.datavis.fr/ : data.tsv

Ce fichier contient les cours du CAC 40 (bourse) du 5 janvier 2008 au 05 janvier 2014.

À faire vous même 13.1

Téléchargez le fichier data.tsv

Ouvrez-le à l'aide d'un tableur ou d'un éditeur de texte.

Comme vous pouvez le constater, ce fichier comporte 3 colonnes : la date, l'indice en cloture et le volume échangé. Nous utiliserons uniquement les 2 premières colonnes (en tète "date" et "close").

Dans la suite de cette activité, nous utiliserons ce fichier data.tsv, placez-le dans le même répertoire que le fichier script.js

Nous allons utiliser des dates, il est donc nécessaire d'indiquer à D3js le format de date utilisé :


var format_date=d3.time.format("%d/%m/%Y");

Nous avons bien un format jour(day)/mois(month)/année(Year) dans le fichier data.tsv

Nous allons "indiquer" à D3js que l'échelle de l'axe x est une échelle "temporelle" :


var echelleX = d3.time.scale().range([50, 870]);

Nous allons avoir besoin de définir un objet svg : line (voir les activités consacrées au SVG pour plus d'informations sur line)


var line = d3.svg.line()
    .x(function(d) { return echelleX(d.date);})
    .y(function(d) { return echelleY(d.close);});

À faire vous même 13.2

script.js 


var body=d3.select("body");
var format_date=d3.time.format("%d/%m/%Y");
var echelleX = d3.time.scale().range([50, 870]);
var echelleY= d3.scale.linear().range([570,50]);
var xAxe = d3.svg.axis()
                  .scale(echelleX)
                  .orient("bottom");
var yAxe = d3.svg.axis()
                  .scale(echelleY)
                  .orient("left");
var line = d3.svg.line()
    .x(function(d) { return echelleX(d.date); })
    .y(function(d) { return echelleY(d.close); });
var svg=body.append("svg");
svg.attr({"width":"900px","height":"600px"});
d3.tsv("data.tsv", function(data) {
	data.forEach(function(d) {
        d.date = format_date.parse(d.date);
        d.close = +d.close;
    });
   echelleX.domain(d3.extent(data, function(d) { return d.date; }));
   echelleY.domain(d3.extent(data, function(d) { return d.close; }));
   svg.append("g")
    	.style("font-family","sans-serif")
    	.style("font-size","9px")
    	.attr({"fill": "none","stroke": "black"})
    	.attr("transform","translate(0,570)")
    	.call(xAxe);
	svg.append("g")
    	.style("font-family","sans-serif")
    	.style("font-size","11px")
    	.attr({"fill": "none","stroke": "black"})
    	.attr("transform","translate(50,0)")
    	.call(yAxe);

   svg.append("path")
      .datum(data)
      .attr({"fill": "none", "stroke": "black","stroke-width": "1px"})
      .attr("d",line);
});

Analysez et testez ce code

Quelques remarques sur ce programme :

Dans le data.forEach nous transformons les dates en format "acceptable" par D3js avec d.date = format_date.parse(d.date); (à chaque fois que vous aurez un axe temporel, il faudra procéder ainsi).

La véritable nouveauté se trouve ici :


svg.append("path")
    .datum(data)
    .attr({"fill": "none", "stroke": "black","stroke-width": "1px"})
    .attr("d",line);

Nous définissons un path SVG. Ce path est alimenté en données par la méthode datum. Vous remarquerez qu'ici nous n'utilisons pas data mais datum. Je ne vais pas rentrer dans les détails mais vous devez savoir que data est à utiliser quand plusieurs éléments SVG seront créés à partir des données. Dans le cas où un unique élément SVG sera créé à partir des données, il faudra utiliser datum (ici nous créons un unique path, nous utilisons donc datum).

.attr("d",line) permet d'associer le path à l'élément line que nous avons défini plus haut.

Le reste du code est "classique".

Vous devriez obtenir ce graphique :