Parcours d'initiation D3 à Nancy

D3 ?

D3, comme Data Driven Document, est une librairie conçue pour créer des visualisations de données sur la base les standards du Web (HTML, JS, CSS, SVG, Canvas, …).

Son objectif n’est pas de faire dans le navigateur l’équivalent des graphiques que vous générez avec vos tableurs Excel mais plutôt de créer une expérience utilisateur riche de visualisation des données. Il faut inclure dans cette expérience riche les interactions utilisateurs.

L’interaction utilisateur est une partie importante dans ce monde de la visualisation des données. Si avant, une image exportée depuis votre tableur préféré suffisait, aujourd’hui les utilisateurs sont plus exigeants et souhaitent naviguer / interagir avec les données que vous présentez.

D3 propose une boite à outils très complète et “bas niveau” pour faire le lien entre des données et une interface utilisateur.

D3 entre les données et l’interface utilisateur.

D3js

L’écosystème de D3 est composé :

  • des plugins qui viennent complétés l’outillage D3
  • de librairies qui simplifient la création de graphiques (C3js, NVDjs, …) basées sur D3.
  • une énorme base d’exemples d’expériences visuelles créées avec D3. Vous copiez le code et formater les données pour réutiliser le rendu.
  • des outils de générations de graphique WYSIWYG

Apprentissage de D3

Les développeurs en quête d’un moyen rapide de générer un “beau” graphique seront probablement déçus de D3. Ce dernier impose quelque chose que les développeurs pressés n’aiment pas : comprendre. Ils vont donc avoir tendance à s’orienter vers des librairies dites “clés en main” comme par exemple C3js.

Il y a un ticket d’entrée dans D3 et tout report de votre compréhension à plus tard d’une ligne de code est une dette technique que vous finirez par payer.

En revanche, tout développeur qui franchit cette barrière d’entrée découvre toute la puissance de D3 et un niveau de personnalisation infini. Il va entrevoir des relais de créativité / innovation dans la présentation des données.

Le parcours d’initiation à D3

Les 26 et 27 mars, j’étais à Nancy pour faire traverser cette barrière d’entrée à 4 développeurs Front-End expérimentés (milieu bancaire).

Le parcours initiatique que nous avons suivi est composé de 10 travaux pratiques :

  • TP 1 - Créer un premier graphique HTML avec D3. L’idée ici est de créer un histogramme agréable à voir uniquement composé d’éléments HTML (DIV) à partir d’un tableau de données.

  • TP 2 - Premier graphique SVG. Nous revoyons toutes les bases de SVG et nous dessinons plusieurs formes avec D3 (aucun code ajouté dans la page HTML).

  • TP 3 - Les transitions D3. Les développeurs découvrent avec quelle facilité ils peuvent créer des animations agréables avec très peu de lignes de code. Ils expriment généralement leurs créativités à travers ce TP en :

    • bougeant tous les éléments du graphique
    • masquant et affichant progressivement des éléments
    • ou encore en modifiant plusieurs fois des couleurs d’éléments HTML et/ou SVG
  • TP 4 - Manipuler les données. Les données sont désormais récupérées à distance. Les développeurs apprennent à se servir des échelles pour dessiner.

  • TP 5 - Les événements. Le développeur rend tous les éléments graphiques interactifs. Il apprend même à faire du templating HTML (sans variable dans le template… oui c’est magique D3…) avec D3.

  • TP 6 - Les axes et composants personnalisés complexes. Nous faisons connaissance avec le composant axe de D3 pour tracer les axes X et Y. Nous rentrons dans le détail de sa personnalisation. Nous apprenons aussi à travers ce TP à créer des composants graphiques complexes réutilisables personnalisés. Les fondements du fonctionnement des composants D3 sont posés à cette étape.

  • TP 7 - Les lignes, les arcs et les symboles. Les développeurs apprennent à se servir des générateurs D3 pour tracer des courbes.

  • TP 8 - Histogramme. A cette étape, nous avons déjà représenté des histogrammes de plusieurs façons : avec des DIVs et avec du SVG. Nous faisons connaissance avec ce qu’on appelle des composants d’agencement (layout en anglais).

  • TP 9 - Camembert. Nous sommes en France, alors le tracé d’un graphe qui porte le nom d’un fromage est un indispensable dans ce parcours initiatique.

  • TP 10 - Cartographie. Cet exercice est un saut pour le développeur dans le monde de la cartographie. Après une remise à niveau du vocabulaire, nous créons une carte interactive des régions de France.

A votre tour de franchir la barrière

Les 4 développeurs de Nancy sont très satisfaits de ce parcours. Ils ont pu franchir la barrière d’entrée en 2 petites journées ludiques et maintenant les voilà pleins de rêves et d’énergie pour réinventer la manière de présenter les données à leurs clients.

Si vous aussi, vous souhaitez aller de l’autre côté, tendez la main, je vous y emmène avec plaisir ;)

Liens


Teacher
Rossi Oddet
Formateur Web, Java & Co.
@rossioddet
publié le 28 mars 2015
d3js

Cet article vous a plu ? Alors partagez le via les réseaux sociaux.