FriconiX
Des milliers de pictogrammes gratuits dessinés avec amour !

D3.js tutorial - Partie 8 - Diagramme à barres

Si vous avez lu les parties précédentes, vous devriez avoir tous les outils nécessaires pour créer votre premier diagramme à barres qui devrait ressembler à ce magnifique graphique :

Étape 1 : le jeu de données

Commençons par créer un jeu de données pour notre diagramme :

// Set of data
var dataset = [31, 64, 42, 28, 16, 32, 64, 10];

Étape 2 : le conteneur SVG

Créons ensuite un conteneur SVG (200 x 100 pixels) avec un fond gris (voire partie 5 pour plus de détails):

// Create our SVG container with grey background
var svg = d3.select("body")
            .append("svg")
            .attr("width", 200)
            .attr("height", 100)
            .style('background-color', 'lightgrey');

Étape 3 : ajouter les barres

Nous allons maintenant lier nos données afin de pouvoir dessiner les barres :

// Bind data to chart, and create bars
svg.selectAll('.bar')
    .data(dataset)
    .enter()
    .append('rect')
    .attr('x', (d,i) => i*25 )
    .attr('y', 0)
    .attr('width', 20)
    .attr('height', (d) => d);

La première ligne est le data binding. Cela crée autant de barres qu'il y a de cellules dans le tableau du jeuy de données. Voire Partie 7. pour plus de détails.

.attr('x', (d,i) => i*25 )

Cette ligne définie la coordonnée en X de chaque rectangle. La fonction anonyme accepte deux arguments :

Comme nous souhaitons que les rectangles soient répartis sur la largeur du conteneur, chaque rectangle doit être espacé de 25 pixels (200 pixels / 8 données) de son prédécesseur. Nous multiplions donc i par 25.

La dernière ligne spécifie la hauteur du rectangle à la valeur de notre donnée :

.attr('height', (d) => d);

Miroir vertical

Il ne vous a pas échappé que notre diagramme était à l'envers. En décallant les coordonnées en Y de chaque rectangle, nous pouvons retourner le diagramme :

.attr('y', (d) => 100-d)

Notons en passant que :

Cela peut paraitre surprenant pour un mathématicien, mais est classique pour les développeurs habitués à travailler avec des moteurs graphiques.

Le container dans une division

Nous avons créé notre graphique directement dans le le corps du document. En pratique, les graphiques sont plus souvent insérés dans une division au milieu des autres éléments de la page (texte, images...). Créons une division <div> dans le corps de la page pour y insérer notre conteneur SVG :

<h1>My first bar chart with D3.js</h1>
<div id="bar-chart"></div>

Nous n'avons plus besoin d'insérer notre conteneur SVG dans la page, il faut maintenant d'insérer dans la division :

// Create our SVG container with grey background
var svg = d3.select("#bar-chart")
            .append("svg")
            .attr("width", 200)
            .attr("height", 100)
            .style('background-color', 'lightgrey');

Le résultat est le même que précédemment :

Groupe

C'est une bonne habitude de grouper les éléments dans un conteneur SVG. Jusqu'à présent, nous avons ajouter nos éléments en vrac dans le conteneur. Si l'on regarde notre code source, on s'apperçoit que notre SVG est structuré de la façon suivante :

<svg width="200" height="100" style="background-color: lightgrey;">
    <rect x="0" y="69" width="20" height="31"></rect>
    <rect x="25" y="36" width="20" height="64"></rect>
    <rect x="50" y="58" width="20" height="42"></rect>
    <rect x="75" y="72" width="20" height="28"></rect>
    ...
</svg>

Comme tous les rectangles forment un groupe, il est préférable de les regrouper dans un ensemble qui s'appelle un groupe en SVG :

<svg width="200" height="100" style="background-color: lightgrey;">
    <g class="bars">
        <rect x="0" y="69" width="20" height="31"></rect>
        <rect x="25" y="36" width="20" height="64"></rect>
        <rect x="50" y="58" width="20" height="42"></rect>
        <rect x="75" y="72" width="20" height="28"></rect>
        <rect x="100" y="84" width="20" height="16"></rect>
        ...
    </g>
</svg>

Le groupe (balise <g>) est créé en ajoutant les lignes suivante dans le code JS :

var bars = svg.append('g')
            .attr('class', 'bars');

Style CSS

Jusqu'à présent, nous avons inclu nos styles directement depuis le code JS. Afin de préserver la séparation des contenus, il est préférable de rassembler tous nos styles dans un fichier CSS indépendant. Vous avez probablement remarqué qu'à l'étape précédente, nous avions ajouté une classe bars à notre groupe. Nous allons l'utiliser pour spécifier les styles de notre diagramme :

#bar-chart svg { background-color: Gainsboro; }
#bar-chart .bars { fill: LightSkyBlue; }

Voici le résultat final en ligne :

Félictation ! Vous venez de créer votre premier diagramme à barres avec D3.js.

Voir aussi


Dernière mise à jour : 29/01/2020