Améliorer la présentation des données avec les Standards Web

Nous parlons du Web 2.0 depuis si longtemps maintenant que nous savons désormais ce qu'il peut faire ou non. Mais une chose est sûre, de nos jours, il y a énormément de données sur internet. Et comme les Webdesigners, nous concevons beaucoup de sites liés directement aux données.

Il y a aussi, sur internet, beaucoup de possibilités pour la présentation de celles-ci. L'annonce récente de Google sur la sortie de son API graphique (Google Charts API) en est un bon exemple, mais il y a aussi de nombreux outils et services pour créer des diagrammes et graphiques en images et des présentations interactives en flash.

Il y a aussi de bonnes techniques basées sur les standards, comme les graphiques en CSS d'Eric Meyer qui transforment un tableau HTML, sémantiquement correct, en diagramme.

Toutes ces options sont extrêmement utiles lorsque vos données ont un caractère purement informatif et que la seule chose qui vous intéresse c'est leur représentation graphique. Mais que faire si nous voulons inclure la visualisation des données comme partie intégrante du site et pas seulement comme une image isolée ou un diagramme interactif ? Lorsque nous concevons des interfaces pour des sites articulés autour des données, il peut être utile de savoir créer des éléments de navigation capable de devenir de véritables outils de visualisation. L'information est alors transmise par la navigation, l'utilisateur s'oriente ainsi en fonction de l'information qu'il regarde simplement en cliquant dessus.

Nous pourrions construire ce type de navigation avec Flash, ou générer des images statiques à chaque changement de données, mais il faudrait alors trouver le bon compromis en termes d'accessibilité et de maintenance.

Même en utilisant les balises standards, il y a des compromis à trouver. Si nous voulons juste afficher des données, nous pouvons parfois obtenir la meilleure sémantique et la meilleure présentation avec un simple tableau. Mais lorsque ce que nous voulons réellement obtenir est une navigation, l'utilisation des tableaux est difficile et souvent inappropriée pour cet usage. Ce dont nous avons besoin se trouve quelque part entre les balises appropriées à la navigation et les quelques attraits supplémentaires pour la sémantique et la structure.

Nous allons couvrir trois techniques de base pour ajouter un peu de visualisation aux données, directement dans des structures de navigation basées sur les standards. Ces trois techniques commencent par le même socle de navigation HTML : une liste non ordonnée de liens. Nous allons un peu transformer l'utilisation des balises et ajouter quelques données et quelques artifices pour le look, mais dans chaque cas, le modèle de base est quasiment le même.

Puisque nous ne pouvons pas nous appuyer sur la structure d'une table, nous utiliserons des noms de classes en utilisant la norme des microformats pour garder autant que possible la structure des données. Et, puisque nous utilisons le HTML et le CSS, nous utiliserons partout l'unité de mesure em pour nous assurer que les diagrammes s'adapteront à l'échelle de la police des utilisateurs.

Cette simple technique ajoute, sur des listes d'éléments, des barres horizontales derrière le texte (Regardez l'exemple final pour avoir une idée de ce que nous voulons obtenir). Cela fonctionne pour des listes de n'importe quelle longueur. L'avantage des listes longues est de pouvoir trier les éléments par valeur et d'afficher les barres de la plus petite à la plus grande grâce à leurs valeurs relatives. Dans cet exemple, nous allons afficher pour chaque élément de la liste leur valeur, mais vous pouvez très bien l'omettre si la valeur n'est pas significative ou si vous voulez juste présenter les valeurs relatives pour une rapide comparaison.

Commençons par une simple liste non ordonnée de liens.

    <ul class="chartlist">
      <li>
        <a href="http://www.example.com/fruits/pommes/">Pommes</a>
      </li>
      <li>
        <a href="http://www.example.com/fruits/bananes/">Bananes</a>
      </li>
      <li>
        <a href="http://www.example.com/fruits/Cerises/">Cerises</a>
      </li>
      <li>
        <a href="http://www.example.com/fruits/dattes/">Dattes</a>
      </li>
    </ul>

