D3.js

Aprés avoir un peu joué avec Highcharts, j’ai eu envie de jeter un oeil à D3.js.

La différence fondamentale entre ces deux bibliothèques peut se résumer ainsi:

• Highcharts est un outil formidable pour afficher des graphes hautement paramètrables à partir de sources de donnée.
• D3.js est un outil formidable pour effectuer des transformation sur le DOM à partir de sources de donnée.

Ce qui veut dire qu’avec D3.js, on peut virtuellement faire n’importe quoi avec le DOM, en fonction de ce que contient notre dataset. Evidemment, cela peut signifier un peu de codage de roue dans certains cas, mais la richesse des possibilités est attirante.

Imaginons utiliser la courbe de poids trimestrielle d’un adulte de 1m85:

var data = [98, 95, 90, 88, 85, 83];

On créé un modèle de barre:

<style>
  .chart div {
    font: 10px; background-color: lightsteelblue;
    text-align: right; margin: 1px; color: white;
  }
</style>
<div class="chart"></div>

Et d’un coup de D3, on duplique la barre en modifiant les paramètres du div pour correspondre (en taille et en contenu) à nos data:

var x = d3.scale.linear().domain([0, d3.max(data)]).range([0, 220]);
d3.select(".chart")
  .selectall("div")
  .data(data)
  .enter().append("div")
  .style("width", function(d, i) { return x(d) + "px"; })
  .text(function(d, i) { return d; });

Avec pour résultat:

(Inspiré du tutorial sur les bar chart de Mike Bostock)

La partie vraiment sympathique étant celle qui permet de déterminer à la volée, en fonction des data, des élèments de style des objets qu’on manipule.

Par exemple, si je modifie mon javascript, je peux introduire la notion d’IMC en modifiant dynamiquement les couleurs des barres: Et d’un coup de D3, on duplique la barre en modifiant les paramètres du div pour correspondre (en taille et en contenu) à nos data:

// Conversion d'un nombre en hexa
function toHex(v) { return String('00'+Math.floor(v).toString(16)).slice(-2); }
// Calcul d'une couleur à partir de l'IMC pour un adulter de 1m85
function calculateColorFromIMC(weight) {
  var imc = weight / (1.85 * 1.85);
  var normalimc = ((18.5 + 25)/2)
  var imclimit = 30;
  var r = 255 * (0.5 +  0.5 * (imc - normalimc) / (imclimit - normalimc));
  var g = 255 * (1 - 0.5 * (imc - normalimc) / (imclimit - normalimc));
  var result = '#' + toHex(r) + toHex(g) + '7F'
  return result;
}
var x = d3.scale.linear().domain([0, d3.max(data)]).range([0, 220]);
d3.select(".chart2")
  .selectAll("div")
  .data(data)
  .enter().append("div")
  .style("width", function(d, i) { return x(d) + "px"; })
  .style("background-color", function(d) { return calculateColorFromIMC(d); })
  .text(function(d) { return d; });

Ainsi, la couleur des barres de notre graphe devient fonction de l’IMC:

Et tout ça n’est qu’un aperçu très superficiel de tout ce qui est possible avec D3.js.

De plus, le projet est sous license BSD. Ce qui ne laisse plus un seul pretexte pour ne pas l’essayer.