Visualisation de données avec D3.js

Description de la formation

La visualisation de données prend beaucoup de place aujourd'hui dans un monde où nous sommes submergés d'informations. Cette formation est pour apprendre les bases de la librairie D3.js pour construire des programmes JavaScript qui produirons des visualisations sur mesure.

Objectifs pédagogiques

À la fin de cette formation, le participant sera en mesure de :

  • Créer des programmes JavaScript avec la librairie D3.js.
  • Importer des données en différents formats.
  • Gérer les échelles, le domaine, la création des axes.
  • Créer des graphiques dynamiques classiques
  • Utiliser des gabarits de diagrammes.
  • Faire des visualisations géographiques simples.

Méthodologie

Plusieurs méthodes d’apprentissage et outils didactiques permettant de mesurer le progrès et l’intégration des concepts par les participants sont utilisés tout au long de la formation.

  • Exposé
  • Démonstration
  • Exercice informatique

Clientèle visée

Intégrateurs et développeurs Web.

Particularité

Prérequis: une bonne maîtrise du JavaScript fonctionnel (ES6) et des bases de l'algèbre linéaire. Bien noter que D3. js est une librairie bas niveau pour créer des visualisations.

    • Présentation de D3.js
    • Importation de données (JSON, XML, csv et tsv)
    • Bases de l’API D3.js pour modifier le DOM : sélecteurs, ajout et retrait d’éléments
    • Arrimage de données avec la méthode data()
    • Patron général de mise à jour : entrées, mises à jour et sorties
    • Apprentissage du SVG à travers l’API de D3.js
    • Stylisation du SVG par attributs ou règles CSS
    • Philosophie de construction avec le JavaScript fonctionnel et mise en place d’une coquille de travail
    • Fonctions de génération de chemins : lignes, aires, secteurs, symboles, diagonales et cordes
    • Gestion des échelles (quantitatives, temporelles et ordinales), définition du domaine, création d’axes - Formater les dates et les nombres sur les axes
    • Animations avec les transitions
    • Interaction avec le graphique : cliquer, glisser-déposer, changer d’échelle (zoom)
    • Étude de quelques gabarits de diagrammes (layouts) : secteurs, fréquences, cordes, forces et arbres
    • Chargement de données géographiques au format TopoJSON ou GeoJSON
    • Fonctions de projection pour la visualisation de données avec une composante géographique
    • Utilisation des carnets Observable (notebooks) pour expérimenter avec des visualisations
Benoit Dubuc

Benoit Dubuc

M.Eng., Ph.D.

Benoit est détenteur d'un Ph. D. en génie électrique de l'Université McGill, spécialisé en intelligence artificielle (vision par ordinateur). Après un séjour postdoctoral en informatique théorique à l'Université de Montréal, il a géré le développement d'outils de gestion de contenu Web au début des années 2000. Ces outils sont déployés sur la plupart des sites Web créés par son entreprise dans les 10 dernières années, dont le portail de la Société des musées québécois, récipiendaire du prestigieux Web d'Argent d'AVICOM en 2004.