La première chose à faire est d'ajouter à chaque élément de la liste, sa valeur. Nous les avons inclus dans leur propre balise span, en dehors de la balise de lien, de façon à pouvoir leur appliquer un style séparément.

    <ul class="chartlist">
      <li>
        <a href="http://www.example.com/fruits/pommes/">Pommes</a>
        <span class="count">420</span>
      </li>
      <li>
        <a href="http://www.example.com/fruits/bananes/">Bananes</a>
        <span class="count">280</span>
      </li>
      <li>
        <a href="http://www.example.com/fruits/cerises/">Cerises</a>
        <span class="count">200</span>
      </li>
      <li>
        <a href="http://www.example.com/fruits/dattes/">Dattes</a>
        <span class="count">100</span>
      </li>
    </ul>

Pour créer les barres, nous devons modifier l'affichage des éléments de la liste pour les afficher en bloc, ils prendront alors toute la largeur de la balise et nous allons utiliser un positionnement relatif, afin que chaque barre soit placée en fonction de chaque élément. Puisque le but principal de cette liste est la navigation, nous définissons la propriété display: block sur la balise du lien pour que la zone de clic prenne également toute la largeur des barres.

    .chartlist li {
      position: relative;
      display: block;
    }

Pour faciliter la visualisation, nous ajoutons aussi quelques propriétés de style pour afficher les valeurs à droite de la liste. Et nous utilisons le positionnement absolu au lieu des flottants pour que les liens et les barres se superposent complètement sur toute la largeur du graphique sans chevaucher les valeurs.

    .chartlist .count {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      margin: 0 0.3em;
      text-align: right;
      color: #999;
      font-weight: bold;
      font-size: 0.875em;
    }

Puisque nous avons utilisé le positionnement absolu pour les valeurs, ajoutons un peu d'espace sur les liens pour être sûrs qu'il y ait suffisamment de place pour les nombres sans qu'ils viennent chevaucher le texte des liens. Nous devons aussi ajouter une ou deux propriétés aux liens pour s'assurer qu'ils apparaîtront toujours au-dessus des barres que nous allons créer. Nous définissons la propriété position à relative pour pouvoir utiliser la propriété z-index et on la définit avec une valeur supérieure à zéro pour que le lien reste au-dessus du graphique.

    .chartlist li a {
      display: block;
      padding: 0.4em 4.5em 0.4em 0.5em;
      position: relative;
      z-index: 2;
    }

Avant d'ajouter le style aux barres, nous devons ajouter une information supplémentaire sur chaque élément pour définir les données utilisées pour créer les barres. Dans notre cas, nous voulons afficher la valeur relative de chaque élément comparée à la somme totale de tous les éléments de la liste. Ainsi l'information que nous allons donner avec le diagramme à barres sera un pourcentage calculé à partir de ces deux valeurs. Nous ajoutons une balise à chaque élément de la liste et nous lui affectons une classe spécifique ainsi nous pourrons l'utiliser dans la feuille de styles. Enfin, nous utilisons une classe index pour représenter le pourcentage de chaque barre.

    <ul class="chartlist">
       <li>
        <a href="http://www.example.com/fruits/pommes/">Pommes</a>
        <span class="count">420</span>
        <span class="index">(42%)</span>
       </li>
       <li>
        <a href="http://www.example.com/fruits/bananes/">Bananes</a>
        <span class="count">280</span>
        <span class="index">(28%)</span>
       </li>
       <li>
        <a href="http://www.example.com/fruits/cerises/">Cerises</a>
        <span class="count">200</span>
        <span class="index">(20%)</span>
       </li>
       <li>
        <a href="http://www.example.com/fruits/dattes/">Dattes</a>
        <span class="count">100</span>
        <span class="index">(10%)</span>
       </li>
    </ul>

