Objectifs pédagogiques / Compétences visées
- Représenter des données sous forme graphique et interactive
- Exploiter les bibliothèques de codes prêts à l'emploi de D3.js
- Distinguer les interactions entre HTML 5, SVG, CSS 3, JavaScript.
Niveau requis
Avoir une pratique courante de la navigation Web.
Public concerné
Journalistes, concepteurs Web, infographistes, développeurs.
Programme
Présentation de D3.js / Observable
- A l'origine : Michael Bostock du trio de Stanford
- Data Journalisme : sélection d'exemples réalisés avec D3.js
- Pourquoi et comment utiliser D3.js ?
Initiation aux langages Web
- HTML, CSS : les standards du Web
- JavaScript / jQuery : programmer l'interactivité
- SVG : graphismes vectoriels avec HTML 5
Représentations graphiques avec D3.js
- Formes :
- Rectangles
- Cercles
- Lignes
- Polygones
- Personnalisation :
- Couleurs
- Marges
- Contours
- Remplissages
- Effets graphiques :
- Filtres
- Dégradés
- Ombres
D3.js / Observable par la pratique
- Etapes et méthodologie de travail
- Dénicher, nettoyer, exploiter des fichiers de données Open Data de type CSV ou JSON
- Choisir un modèle de visualisation adéquat
- Gérer l'interactivité
- Responsive Design et mobile-friendly
- Bonnes pratiques
Cartographie
- Formats GeoJSON et TopoJSON
- Créer des cartes interactives avec D3.js
Pour aller plus loin
- Sélection de tutoriels
- Ressources et bibliographies
Modalités d’évaluation des acquis
- En cours de formation, par des productions
- Et, en fin de formation, par un questionnaire d'auto-évaluation ou une certification (M2i ou éditeur)