Générer un nuage de mot (ou tag cloud)

Les nuages de mots sont à la mode en ce moment.
Le principe est simple, plus un mot (ou tag) est important plus il est écrit en gros.
Nous allons voir comment générer cette mise en page en php.

Les données

Structure

Avant de passer à la réalisation visuelle du nuage, il faut tout d'abord générer une liste de mots en incluant leur popularité.
Pour cela, nous utiliseront un tableau défini comme ceci :

php

//$cloud["mot"] = popularité;
$cloud["wikistuce"] = 111;
$cloud["php"] = 51;
$cloud["flash"] = 8;
$cloud["javascript"] = 32;

Ainsi, en parcourant le tableau nous seront capable de connaître le mot et sa popularité.

Préparation de l'information

Tel quel, la tableau ne nous permet pas d'extraire toutes les infos utiles à la génération d'un tag cloud.
Il faut faire certaines opérations :

php

arsort($cloud);
$max = current($cloud);
$min = end($cloud);
ksort($cloud);

Dans l'ordre :

On tri le tableau par ordre décroissant de popularité (voir http://fr2.php.net/manual/fr/function.arsort.php)
Puis nous mémorisons en variable : la plus grande popularité et la plus faible.
Une fois cela fait, on tri les mots par ordre alphabétique (voir http://fr2.php.net/manual/fr/function.ksort.php)

Si votre tableau contient plus de ligne que vous ne voulez de mot (tag), vous pouvez le tronquer.
Pour cela, juste après le arsort($cloud) vous devez faire :

php

$cloud = array_chunk($cloud, 9999, true);
$cloud = $cloud[0];

Note : remplacez 9999 par le nombre de mot que vous désirez dans votre nuage.

Génération du nuage de mot

Maintenant que nous avons la liste correctement triée, que nous connaissons la plus grande popularité ainsi que la plus faible, nous pouvons générer le nuage de mot :

php

//on commence par calculer un delta qui nous permettra de "regroupé" les mot qui ont une popularité relativement proche.
$delta = ($max-$min)/8;
//on initialise la variable qui contiendra le nuage de mot
$cloudHtml = "";
//et on boucle sur chaque entrée de notre tableau
foreach ($cloud as $word => $popular){
    //Pour chaque popularité, on "calcule" quel est la classe que l'on doit appliquer. Chaque classe représente un groupe de popularité
    if ($popular < $min+round($delta)) 
        $class = 'cloud1';
    elseif ($popular < $min+round(2*$delta)) 
        $class = 'cloud2';
    elseif ($popular < $min+round(3*$delta)) 
        $class = 'cloud3';
    elseif ($popular < $min+round(5*$delta)) 
        $class = 'cloud4';
    else 
        $class = 'cloud5';
    //On ajoute les infos a notre variable de rendu.
    $cloudHtml .= '<a href="'.$link.'" class="'.$class.'">'.$word.'</a> ';
}

Dans cet exemple, la variable $link n'est pas définie. C'est a vous de la remplir en fonction des url que votre tag doit appeler.

L'espace placé juste après </a> est important. Il permet au navigateur de gérer correctement les retours à la ligne si votre liste de lien dépasse la taille de leur conteneur.

Exemple de css

Voici un css d'exemple a utiliser avec votre nuage de mot :

css

	a.cloud1 { font-size: 10px; color: #F2951B; }
	a.cloud2 { font-size: 12px; color: #CC7D16; }
	a.cloud3 { font-size: 14px; color: #A66612; }
	a.cloud4 { font-size: 16px; color: #F24D1B; }
	a.cloud5 { font-size: 18px; color: #A53512; }