Petite précision sur les données▲

    <ul class="chartlist">
       <li>
        <a href="http://www.example.com/fruits/pommes/">Pommes</a>
        <span class="count">420</span>
        <span class="index" style="width: 42%">(42%)</span>
       </li>
       <li>
        <a href="http://www.example.com/fruits/bananes/">Bananes</a>
        <span class="count">280</span>
        <span class="index" style="width: 28%">(28%)</span>
       </li>
       <li>
        <a href="http://www.example.com/fruits/cerises/">Cerises</a>
        <span class="count">200</span>
        <span class="index" style="width: 20%">(20%)</span>
       </li>
       <li>
        <a href="http://www.example.com/fruits/dattes/">Dattes</a>
        <span class="count">100</span>
        <span class="index" style="width: 10%">(10%)</span>
       </li>
    </ul>

Finissons le diagramme▲

    .chartlist .index {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      background: #B8E4F5;
      text-indent: -9999px;
      overflow: hidden;
    }

Une fois que vous avez la recette de base pour une bonne et sémantique navigation avec un soupçon de données et un peu de CSS pour les transformer en diagramme, il existe beaucoup de variantes que vous pouvez appliquer à différents types de données. Ici l'astuce est de tourner le diagramme sur le côté pour faire un histogramme (Regardez l'exemple).

Nous allons commencer par une liste très similaire au premier diagramme. Ici, il s'agit d'une liste de jours, avec une valeur par jour. Comme chaque barre a une largeur limitée pour l'affichage d'un libellé, nous allons simplement utiliser le jour du mois comme libellé et afficher un titre au-dessus de la liste pour indiquer le mois. Puisque ce diagramme est fait pour la navigation et que le graphique affiche des valeurs relatives (de ce que nous étudions), ce n'est pas grave si, ici, nous n'affichons pas toute l'information. Pour faciliter son utilisation, nous ajouterons comme titre des liens la date en toutes lettres et la somme pour ce jour là, de sorte que ce détail s'affiche dans une info-bulle lors du passage de la souris sur chaque barre.

    <ul class="timeline">
       <li>
        <a href="http://www.example.com/2007/dec/1/" title="1 décembre 2007 : 40">
          <span class="label">1</span>
          <span class="count">(40)</span>
        </a>
       </li>
       <li>
        <a href="http://www.example.com/2007/dec/2/" title="2 décembre 2007 : 100">
          <span class="label">2</span>
          <span class="count">(100)</span>
        </a>
       </li>
    </ul>

Répéter autant que nécessaire. Dans cet exemple, nous avons créé un diagramme mensuel avec une barre par jour, mais vous pouvez utiliser ce diagramme avec la largeur et le nombre d'éléments dont vous avez besoin. Si vous créez un diagramme avec peu de barres, vous pourrez les élargir et laissez ainsi de la place en dessous pour des libellés plus longs.

Afin de s'assurer que les libellés restent en dessous des barres, nous allons définir la taille de tous les éléments du diagramme en utilisant l'unité em ainsi le diagramme et le texte seront solidaires et s'adapteront en fonction de la taille du texte. Pour faire simple, nous définissons la taille du texte que nous voulons utiliser pour les libellés dans la classe principale .timeline, ainsi nous pouvons définir la taille du reste en fonction de ça. Nous définissons la hauteur du diagramme à 10 em, avec 8 em pour les barres et 2 em pour les libellés en incluant une petite marge intérieure.

    .timeline {
      font-size: 0.75em;
      height: 10em;
    }
    .timeline li {
      height: 8em;
    }

Comme précédemment, nous fixons les éléments de la liste en utilisant le positionnement relatif et nous utiliserons le positionnement absolu pour attacher les barres en bas de chaque élément. Si nous n'utilisons pas le positionnement relatif pour chaque élément de la liste, les barres seraient fixées en haut des éléments, ce qui ne correspond pas au rendu que nous souhaitons obtenir. Nous définissons chaque élément de la liste en élément flottant à gauche, de façon à ce que les barres s'alignent l'une à côté des autres horizontalement. Nous définissons la largeur de chaque barre à 1.5 em et la hauteur à 8 em pour laisser assez de place en dessous pour un libellé à 2 chiffres et nous laissons une petite marge de chaque côté pour séparer les barres les unes des autres. Nous utilisons comme mesure les em pour toutes les dimensions, ainsi les barres et les libellés s'adapteront ensemble si la taille du texte change.

    .timeline li {
      height: 8em;
      position: relative;
      float: left;
      width: 1.5em;
      margin: 0 0.1em;
    }

