Visualisation interactive de données
Enseignant: Romain Vuillemot, ECL, Math-Info.
Email : romain.vuillemot@ec-lyon.fr
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 1, 2, 3 et 4
- 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 08/01/2024 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 et à rendre (rendu individuel)
- 📖 S'auto-former à JavaScript, D3.JS (exercices à réaliser, ne sont pas à rendre)
- 📖 Projets : réfléchir à un choix de sujet de sujet et de groupe
Lundi 15/01/2024 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
- 📖 Projets : validation du sujet de projet (par le professeur) et cahier des charges (lien à inscrire sur le document du cours)
Lundi 22/01/2024 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 (23-24)
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 29/01/2024 08:00 - Séance 4 (4h)
Cours 4
- Visualisation et interactions (slides)
- 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 05/02/2024 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 12/02/2024 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 04/03/2024 08:00 - Séance 7 (4h)
Soutenance des projets
- Présence obligatoire pendant toute la durée de la séance
- 9min par groupes : 5min de présentation, 3min de questions, 1min d'installation
- Pas de slides, uniquement la page du projet
➡️ Pour le 11/03/2024 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 11/03/2024 08:00
Rendu final des projets
- Email avec l'URL vers le projet final
- Sujet du mail :
[MOS-VISU] Rendu final projet - Groupe X - Prise en compte des retours lors de la soutenance
Mardi 12/03/2024 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