[Home] [Publications] [Activities] [Teaching] [Short CV]
Visualisation d'Information
Objectifs de la formation:
- Comprendre les motivations de la visualisation d'information
- Acquérir les connaissances de base en perception visuelle
- Acquérir les notions de base en sémiologie graphique
- Connaitre les techniques de Visualisation d'Information
- Développer des prototypes de visualisation utilisant les standards actuels
- Connaitre les méthodes d'évaluation des systèmes de visualisation de données
Description:
L'essor des masses de données, Big Data, pose de multiples défis. Parmi ces défis celui de l'analyse des données n'est pas le moindre. Comment détecter les corrélations, les comportements extraordinaires, les caractéristiques salientes dans les masses de données accessibles? Notre cerveau, par notre canal visuel, est habitué à résoudre de manière routinière de tels problèmes. Bombardés de photons, notre système visuel les analyse et en déduit une reconstruction mentale du monde physique nous environnant, dans lequel chaque entité est reliée à nos connaissances antérieures. Comment utiliser cette puissance de traitement pour aider à l'analyse visuelle des données, tel est le but de la visualisation d'information.
Dans ce cours nous aborderons points suivants:
- Introduction à la visualisation d'information
- Perception visuelle
- Éléments de sémiologie graphique
- Techniques d'interaction
- Evaluation des systèmes de visualisation
- Visualisation de graphes
- Visualisation de données multidimensionnelles
- Outils informatiques de visualisation
Chaque séance de trois heures se décomposera en une partie de cours et une partie pratique.
Evaluation:
L'évaluation sera basée sur le contrôle-continu. Les étudiants devront remettre plusieurs prototypes logiciels et rapports, et devront faire un exposé oral sur un sujet qui leur sera soumis.
Planches/Notes de cours:
- 01_IntroductionVisualisationInformation
- 02_PerceptionVisualisationInformation
- 03_TheorieDeLaCouleurVisualisationInformation
- 04_05_ArbreEtGrapheVisualisationInformation
- 06_EvaluationVisualisationInformation
Travaux pratiques:
Date de rendu | Sujet | Documents |
XXX | Propriétés des variables visuelles: produire en D3 plusieurs documents SVG illustrant les variables visuelles et leur propriétés. Type de rendu: archive contenant au minimum un fichier HTML et au besoin un ou plusieurs fichiers de données au format CSV et/ou un ou plusieurs fichiers de style CSS. |
Exemples de réalisation Inégalités des genres en Europe Sports d'hiver |
XXX | A l'aide de l'application Adobe Color CC étudiez le schéma de couleur d'exemples de visualisation de données. Recherchez des exemples de visualisation de données correspondant à chacune des répartitions de couleur suivantes: semblable, monochrome, triade, complémentaire, composite. Expliquez lorsque c'est possible en quoi cette répartition vous parait ou non adaptée aux données qui sont visualisées. |
Exemple de réalisation schémas de couleurs |
XXX | Créer un objet Json contenant la structure hiérarchique d'un répertoire de votre disque. Visualiser cet arbre en utilisant au moins deux méthodes implémentées dans d3.js. Script python de création d'un objet JSON pour un répertoire: folder-to-json |
|
XXX | Trouver 5 exemplesde visualisation illustrant les principes énoncés dans l'article et l'exposé "Narrative Visualization" |
Narrative visualization slides
|
Outils informatiques:
Exemples de scripts D3, Javascript et de fichiers SVG
Ces exemples sont des modifications d'exemples disponibles sur le site d3.js.
Archive contenant tous les exemples
Exemple minimal javascript | JavaScriptExempleMinimal |
Exemple minimal D3 | D3_ExempleMinimal |
Style déterminé par une fonction | D3_StyleDetermineParUneFonction |
Style déterminé par une fonction, exemple 2 | D3_StyleDetermineParUneFonctionEx2 |
Création de noeuds dirigée par les données | D3_CreationDeNoeudsParLesDonnees |
Création de noeuds dirigée par les données, exemple 2 | D3_CreationEtMiseAJourDeNoeuds |
Style déterminé par des données | D3_StyleEnFonctionDeDonnees |
Graphique par colonnes | D3_Chart |
Graphique par colonnes, exemple 2 | D3_ChartDecompose |
SVG | SVG_ExempleEnDur |
SVG modifié par un script D3 | SVG_D3 |
Lecture de données dans un fichier CSV | D3_LectureCSV   MonFichierCSV  simple-cors-http-server.py |
Création de noeuds à partir d'un fichier CSV | D3_LectureCSV_Et_CreationNoeud  MonFichierCSV  simple-cors-http-server.py |