Comme nous voulons que les barres et les libellés soient des zones cliquables, nous devons définir le mode d'affichage des liens en bloc (display: block) et la hauteur à 100% (height: 100%) ainsi tout l'espace disponible pour chaque élément sera rempli.

    .timeline li a {
      display: block;
      height: 100%;
    }

Nous voulons que le libellé s'affiche en dessous des barres, mais comme nous voulons que les barres et que les libellés soient cliquables, on place les deux dans la balise a. Pour mettre les libellés à l'écart, nous utiliserons le positionnement absolu avec une valeur négative pour la propriété bottom. Puisque les barres ont une hauteur de 8 em et le diagramme de 10 em nous allons déplacer les libellés en dessous des barres de -2 em. Nous définissons également une hauteur de ligne (line-height) à 2 em, peu importe alors la taille du texte, ils auront largement la place au milieu de cette zone verticale. Nous les fixons à gauche des barres et les paramétrons pour qu'ils prennent toute la largeur et nous centrons le texte dans cette zone.

    .timeline li .label {
      display: block;
      position: absolute;
      bottom: -2em;
      line-height: 2em;
      left: 0;
      width: 100%;
      text-align: center;
    }

Puisque nous n'allons pas afficher la valeur des éléments dans ce graphique, nous allons utiliser la classe count pour afficher les barres, en utilisant la même combinaison text-indent et overflow pour masquer le texte. Nous utilisons, pour les barres, un fond plein et nous le positionnerons en bas à gauche des éléments de la liste. Contrairement à ce que nous avons fait pour le diagramme horizontal, nous définissons la largeur des barres à 100% et la hauteur à zéro.

    .timeline li a .count {
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      text-indent: -9999px;
      overflow: hidden;
      width: 100%;
      height: 0;
      background: #AAA;
    }

Pour ce diagramme, nous ne voulons pas que chaque barre représente un pourcentage des valeurs totales du diagramme, car il y a trop d'éléments et les barres seraient vraiment minuscules. Au lieu de cela, nous voulons que la barre la plus grande soit celle correspondante au jour où la valeur est la plus grande, donc nous allons définir la hauteur de cette barre à 100% et pour les autres nous calculerons le pourcentage par rapport à la valeur de ce jour là. Vous pouvez voir le résultat (avec des données fausses, mais avec des calculs réels) dans l'exemple. Nous avons également ajouté un style sur le survol de la barre, du libellé et du fond pour mettre en évidence l'élement qui est sur le point d'être sélectionné.

