D3 Cloud est une bibliothèque de mise en page pour nuages de mots en JavaScript, conçue pour générer des visualisations dynamiques et esthétiques des données textuelles. Inspirée par le projet Wordle, elle exploite le rendu sur canvas HTML5 et des techniques de masquage pour obtenir des performances quasi-interactives. Ce guide détaille son intégration et son utilisation fondamentale.

Fonctionnalités principales

• Personnalisation étendue : paramétrage des polices, tailles, rotations et dimensions de la mise en page.
• Algorithme de placement efficace : utilisation d'une spirale pour optimiser la disposition des termes.
• Compatibilité : fonctionne dans les navigateurs web et dans un environnement Node.js via le module canvas.
• API intuitive : une interface de programmation fluide pour configurer et démarrer la génération.

Intégration dans un projet

L'installation s'effectue via un gestionnaire de paquets ou en clonant le dépôt. Voici la procédure avec npm :

npm install d3-cloud

Vous pouvez également récupérer la source :

git clone https://github.com/jasondavies/d3-cloud.git
cd d3-cloud
npm install

Exemples d'implémentation

Utilisation côté client

L'exemple suivant crée un nuage de mots basique dans une page web. La configuration définit la taille du canevas, prépare les données et déclenche le dessin une fois l'algorithme de placement terminé.

const nuage = require("d3-cloud");

const termes = ["JavaScript", "SVG", "Canvas", "D3", "Nuage", "Mots", "Web", "Visualisation"]
    .map(mot => ({texte: mot, taille: 8 + Math.random() * 30}));

const configuration = {
    dimensions: [600, 400],
    marge: 4,
    police: "Arial",
    rotation: () => (Math.random() > 0.5 ? 0 : 90),
    tailleMax: d => d.taille
};

const instance = nuage()
    .size(configuration.dimensions)
    .words(termes)
    .padding(configuration.marge)
    .rotate(configuration.rotation)
    .font(configuration.police)
    .fontSize(configuration.tailleMax)
    .on("end", dessiner);

instance.start();

function dessiner(termesPlaces) {
    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.setAttribute("width", configuration.dimensions[0]);
    svg.setAttribute("height", configuration.dimensions[1]);

    const groupe = document.createElementNS("http://www.w3.org/2000/svg", "g");
    groupe.setAttribute("transform", `translate(${configuration.dimensions[0]/2}, ${configuration.dimensions[1]/2})`);
    svg.appendChild(groupe);

    termesPlaces.forEach(terme => {
        const textElem = document.createElementNS("http://www.w3.org/2000/svg", "text");
        textElem.style.fontFamily = configuration.police;
        textElem.style.fontSize = `${terme.size}px`;
        textElem.setAttribute("text-anchor", "middle");
        textElem.setAttribute("transform", `translate(${terme.x}, ${terme.y}) rotate(${terme.rotate})`);
        textElem.textContent = terme.text;
        groupe.appendChild(textElem);
    });

    document.body.appendChild(svg);
}

Utilisation dans un script Node.js

Pour un rendu hors navigateur, on combine D3 Cloud avec le module canvas pour générer une image ou analyesr le résultat.

const { createCanvas } = require("canvas");
const cloud = require("d3-cloud");

const ensemble = ["Analyse", "Données", "Python", "Machine", "Learning", "IA"]
    .map(element => ({texte: element, poids: 10 + Math.random() * 50}));

cloud()
    .size([800, 600])
    .canvas(() => createCanvas(1, 1))
    .words(ensemble)
    .padding(3)
    .rotate(() => Math.floor(Math.random() * 3) * 45)
    .font("Helvetica")
    .fontSize(d => d.poids)
    .on("end", resultat => {
        console.log("Disposition calculée :", JSON.stringify(resultat, null, 2));
    })
    .start();

Configuration et méthodes clés

Paramétrage de base

• size([largeur, hauteur]) : Définit les dimensions en pixels de la zone d'affichage. Par défaut : [1, 1].
• words(tableau) : Fournit le tableau d'objets contenant au minimum une propriété text. Valeur par défaut : [].
• padding(valeur) : Contrôle l'espace (en pixels) entre les termes. Défaut : 1.

Personnalisation typographique

• font(nom) : Spécifie la famille de police CSS. Défaut : "serif".
• fontSize(fonction) : Fonction qui retourne la taille pour chaque terme. Défaut : d => Math.sqrt(d.value).
• rotate(fonction) : Fonction qui retourne l'angle de rotation (en degrés) pour chaque terme. Défaut : angle aléatoire parmi [0, 90].

Contrôle du processus

• on(type, callback) : Écoute les événements. "end" est émis avec le tableau final des positions. "word" peut être utilisé pour le suivi.
• start() : Lance l'algorithme de placement asynchrone.
• stop() : Interrompt le calcul en cours.

Domaines d'application

Cette bibliothèque trouve son utilité dans divers contextes :

• Analyse textuelle : Représentation visuelle des fréquences de mots-clés dans un corpus.
• Réseau sociaux : Visualisation des hashtags ou sujets tendances.
• Synthèse de contenu : Offrir un aperçu thématique immédiat d'un document.
• Sondages et retours : Identifier visuellement les termes récurrents dans les avis utilisateurs.

Les termes obtenus de l'algorithme de D3 Cloud contiennent leurs coordonnées x, y, size, rotate et text, ce qui permet de les intégrer dans n'importe quel système de rendu (SVG, Canvas 2D, etc.).