Visualisation interactive de données
Enseignant: Romain Vuillemot, Ecole Centrale de Lyon, Département Math-Info.
Email : romain.vuillemot@ec-lyon.fr
Site web : http://romain.vuillemot.net/
Objectifs du cours
- Connaître les principales représentations graphiques, savoir décomposer leur mapping visuel (marques et propriétés graphiques) avec les données (variables et valeurs)
- Maîtriser les méthodes d'exploration de données et prototypage du jeu de données aux premières visualisations au moyen d'outils interactif en justifiant les choix de design
- Savoir implémenter un prototype en technologies web (JS, D3, Observable) et leur déploiement avec une mise en page complète et des interactions appropriées
Liens importants pour le cours
- Etudiants inscrits + groupes de projets à compléter
- Formulaire de le rendu des TPs
- Exemples de visualisations (que nous discutterons en cours)
Documents à lire :
- Document de cadrage des projets
- Listes des ressources techniques à maîtriser pour le cours
- Observable Plot Cheatsheet
Evaluation
Le cours comporte au total 28 heures de face à face, divisées en 7 séances de 4h de cours+TP. La présence aux cours et TP est obligatoire. Tous les rendus sont à réaliser la veille du cours. Aucun rendu tardif n'est pris en compte par email (utiliser le formulaire de rendu + indiquer dans les commentaires le motif du retard).
- 40% note de projet / 20
- 40% note d'examen / 20
- 20% rendu des TPs (notes A/C/F)
- 10% participation (Bonus)
- Validation de la compétence C1C3
Lundi 06/01/2025 08:00 - Séance 1 (4h)
Cours 1
- Présentation du cours et de l'activité projets
- Introduction à la visualisation avec exemples et définitions
- Outils de visualisations avec Tableau, D3, Observable Plots
- Début de l'activité projets, document de cadrage
TP 1
- Installer Tableau Public pour l'exploration visuelle de jeux de données
- TP 1 Tableau : exploration de données Covid
- Introduction à Observable
➡️ Pour la prochaine séance
- TP 1 à finir
- 📖 S'auto-former à JavaScript, Observable (exercices) à réaliser, ne sont pas à rendre)
- 📖 Projets : réfléchir à un groupe de projet et un sujet
Lundi 13/01/2025 08:00 - Séance 2 (4h)
Cours 2
- Visualiser le temps
- Cas d'études : données climatiques et données covid
- Visualisation et Observable
Exercices :
TP 2
- TP 2 Observable : exercice de visualisation de données
- Notebook de chargement des données
➡️ Pour la prochaine séance
- TP 2 : à rendre (rendu individuel mais travail en binôme possible)
- 📖 S'auto-former à : SVG, CSS, D3.JS et ces exercices
- 📖 Projets : validation du sujet de projet (par le responsable du cours) et cahier des charges (lien à inscrire sur le document du cours)
Lundi 20/01/2025 08:00 - Séance 3 (4h)
Cours 3
- Visualiser l'espace
- Cas d'étude visualisation de données sportive : slides, notebook
- Programmer en D3.JS, notebook du cours
- Notebook du cours (24-25)
TP 3
- TP 3 Visualisations standards en D3.JS : scatterplot, bar chart, line chart.
➡️ Pour la prochaine séance
- TP 3 à rendre (travail et rendu individuel)
- 📖 S'auto-former à D3 Avancé: D3 part 2
- 📖 Projets : V1 du cahier des charges et explorations de données
Lundi 27/01/2025 08:00 - Séance 4 (4h)
Cours 4
- Visualisation et interaction
- Layouts D3 avancés : grouped chart (notebook du cours, notebook 23-24)
- Méthode de prototypage de visualisation (slides)
- Prototypage papier des visualisations du projet (par groupe)
TP 4
- Travail sur la V1 des projets, visulisations exploratoires (bar chart, scatterplot, line chart du TP 3) dans un notebook Observable et mettre lien dans la colonne H dans la liste des étudiants inscrits
➡️ Pour la prochaine séance
- Projets : ajouter le prototype papier au cahier des charges et commencer l'implémentation
- 📖 Lire D3.js avancé : Réseaux et Layouts
Lundi 03/02/2025 08:00 - Séance 5 (4h)
Cours 5
- Visualisations de graphes, d'arbres et de réseaux (slides)
- Cas d'étude visualisation du traffic routier : (slides)
- Layouts D3 avancés : stacked graphs, pie chart (slides) (observable du cours)
TP 5
- TP 4 Geo map : réaliser une carte géographique en D3
- Travail sur les projets (par groupe)
➡️ Pour la prochaine séance
- TP 4 à rendre (travail et rendu individuel)
- Travail sur le projet (par groupe)
Lundi 10/02/2025 08:00 - Séance 6 (4h)
Cours 6
- Rôle de la couleur en visualisation (slides)
- Visualiser le machine learning (video, slides, notebook)
- Layouts D3 avancés : force-directed graphs, hierarchies, treemaps (notebook)
TP 6
- Finalisation d'une V1 du projet (par groupe, lien à inscrire sur le document du cours, colonne I).
- Activité de peer review de projet : formulaire de peer review pour le groupe à évaluer (1 formulaire par groupe)
➡️ Pour la prochaine séance
- Prise en compte des retours du peer review (réponses)
- Préparer la présentation finale du projet
Lundi 17/03/2025 08:00 - Séance 7 (4h)
Séance de travail sur les projets
Lundi 24/03/2025 08:00 - Séance 8 (4h)
Soutenance des projets
- Présence obligatoire pendant toute la durée de la séance
- 10min par groupes : 6min de présentation, 3min de questions, 1min d'installation
- Pas de slides, uniquement la page du projet
➡️ Pour le 10/03/2025 12h (pas de séance)
- Prise en compte des retours lors de la soutenance
- Envoie de l'URL vers le projet final
- Réviser l'examen
Lundi 10/03/2025 - Pas de séance
Rendu final des projets (heure limite : 12:00)
- Email avec l'URL vers le projet final à romain.vuillemot@ec-lyon.fr
- Sujet du mail :
[MOS-VISU] Rendu final projet - Groupe X - Indiquer les changements pris en compte depuis la soutenance
Mardi 11/03/2025 08:00 - Examen (2h)
- Examen sur papier (example de sujet ici)
- Aucun support de cours autorisé
- Amener stylos et crayons de couleurs
Liens
Programmation web
- HTML et CSS https://www.w3.org/Style/Examples/011/firstcss.en.html
- SVG https://oreillymedia.github.io/Using_SVG/guide/markup.html
- Manipulation du DOM en JS https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
- Comment fonctionne un navigateur https://developers.google.com/web/updates/2018/09/inside-browser-part1
Introduction aux notebooks Observable
Apprendre JavaScript
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
- https://developer.microsoft.com/en-us/javascript/
- https://javascript.info/
- https://exploringjs.com/impatient-js/toc.html
- https://learnvanillajs.com/
- Algorithmes en JavaScript https://github.com/trekhleb/javascript-algorithms
- Eloquent JavaScript https://eloquentjavascript.net/
- JavaScript et science des données http://js4ds.org/
- JavaScript modules https://ultimatecourses.com/blog/mastering-the-module-pattern