Maintenant que nous avons fait pivoter notre diagramme à barres horizontales pour en faire un histogramme, nous pouvons le miniaturiser pour en faire un micrographique afin de visualiser pour chaque libellé, la tendance des données (Regardez l'exemple). Vous pouvez voir sur l'exemple que nous faisons juste rétrécir l'histogramme. Avec des barres à la place des lignes, ce n'est pas un vrai micrographique de type "Sparkline", mais il correspond bien à l'esprit d'afficher un maximum d'informations dans un simple graphique de taille réduite.

Cette fois l'approche de départ est un peu différente. Puisque nous voulons créer de multiples diagrammes, nous commencerons toujours par une liste non ordonnée, mais chaque élément de cette liste contiendra un graphique entier. Les micrographiques permettent d'afficher de façon discrète des informations en même temps que le texte, nous allons essayer de le mettre en place pour chaque élément de données en utilisant des balises en ligne (inline). Ce à quoi nous aspirons est quelque chose qui sera relativement lisible même sans feuille de style. Jetez un oeil à cet exemple sans CSS pour avoir une bonne idée de la chose.

Nous commencerons par mettre un élément span qui contiendra le graphique et nous en utiliserons un autre avec la classe index comme conteneur pour chaque barre. Chaque nombre de la série est inclus dans son propre élément span avec la classe count. C'est ce que nous allons utiliser pour appliquer un style à nos éléments. Puisque de toute façon, nous allons masquer le texte de la balise span.count, nous allons ajouter des virgules entre chaque valeur et une parenthèse autour de la série de valeur pour rendre l'affichage sans CSS un peu plus lisible.

    <span class="sparkline">
       <span class="index"><span class="count">(60, </span></span>
       <span class="index"><span class="count">220, </span></span>
       <span class="index"><span class="count">140, </span></span>
       <span class="index"><span class="count">80, </span></span>
       <span class="index"><span class="count">110, </span></span>
       <span class="index"><span class="count">90, </span></span>
       <span class="index"><span class="count">180, </span></span>
       <span class="index"><span class="count">140, </span></span>
       <span class="index"><span class="count">120, </span></span>
       <span class="index"><span class="count">160, </span></span>
       <span class="index"><span class="count">175, </span></span>
       <span class="index"><span class="count">225, </span></span>
       <span class="index"><span class="count">175, </span></span>
       <span class="index"><span class="count">125)</span></span>
    </span>

Nous définissons chaque graphique en élément flottant à gauche pour le placer juste à côté du texte. En utilisant un flottant on triche un peu car un micrographique est supposé être intégré directement au texte. Mais en attendant d'avoir plus de compatibilité avec la propriété display : inline-block (qui permet d'obtenir ce que nous voulons), un simple flottant devrait faire l'affaire. Puisque nous voulons que le graphique ait la même taille que le texte, nous définissons sa hauteur à 1em et nous ajoutons une petite marge de chaque côté pour aérer un peu le rendu.

    .sparkline {
      float: left;
      height: 1em;
      margin: 0 0.5em;
    }

Puisque, cette fois, les éléments .index sont les conteneurs des barres, nous leur appliquons une position: relative et nous les faisons flotter à gauche. Nous définissons la largeur des barres à 2px, car 1px est vraiment trop petit pour avoir un bon rendu. Et comme pour l'histogramme, nous voulons que la hauteur du micrographique soit maximale, donc nous mettrons la hauteur à 100%.

    .sparkline .index {
      position: relative;
      float: left;
      width: 2px;
      height: 1em;
    }

Pour les barres en elles-mêmes, nous allons suivre à peu près le même modèle que celui utilisé pour l'histogramme et nous ajouterons l'astuce pour cacher le texte.

    .sparkline .index .count {
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 0;
      background: #AAA;
      overflow: hidden;
      text-indent: -9999px;
    }

Nous ajouterons quelques styles de base et quelques marges intérieures à la liste non ordonnée contenant notre jeu de micrographiques. Vous pouvez voir les résultats dans l'exemple.

Vous pouvez voir le récapitulatif des diagrammes dans l'exemple final. Essayez de modifier la taille du texte pour voir comment les diagrammes s'adaptent avec le reste de la page, ou vérifiez l'exemple sans feuille de style pour voir comment se présentent les données sur des appareils spécifiques (type PDA ou livres électroniques) ou dans des environnements n'étant pas compatible à 100% avec le CSS.

Évidemment, ces diagrammes sont assez simples et toutes les techniques présentées ne sont pas forcément les meilleures à utiliser dans tous les cas de figures. Lorsque vous avez besoin d'être précis dans la restitution ou lorsque vous avez un grand jeu de données à comparer, rien ne vaut une table. Pour des rendus plus visuels comme les nuages de points ou les camemberts en 3D, vous pourriez choisir quelques outils côté serveur pour générer directement ce type d'images. Pour ajouter plus d'interactivité et d'animation, Flash sera probablement incontournable.

Ce n'est certainement pas la solution universelle pour la présentation des données, mais cela ajoute à la navigation le contexte, qui sans ça, resterait invisible. De plus vous pouvez commencer à imaginer, comment ces techniques pourraient servir de base pour des représentations plus complexes.

Ainsi, lorsque vous voulez construire quelques graphiques intégrés dans la structure d'un site basé sur des données, souvenez-vous : vous pouvez aller loin avec un peu de CSS et quelques balises standards.

Je tiens ici à remercier l'équipe Développement Web de Developpez.com pour ses relectures attentives et ses suggestions, et en particulier Freegreg et Kerod.