Visualisation de données avec D3.js

Description de la formation

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

Objectifs pédagogiques

À la fin de cette formation, vous serez 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 permettant de mesurer votre progrès et votre intégration des concepts 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.