Formation D3.js
D3 (ou D3.js) est une bibliothèque de visualisation des données (ou dataviz ou représentation graphique de données) écrite en JavaScript. Elle permet de visualiser des données numériques dans le navigateur grâce à SVG sous forme de graphiques, cartes, arbres, graphes... Ces visualisations peuvent être dynamiques et interactives, en réagissant notamment aux interactions utilisateurs. Dans notre formation D3.js nous verrons dans un premier temps comment interpréter les données et quelle représentation graphique est la plus adaptée selon celles-ci. Nous créerons ensuite nos premières visualisations, que nous enrichirons avec des labels, des couleurs, des animations... La formation D3 se conclue par l'intégration avec des bibliothèques externes comme React et les bonnes pratiques de développement.
Objectifs pédagogiques
- Comprendre les concepts fondamentaux des visualisations de données
- Pouvoir choisir parmi les différentes visualisations en fonction des données
- Créer des graphiques simples et interactifs : barres, courbes, secteurs...
- Mettre en place des animations et transitions dans les visualisations
- Intégrer D3.js avec d'autres frameworks JavaScript comme React ou Angular
Pré-requis
- HTML et CSS
- JavaScript
Public
- Développeurs
- Chefs de projets
Programme
Jour 1
Introduction
- Data Science et visualisation de données
- Dataviz Explorative vs Explicative
- Pourquoi créer des graphiques ?
- Données numériques
- Données catégorielles
- Séries temporelles
- Types de graphiques
- Techniques de représentation
- Choisir le graphique adapté à ses données
- Les visualisation avancées
Jour 2
D3.js
- Positionnement de D3 par rapport aux bibliothèques concurrentes (Chart.js, Google Charts, Highcharts...)
- Installation et démarrage
- Choisir sa source de données
- Créer des éléments sur la page
- Data bindings
- Selections
Affichage de données
- Créer des graphiques avec éléments HTML
- Créer des graphiques en SVG
- Les graphiques basiques : Bar Chart, Scatterplot...
Echelles et Axes
- Domains & Ranges
- Normalisation
- Différentes techniques pour créer son échelle
- Créer ses axes
- Labelliser et styliser ses axes
Jour 3
Fonctionnalités avancées
- Interactions avec les utilisateurs
- Mise à jour des valeurs, des axes et des échelles
- Transitions et animations :duration(), delay() et ease()
Autres types de représentations graphiques
- Cartes avec GeoJSON
- Pie Chart
- Bubble Chart
- Mekko Chart
- Line Graph
- Arbres et Graphes
Intégration avec React ou Angular
- Créer un composant réutilisable
- Les bibliothèques pour simplifier l'intégration
Méthodes mobilisées
- Un formateur validé par nos équipes techniques et pédagogiques sera présent pendant toute la durée de la formation
- Pour les formations en présentiel, une salle de formation sera mise à disposition et équipée d'ordinateurs portables, d'un accès Wi-Fi, d'un projecteur et d'un tableau blanc. En distanciel la session sera suivie sur Zoom ou autre outil de visioconférence sur demande (Teams, Webex, Google Meet...).
- Un support de cours en version numérique sera remis à chaque participant
Modalités d’évaluation
- Questions orales ou écrites (QCM)
- Exercices pratiques
- Auto-positionnement en amont et aval de la formation