Programmation Web pour la visualisation
BUT Science des données - 3ème année - Université Grenoble Alpes
Objectif du cours
Ce cours est une introduction à la programmation Web pour la visualisation interactive de données. Il couvre :
- rappels des principes de base de la visualisation de données (perception visuelle, encodage des données, interaction, etc.) et des principaux types de graphiques,
- aperçu des principales bibliothèques pour la visualisation de données,
- HTML, CSS et JavaScript,
- réalisation de reporting / visualisations Web interactives / dashboards avec les bibliothèques Plot, Leaflet, D3.js ainsi que des données en Open Data,
- création de rapports Web avec R et Quarto (en fonction du temps restant).
Planning du cours
| Date | Heure | Contenu | Ressources |
|---|---|---|---|
| 08/09/2025 | 10h-13h | CM - Cours d’introduction + Intro JavaScript | Slides |
| 08/09/2025 | 14h-17h | TP - Rappels JavaScript et manipulation de données | Voir URL des TP plus bas |
| 09/09/2025 | 10h-13h | TP - Datavisualisation avec Plot | Voir URL des TP plus bas |
| 09/09/2025 | 14h-17h | TP - Datavisualisation avec Plot + CM - Règles et conseils pour la conception de visualisation de données | Slides |
| 10/09/2025 | 10h-13h | TP - Datavisualisation avec Plot | Voir URL des TP plus bas |
| 10/09/2025 | 14h-17h | TP - Datavisualisation avec Plot | Voir URL des TP plus bas |
| 03/11/2025 | 10h-13h | TP - Visualisation de données géospatiales avec Leaflet | Support |
| 03/11/2025 | 14h-17h | CM / TP - Vues synchronisées, dashboards, etc. (Plot / Leaflet / D3.js) | Support |
| 04/11/2025 | 10h-13h | TP - Vues synchronisées, dashboards, etc. (Plot / Leaflet / D3.js), suite | Voir lien précédent |
| 04/11/2025 | 14h-17h | TP - Visualisation dans un document Quarto (R / Python / JavaScript) | Support |
URL des TPs sur Observable
L’ensemble des notebooks disponibles peut-être retrouvé ici : https://observablehq.com/@sd-progwebdataviz?type=collections
En détails (les liens seront mis à jour au fur et à mesure de la progression du cours) :
- Premiers pas dans Observable
- Rappels Markdown
- Rappels JavaScript - Exercices - Correction
- Rappels manipulation de données - Exercices - Correction
- Bibliothèque Plot (partie 1)
- TP - Exercice de mise en pratique avec Plot - Correction
- TP - Prix des carburants - Correction
- Bibliothèque Plot (partie 2)
- Exercice Deck.gl: Accidents de la route au Japon
Évaluation
Ce cours est en contrôle continu intégral. La note sera constituée de :
- une note de projet (50%) - ce projet sera réalisé seul ou en binôme (à rendre pour le 10/12/2025 à 20h00)
- un TP noté (50%) - ce TP individuel sera réalisé en salle courant novembre 2025
Ressources utiles
Visualisation de données en général
From Data to Viz (typologie des graphiques)
The Data Visualisation Catalogue (typologie des graphiques)
DataVizProject (collection de graphiques pour trouver l’inspiration et le type approprié)
Fundamentals of Data Visualization, Claus O. Wilke, 2019 (livre en ligne)
Data Visualisation - A Handbook for Data Driven Design, 2nd Edition, Andy Kirk, 2019 (livre)
Visualising data (blog - podcast - ressources variées / Par Andy Kirk)
Information is Beautiful (exemples - blog - ressources variées)
FlowingData (blog - ressources variées / Par Nathan Yau)
Visual Cinnamon (blog - ressources variées - visualisation de données et data art)
Visualization design resources (ressources variées)
Datawrapper Blog (blog: do’s & don’ts, color in datavis, etc.)
Exposition “Data Visualization and the Modern Imagination” (exposition en ligne sur l’histoire de la visualisation de données)