Cours visualisation interactive de données

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

08/11 — Introduction

• Cours
• TP Tableau

Pour la séance suivante:

• Rendu TP Tableau (voir le sujet)

15/11 — Pas de cours/TP

22/11 — Intro à D3

• Cours
• TP#2 D3.js Intro
• Liste fonctions D3
• Démarrage des projets
• Encadrant : Romain Vuillemot

• Soumettre le rendu de TP #2 (line chart interactif)
• Soumettre votre analyse de dataviz climat: pour rappel une seule par étudiant (description des données, encodage, interactions et votre critique)
• Soumettre votre proposition de projet: lien vers jeu de données, questions auxquelles vous souhaitez répondre (mais pas encore de proposition de visu)

29/11 — Time & Space + D3js part 2

• Cours (Space-Time)
• Cours D3.js Part2
• TP#3 D3.js Scatterplots connectés
• Encadrant : Romain Vuillemot

• Soumettre le rendu de TP #3 (matrice de scatterplot)

06/12 — Graphes, Layouts et Prototypage

• Cours (Graphes et Data Abstractions)
• Cours D3.js Part3
• TP#4 Transition grouped bar chart et stacked bar chart
• Encadrant : Romain Vuillemot

Pour la semaine suivante:

• Document de cadrage du projet à rendre sur le document global de suivi de projet
• Soumettre le rendu de TP #4 (transition grouped stacked bar chart)

13/12 — Mise en page avancée

• Cours nettoyage de données
• D3.js Part4 geo-maps
• Correction TP #4
• TP #5
• Encadrant : Aurélien Tabard

Pour la semaine suivante:

• Soumettre le rendu de TP #5 (carte de la grippe)
• Peer-review sur les cadrages de projets, en suivant ce modèle, reporter le lien de votre peer review sur le document global de suivi de projet, vous y trouverez aussi qui doit reviewer qui.

20/12 — Projet

Séance banalisée projet

• Case study
• Correction TP #4 (lien)
• Correction TP #5 (lien)
• Encadrant : Romain Vuillemot

10/01 — Soutenance de projet

Soutenances de projet : 6 minutes de présentation et démo (pas de transparents), 3 minutes de questions.

17/01 - Post-soutenances

Rendu final vendredi à 23h59

S'assurer d'avoir un Readme.md à la racine de votre projet, à minima:

• Version anglaise/résumé
• Un titre
• Une description

Pour votre projet

• Utiliser un nom de repository github pertinent (pas ProjectDataviz13..)
• Images représentative du projet, une grand format : teaser.png, une miniature (500x300) thumbnail.png ou gif à la racine de votre projet
• Mettre sur le site son nom + lien vers site web (ou emails)
• Lien vers le cours de visualisation, Université Lyon1, votre formation
• Sourcer et mettre des crédits: données, inspiration, etc.

Pull request sur le site du cours, dossier gallery

• lire la documentation sur la façon de faire un pull request
• Ajouter deux images représentatives du projet dans le dossier gallery en respectant le format de nommage des fichiers :
• une grand format avec le nom : numerogroupe-teaser.png
• une miniature (500x300) : numerogroupe-thumbnail.png ou numerogroupe-gif
• Ajouter un fichier de description simple décrivant le projet en français numerogroupe-desc-fr.md et un autre en anglais numerogroupe-desc-en.md, en respectant les modèles suivants (titre, lien et description) numeroprojet-desc-fr.md, numeroprojet-desc-en.md

28/01 - Examen

Pas de documents autorisés.

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. Mais également de TP en D3.js intermédiaires. 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 si vous candidatez sur un poste technique dans une entreprise.

1. Créer un compte (gratuit) sur Github
2. Se familiariser avec le site (par exemple cherchez un projet cool qui vous plait)
3. Créez un premier projet (même facile) essayez de le modifier, mettre à jour, forker d'autres projets, etc.
4. 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

• FAQ: How to learn Tableau
• Build standard charts with 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

• SVG2D3

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

• http://www.thefunctionalart.com/
• http://eagereyes.org/
• http://visualisingdata.com/

Graphics/Journals

• http://www.bloomberg.com/visual-data/
• http://data.huffingtonpost.com/

Misc

• Command line tutorial
• https://egghead.io/lessons/debugging-with-dev-tools
• Design essay: Picturing the Great Migration