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
É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 | 09h-12h | 07/11 | Principes de bases en visualisation |
2 | 09h-12h | 14/11 | Principes de programmation en D3.js |
3 | 4h | 22/11 | Principes de Design et visualisation |
4 | 09h-12h | 28/11 | Visualisation de données Spatiales |
5 | 08h-12h | 05/12 | Visualisation de graphes et d'arbres |
6 | 09h-12h | 12/12 | Nettoyage de données & Vues connectées |
7 | 14h-17h | 20/12 | Séance banalisée projets |
8 | 8h-12h | 09/01 | Soutenances de projet |
9 | 08h-12h | 16/01 | Rendu et passe finale sur les projets |
Planning
07/11 — Introduction
Pour la séance suivante:
- Rendu TP Tableau (voir le sujet)
14/11 — Données temporelles et Intro à D3
- Cours visu données temporelles
- Cours Intro à D3.js de Romain Vuillemot
- TP#2 D3.js Intro
- Liste fonctions D3
- Démarrage des projets
- Soumettre le rendu de TP #2
- Soumettre votre analyse d'une dataviz de consommation de données ou énergie: une par étudiant (description des données, encodage, interactions et votre critique), notez votre choix ici aussi pour éviter les doublons = vérifiez que la votre n'y est pas avant de vous lancer.
- Soumettre votre proposition de projet: lien vers jeu de données, questions auxquelles vous souhaitez répondre (mais pas encore de proposition de visu)
22/11 — Principes de Design et visualisation
Pour le 26/11 (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.
27/11 - Visualisation Spatiale
Pour le 4/12 (23h59):05/12 - Visualisation de Graphes
Pour le 11/12 (23h59):- rendu TP4
- Document de cadrage à reporter dans le document de suivi
12/12 - Nettoyage de données
Pour le 18/12 (23h59):- Rendu TP5
- Peer-review à reporter dans le document de suivi
20/12 - Séance banalisée projet
09/01 — Soutenance de projet
Soutenances de projet : 6 minutes de présentation et démo (pas de transparents), 3 minutes de questions.
16/01 - Post-soutenances
Rendu final vendredi à 23h59
23/01 - Examen
3 pages A4 (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