Comment mettre des données à l’échelle avec un calcul simple

Je suis actuellement en train de construire un plugin pour WordPress. Ce plugin a pour but d’afficher un tag cloud basé sur une librarie JS (d3.js) qui permet un rendu différent et amélioré du tag cloud de base de WordPress. Des fois certaines contraintes nous obligent à travailler à l’echelle (plus grand ou plus petit) et donc de normaliser un set de données.

L’exemple par le tag cloud (nuage de mots-clés)

Pour un tag cloud le principe consiste à compter le nombre de fois qu’un mot apparaît dans le blog (Ce nombre peut-être de grandeur très variable, par exemple un mot peu apparaître 10 fois comme un autre pourrait apparaître 1000 fois). Ensuite il faut afficher la liste des mots les plus trouvés et les faire apparaître avec une taille de police en fonction de leur nombre d’apparition dans le blog.

Le problème : Pourquoi mettre à l’echelle

Une police est quelque chose qui ne peut pas être modulé dans de grands écarts. Une police de caractère à 1000px par exemple risque de poser un petit problème de design. Et de même un mot qui n’aurait pas une grande fréquence dans un blog ne pourra pas se voir affubler une police à 2px. Vous voyez le problème.

La solution : Comment mettre à l’echelle

La solution à ce problème est d’appliquer une normalisation à votre échelle de donnée. Le principe est de « mapper » chaque valeur à sa valeur à l’échelle. Voici le calcul/code à utiliser :

//Dataset pour le tag cloud
$data = array("font" => 327, "design" => 1234, "jquery" => 123, "php" => 231, "visualisation" => 756, "html5" => 465, "wordpress" => 899, "javascript" => 534);

// Fixer un minimun et un maximum pour la font (en pixel)
$fontMin = 12;
$fontMax = 32;

//Trouver le minimum et le maximum du dataset
$datasetMin = min($data);
$datasetMax = max($data);

// Calculer les écarts
$ecartDataset  = $datasetMax - $datasetMin;
$ecartFont     = $fontMax - $fontMin;
$seuil         = $ecartFont / $ecartDataset;

// Boucle sur chaque mot 
$dataNormalise = "";
foreach($data as $texte => $freq){
   $fontSize = $fontMin + ($freq - $datasetMin) * $seuil;
   $dataNormalise[$texte] = $fontSize;
}

var_dump($dataNormalise);

Résultat du array normalisé entre 12 et 32 :

array(8) {
  ["font"]=>
  float(15.6723672367)
  ["design"]=>
  float(32)
  ["jquery"]=>
  float(12)
  ["php"]=>
  float(13.9441944194)
  ["visualisation"]=>
  float(23.395139514)
  ["html5"]=>
  float(18.1566156616)
  ["wordpress"]=>
  float(25.9693969397)
  ["javascript"]=>
  float(19.398739874)
}

Conlusion

Il s’agit donc de mapper chaque valeur pour obtenir un nombre entre le minimum et le maximum voulu. Personnellement j’utilise cette technique / formule pour travailler avec des libraries graphiques comme protovis ou d3.js. C’est assurément à garder dans sa boite à outil ! A noté que le code est ici en PHP mais ceci peu très bien se faire en n’importe quel autre language.