Visualisation de données avec JavaScript

Un manuel interactif pour apprendre à voir, décider et construire

Ce cours s'adresse à des professionnel·les qui veulent aller plus loin que « choisir un type de graphique dans un menu ». Pendant six rencontres de trois heures, nous apprenons à lire les données, à comprendre ce que l'œil perçoit, à construire des représentations avec Chart.js et D3, puis à raconter le changement par l'interaction et l'animation.

Le support que vous consultez est un livre web : il contient les explications qui permettent de suivre sans dépendre du discours de l'enseignant, mais aussi des visualisations à manipuler, des exemples travaillés, des questions de réflexion et des ateliers ouverts.

Le fil conducteur

Une visualisation réussie ne commence pas par une bibliothèque JavaScript. Elle commence par une question et progresse à travers quatre décisions :

1. Que cherchons-nous à comprendre ou à faire comprendre ?
2. Que représentent réellement les données, et que nous autorisent-elles à calculer ?
3. Quels encodages l'œil peut-il lire avec suffisamment de justesse ?
4. Quel niveau d'interaction et de technique sert le propos sans l'écraser ?

On retrouvera ces questions dans chaque séance. Chart.js et D3 ne sont pas deux objectifs séparés : ce sont deux façons complémentaires de mettre les décisions en œuvre.

Les six séances

Séance	Question directrice	Ce que vous construisez
1. Lire les données	Qu'est-ce qu'une ligne, une variable et une mesure nous autorisent réellement à dire ?	Un profil de données et une première vue publiée
2. Voir et faire voir	Pourquoi certaines différences sautent-elles aux yeux et d'autres nous échappent-elles ?	Une critique et un redesign perceptuel
3. Encoder avec Chart.js	Comment transformer une question en marques, axes et encodages cohérents ?	Une collection de graphiques justifiés
4. Composer une interface	Comment plusieurs vues peuvent-elles aider à décider sans devenir un mur de graphiques ?	Un tableau de bord interactif ciblé
5. Construire et raconter avec D3	Que gagne-t-on quand chaque élément visuel devient programmable ?	Un récit visuel en scènes annotées
6. Montrer le changement	Quand le mouvement et les données vivantes améliorent-ils réellement la compréhension ?	Une visualisation mise à jour et animée

Notes de cours

Accédez aux leçons détaillées du cours

Voir les leçons

Ce que vous saurez mieux faire

À la fin du parcours, vous devriez être en mesure de :

• interroger un dataset avant de chercher à le représenter ;
• distinguer type de stockage, niveau de mesure, rôle analytique et structure des données ;
• lire et critiquer une visualisation à partir de la perception, de l'encodage et du contexte ;
• choisir entre Chart.js, D3 et une solution plus simple selon le besoin réel ;
• construire une visualisation web lisible, interactive et partageable ;
• raconter une conclusion sans cacher l'incertitude, les limites ou les données qui la contredisent ;
• continuer seul grâce aux documentations, articles et ouvrages annotés dans chaque séance.

Environnement commun

Toutes les démonstrations utilisent le même projet Vite + JavaScript moderne, versionné sur GitHub et déployable sur Vercel.

• En local : VS Code, Node.js, Git et le repo starter du cours.
• Dans le navigateur : StackBlitz ouvre le même projet Vite sans installation locale.
• Pour publier : Vercel produit une URL partageable à partir du repo GitHub.

Le changement d'outil ne doit pas devenir le sujet du cours. Le même projet grandit au fil des rencontres : données brutes, premiers graphiques, tableau de bord, récit D3 puis données vivantes.

Prérequis raisonnables

Vous devriez être à l'aise avec :

• les bases de JavaScript moderne (const, fonctions, tableaux, objets, modules) ;
• map, filter et une première utilisation de async / await ;
• la console du navigateur et un éditeur de code ;
• le rôle général de HTML et CSS.

Vous n'avez pas besoin d'être spécialiste en statistique, en design ou en D3. Les notions importantes sont introduites dans le support, avec leurs limites et des exemples concrets.

Trois familles de données pour garder un fil

• BIXI Montréal : trajets, stations, temps et comportements — notre terrain principal pour les séances 1 à 4.
• World Bank Open Data : espérance de vie dans quatre pays — une série temporelle pour construire et raconter avec D3 à la séance 5.
• Open-Meteo : conditions actuelles à Montréal — une source vivante pour distinguer fraîcheur, transport, mise à jour et animation à la séance 6.

Ces sources sont des fils conducteurs, pas des obligations. Le Stack Overflow Developer Survey et les portails de données ouvertes restent proposés comme alternatives. Les ateliers indiquent comment remplacer les données par un sujet qui vous concerne davantage.

Ce que nous ne prétendons pas couvrir en 18 heures

Cartographie avancée, accessibilité complète des graphiques, rendu de centaines de milliers de points, scrollytelling éditorial et visualisation assistée par IA mériteraient chacun leur propre cours. Nous les nommons lorsqu'ils affectent une décision, puis nous fournissons des ressources pour poursuivre sans les traiter superficiellement comme des chapitres complets.