Objectifs du cours
Ce cours est une introduction à la visualisation interactive de données. Il couvre :
- Les principes de base de perception, cognition et de visualisation
- La typologie des graphiques pour les principaux types de données
- La réalisation une visualisation Web interactive en utilisant d3.js en utilisant un jeu de données réel
Ce cours permettra à la fois de maitriser les fondamentaux pour utiliser de manière informée des outils de dataviz tels que Tableau, mais aussi créer ses propres outils. Une fois ce cours validé vous devriez être en mesure de candidater à des offres d'emplois telles que postées ici et de réaliser des visualisations telles que celles visibles sur Twitter #dataviz
Évaluation
La moyenne sera constituée des notes suivantes :
- TPs et devoirs (10%) - note binaire (pass/fail) pour chaque rendu
- Une note de projet (60%)
- Un examen (30%)
Planning du cours
Heures | Date | Thème | |
---|---|---|---|
1 | 8h00 - 11h15 | 12/11 | Introduction à la visualisation d'information |
2 | 8h00 - 11h15 | 17/11 | Visualisation de données temporelles Principes de programmation en D3.js |
3 | 8h00 - 11h15 | 24/11 | Principes de Design et visualisation |
4 | 8h00 - 11h15 | 3/12 | Visualisation de données Spatiales |
5 | 8h00 - 11h15 | 10/12 | Visualisation de graphes et d'arbres |
6 | 8h00 - 11h15 | 14/12 | Séance banalisée projets |
7 | 8h00 - 11h15 | 07/01 | Visualisation située |
8 | 8h00 - 11h15 | 13/01 | Soutenances de projet |
9 | 08h-12h | 20/01 | Rendu et passe finale sur les projets |
Planning
07/11 — Introduction
Pour la séance suivante:
- Rendu TP Tableau (voir le sujet)
17/11 — Données temporelles et Intro à D3
- Cours visu données temporelles
- Intro à D3.js
- TP#2 Réaliser les 29 exercices de la partie "Data Visualization with D3"
- Démarrage des projets
Rendus (date minuit):
- Pour le 01/12: Terminer les exercices de Freecodecamp.
- Pour le 23/11: Soumettre (sur Tomuss) l'analyse d'une dataviz de correspondant à votre thème de projet préféré: une par étudiant (description des données, encodage, interactions et votre critique),
- Pour le 23/11: Membres du groupe définis
- Pour le 23/11: Soumettre votre proposition de projet: lien vers jeu de données, questions auxquelles vous souhaitez répondre (mais pas encore de proposition de visu)
24/11 — Principes de Design et visualisation
Pour le 02/12 (23h59):- Groupes stables
- Groupe github pour chaque projet
- Vous avez les données nécessaires à la réalisation de votre projet
- Esquisses finales en ligne sur la partie wiki de votre projet github.
03/12 - Visualisation Spatiale
Pour le 09/12 (23h59):- rendu TP3
- Document de cadrage du projet à reporter dans le document de suivi
10/12 - Visualisation de Graphes
Pour le 13/12 (23h59):- Peer-review à reporter dans le document de suivi
14/12 - Séance banalisée projet
Pour le 19/12 (23h59):07/01 - Visualisation située
13/01 — Soutenance de projet
Soutenances de projet : 6 minutes de présentation et démo (pas de transparents), 3 minutes de questions.
20/01 - Post-soutenances
Rendu final vendredi à 23h59
27/01 - Examen
6 pages A4 (= 3 feuilles recto-verso) autorisées.
L'examen couvrira les différents cours et TP, les exercices auront le format suivant:
- Question de cours: principes de visualisation, questions générales sur D3...
- Critique de visualisation comme pratiqué en classe
- Conception d'une visualisation basé sur un problème et des données
- Analyse de code D3 (dessiner une visualisation à partir du code)
Git, GitHub et gestion de fichiers
Ce cours nécessite de votre part un compte sur GitHub. Il sera utile pour y déposer le rendu de votre projet final. Pour cela, il vous est indispensable de créer un compte GitHub et d'en maitriser l'usage pour valider ce cours. A noter que GitHub est très utilisé dans l'industrie et le monde de la recherche, sa maîtrise vous apportera un plus où que vous candidatiez par la suite.
- Créer un compte (gratuit) sur Github
- Se familiariser avec le site (par exemple cherchez un projet cool qui vous plait)
- Créez un premier projet (même facile) essayez de le modifier, mettre à jour, forker d'autres projets, etc.
- Comme suggéré ci-dessous, faire une pull request en corrigeant cette même page.
Ci-dessous quelques ressources :
- Git Command line
- Understanding Git Conceptually
- Set Up Git
- Git Desktop client (un choix parmis d'autres!)
Rendus en retard et suivi du travail.
Tout projet de qualité repose sur processus de conception itératif, intégrant des critiques.
Si les rendus ne sont pas fait en temps et en heure, ou que vous ne cherchez pas à recevoir de retours critiques, le résultat ne pourra qu'être décevant.
Nous n'acceptons pas les rendus en retard quels qu'ils soient. En cas de circonstances exceptionnelles, merci de nous le signaler rapidement. Tout rendu en retard fera l'objet d'un malus significatif et une justification du retard sera demandée.
Éthique
Les travaux existants sont une inspiration normale lors de tout processus de création. Pour autant, il est important de reconnaitre ses sources, et de les citer. Toute réutilisation de principes de design, de texte ou de code non référencé de manière explicite sera considéré comme du plagiat et de la copie, et sanctionné comme tel. Il est donc indispensable de clairement référencer ses sources.
Mises à jour et amélioration du site
Ce document peut faire l'objet de mises à jour continues. Nous vous invitons à en consulter régulièrement l'historique. Si par hasard vous identifiez une erreur (de tout genre) sur le site, ne pas hésiter à écrire une pull request
.Autres ressources sur le web
- Ressources de visualisation, InfoVis Group UBC Computer Science.
- CS 171, Harvard University.
Tableau
D3.js
- Gallery of examples
- Code examples and references for the course "D3.js in Motion"
- Relearning D3.js
- D3 in depth
- Awesome D3
- http://vadim.ogievetsky.com/IntroD3/#1
- https://github.com/arnicas/d3-faq
- Changes in D3 4.0
- D3 V4 - What's new?
- Wide vs. Long Data in D3
SVG
Git/GitHub
- Git and GitHub (e.g. Try GitHub)
- https://agripongit.vincenttunru.com/
- https://onlywei.github.io/explain-git-with-d3/#freeplay
- https://learngitbranching.js.org/
JavaScript
- Mozilla Developers Network's Javascript reference
- Learn JavaScript (e.g. learnxinyminutes, learnjsdata)
- JSON (e.g. learnxinyminutes)
- Eloquent JavaScript
- (Notes on Douglas Crockford's Javascript the Good Parts
🚀 )[https://github.com/iteles/Javascript-the-Good-Parts-notes]
Data Visualization Classes
- http://dataviz.media.mit.edu/
- Visual Analytics Ecole Centrale Paris
- Dataviz resources http://www.cs.ubc.ca/group/infovis/resources.shtml
- https://curran.github.io/dataviz-course-archive/
- https://github.com/Ecohen4/data-viz
- https://github.com/arnicas/interactive-vis-course
Blogs
Graphics/Journals
Misc