Un diagramme circulaire, ou camembert, en HTML et Javascript

Tutoriel complet pour apprendre à réaliser un diagramme circulaire dynamique et avec une légende. Cette infographie également connue sous le nom de camembert sera entièrement réalisée en HTML grâce à l’élément SVG. Nous ajouterons du Javascript pour rendre ce diagramme circulaire dynamique au survol de la souris.

Qu’est ce qu’un diagramme circulaire ?

Une infographie en forme de camembert est généralement appelée un diagramme circulaire. C’est un type de graphique circulaire divisé en sections pour représenter les proportions relatives d’un ensemble de données. Chaque section du camembert représente une catégorie de données, et la taille de chaque section est proportionnelle à la quantité qu’elle représente dans l’ensemble des données. Ce type de graphique est couramment utilisé pour visualiser des données réparties en pourcentages ou en proportions. Les 360 degrés de ce cercle représentent donc 100%.

Qu’est ce qu’un SVG ?

SVG signifie Scalable Vector Graphics, ce qui se traduit par « Graphiques vectoriels évolutifs » en français. C’est un format de fichier graphique qui est utilisé pour décrire des images vectorielles bidimensionnelles.

En HTML, SVG est utilisé pour intégrer des graphiques vectoriels directement dans une page web. Contrairement aux images bitmap (comme les formats JPG, PNG, etc.), les images SVG sont basées sur des vecteurs, ce qui signifie qu’elles sont définies mathématiquement plutôt que par des pixels individuels. Cela leur permet de conserver leur netteté et leur qualité quelle que soit la taille à laquelle elles sont affichées, et elles peuvent être redimensionnées sans perte de qualité.

Les éléments SVG peuvent être ajoutés directement dans le code HTML à l’aide de balises spécifiques telles que <svg>, <rect>, <circle>, <path>,… Avec SVG, vous pouvez créer des graphiques, des icônes, des schémas et même des animations directement dans vos pages web.

Balise	Description
`<svg>`	Élément racine qui définit un conteneur SVG. Tous les autres éléments SVG doivent être inclus à l’intérieur de cette balise.
`<rect>`	Définit un rectangle. Les attributs `x`, `y`, `width` et `height` spécifient la position et les dimensions du rectangle.
`<circle>`	Définit un cercle. Les attributs `cx`, `cy` spécifient le centre du cercle, et `r` spécifie son rayon.
`<path>`	Définit un chemin. Les attributs `d` spécifient les commandes de tracé pour dessiner des formes complexes telles que des lignes droites, des courbes de Bézier, etc.

Un diagramme circulaire en HTML et Javascript

Infographie en Camembert

50% Blé
25% Maïs
18,5% Avoine
6,5% Orge

La structure en HTML du diagramme circulaire

<section id="camembert">
    <h4>Infographie en Camembert</h4>
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <circle cx="100" cy="100" r="80" fill="none" stroke="#ddd" stroke-width="5" />
        <!-- Segment 1 : 6,5% Orge -->
        <path data-legende="liRouge" class="getClass" d="M100,100 L100,20 A80,80 0 0,1 180,100 Z" fill="#FF5733" />
        <!-- Segment 2  : 15,5% Avoine -->
        <path data-legende="liJaune" class="getClass" d="M100,100 L130,25.7 A80,80 0 0,1 100,180 Z" fill="#FFC300" />
        <!-- Segment 3 : 25% Maïs -->
        <path data-legende="liBleu" class="getClass" d="M100,100 L180,100 A80,80 0 0,1 20,100 Z" fill="#3498DB" />
        <!-- Segment 4 50% Blé -->
        <path data-legende="liVert" class="getClass" d="M100,100 L100,180 A80,80 0 0,1 100,20 Z" fill="#27AE60" />
    </svg>
    <!-- La légende -->
    <ul>
        <li id="liVert"><span id="vert"></span> 50% Blé</li>
        <li id="liBleu"><span id="bleu"></span> 25% Maïs</li>
        <li id="liJaune"><span id="jaune"></span> 18,5% Avoine</li>
        <li id="liRouge"><span id="rouge"></span> 6,5% Orge</li>
    </ul>
</section>

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> : C’est la balise d’ouverture d’un élément SVG qui spécifie la largeur et la hauteur de la zone de dessin à 200 pixels par 200 pixels. La déclaration xmlns indique que ce document SVG suit les normes XML.
<circle cx="100" cy="100" r="80" fill="none" stroke="#ddd" stroke-width="5" /> : C’est un cercle centré aux coordonnées (100, 100) avec un rayon de 80 pixels. Il est dessiné sans remplissage fill="none" et a une bordure stroke de couleur gris clair #ddd avec une épaisseur de 5 pixels stroke-width="5".
<path data-legende="liRouge" class="getClass" d="M100,100 L100,20 A80,80 0 0,1 180,100 Z" fill="#FF5733" /> : Ceci représente un chemin SVG qui dessine un segment coloré à l’intérieur du cercle :
- data-legende="liRouge" : C’est un attribut personnalisé qui pourrait être utilisé pour fournir une légende ou des métadonnées supplémentaires pour ce chemin.
- class="getClass" : C’est une classe CSS assignée à ce chemin, qui pourrait être utilisée pour le styler via CSS ou manipuler via JavaScript.
- d="M100,100 L100,20 A80,80 0 0,1 180,100 Z" : C’est la description du chemin SVG. Il commence par déplacer M au point (100, 100), puis trace une ligne L jusqu’au point (100, 20), puis dessine un arc elliptique A avec un rayon x de 80, un rayon y de 80, un angle de rotation de 0 degré, un grand arc de 0 et un sweep de 1 jusqu’au point (180, 100), et se termine par une ligne Z pour fermer le chemin.
- fill="#FF5733" : C’est la couleur de remplissage du chemin, dans ce cas, rouge #FF5733.
Les trois autres <path> suivent un schéma similaire au chemin précédent, chacun avec des attributs différents data-legende, fill, d pour dessiner différents segments colorés dans le cercle.

La mise en page CSS

/* Le container de type Grid */
#camembert  {
    border: 1px solid #dedede;
    width: auto;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
}

/* Le titre */
#camembert h4 {
    font-size: 16px;
    text-align: center;
    background: #f1f1f1;
    padding: 20px;
    margin: 0;
    border-bottom: 1px solid #dedede;
} 

#camembert svg {
    display: block;
    margin: 0 auto;
    width: auto;
    padding: 30px;
}

#camembert path:hover {
    fill: #555 !important;
    cursor: pointer;
}

/* La légende */
#camembert ul {
    border-top: 1px solid #dedede;
    width: auto;
    padding: 30px 20px;
}

#camembert ul li {
    list-style-type: none;
}

/* Rectangle de couleur pour la légende */
#camembert span {
    display: inline-block;
    border: 1px solid #dedede;
    height: 20px;
    width: 30px;
    margin-right: 10px;
    position: relative;
    top: 5px;
}

/* Liste des couleurs de la légende */
#camembert #vert {background: #27AE60;}
#camembert #bleu {background: #3498DB;}
#camembert #jaune {background: #FFC300;}
#camembert #rouge {background: #FF5733;}

/* Media Query pour grand écran > 650px */
@media screen and (min-width: 650px) {

    #camembert {
        grid-template-rows: auto auto;
        grid-template-columns: 1fr 1fr;
        grid-area: auto;
    }
    #camembert h4 {
        grid-row: 1/2;
        grid-column: 1/3;
        font-size: 22px;
    }
    #camembert svg {
        grid-row: 2/3;
        grid-column: 1/2;
        padding: 10px;
    }
    #camembert ul {
        grid-row: 2/3;
        grid-column: 2/3;
        margin-top: 50px;
        border-top: none;
        padding: 0;
    }

}

La conception mobile first est une approche de conception web dans laquelle le processus de développement commence par la création de l’expérience utilisateur pour les appareils mobiles, puis évolue vers des écrans plus larges, tels que les tablettes et les ordinateurs de bureau. Cela signifie que le site web est d’abord conçu et optimisé pour les petits écrans et les performances mobiles, puis étendu pour s’adapter aux écrans plus grands.

La déclaration du Media Query de la ligne 63 sert à appliquer des styles spécifiques uniquement lorsque la largeur de l’écran est égale ou supérieure à 650 pixels.

On déclare le container <section> comme un grille ou CSS Grid. La conception par CSS Grid est une méthode de disposition flexible et puissante pour organiser les éléments sur une page web en utilisant des lignes et des colonnes.

La ligne 29 utilise la pseudo-classe :hover, lorsque vous survolez un élément <path> dans le SVG, il changera de couleur pour devenir gris foncé.

Le javascript pour un effet dynamique du diagramme circulaire

// Sélection des éléments ayant la classe "getClass"
const elements = document.querySelectorAll(".getClass");

// Fonction pour afficher la valeur correspondante en gras
function afficherLegende(event) {
    // Récupération de la valeur de l'attribut data-legende
    const legende = event.target.dataset.legende;
    const monElement = document.getElementById(legende);
    // Ajout de style à l'élément
    monElement.style.fontWeight = "bold";
}

// Fonction pour retirer le gras de la valeur correspondante
function quitterSurvol(event) {
    const legende = event.target.dataset.legende;
    const monElement = document.getElementById(legende);
    // Retrait de style à l'élément
    monElement.style.fontWeight = "";
}

// Ajout d'un écouteur d'événement pour chaque élément pour le survol
elements.forEach(element => {
    element.addEventListener("mouseover", afficherLegende);
});

// Ajout d'un écouteur d'événement pour chaque élément pour le quitté du survol
elements.forEach(element => {
    element.addEventListener("mouseout", quitterSurvol);
});

Ce code javascript sert à mettre en gras la ligne correspondante de la légende dont la partie du diagramme est survolée par la souris ou touché par le doigt lors d’une utilisation sur smartphone. Pour ce faire, on récupère id de la légende à mettre en gras via l’attribut data-legende de la structure HTML. À l’inverse, on retire le style font-weight: bold; lorsque la souris quitte la portion du diagramme correspondante.

Alban

Fondateur de l’agence Créa-troyes.
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr