Formation D3js : Data Visualization
| 1890€ HT / personne |
| 3 jours (21 heures) |
Présentation
D3 (D3.js) est une librairie JavaScript permettant de créer des représentations graphiques de données.
Dans cette formation, vous découvrirez comment créer avec D3.js vos propres graphiques et proposez à vos utilisateurs une nouvelle manière d’afficher vos données.
Pour ce faire, nous nous attarderons dans un premier temps à comprendre comment interpréter les données, et choisir quelles représentations graphiques utiliser.
Par la suite, nous découvrirons D3.js et créerons nos premiers graphiques, pour et utiliser toute la puissance de la librairie pour donner vie à nos créations en ajoutant des labels, des couleurs, des animations…
Nous terminerons pas voir comment intégrer cette librairie avec React et Angular et les best practices.
Notre formation présentera la dernière version de l’outil, à savoir D3 v7.
Objectifs
- Comprendre les bases de la data visualization
- Choisir le bon graphique pour représenter ses données
- Concevoir des graphiques grâce à D3.js
- Intégrer la librairie dans les frameworks traditionnels
Public visé
Développeur web, Lead developer, web designers, Designers (Une formation complémentaire sur les bases de la programmation web incluant les svgs peut être proposée en module complémentaire).
Pré-requis
- Connaissance de HTML5/CSS3, JavaScript
Pré-requis techniques
- Éditeur de code compatible avec Javascript
Programme de notre formation D3js pour la Data Visualization
[Jour 1]
Introduction à la visualisation de données
- Data science
- Définitions
- Le process
- La visualisation de données
- Data viz
- Définitions
- Explorative vs Explicative
- Pourquoi créer des graphiques
- Quiz
- Types de données
- Données numériques
- Données catégorielles
- Séries temporelles
- Quiz: identifier les données
- Représenter ses données
- Types de graphiques
- Techniques de représentation
- Choisir le graphique adapté à son histoire
- TP : En partant d’une problématique et d’un set de données, créer ses premières visualisations.
[Jour 2]
Créer ses premiers graphiques avec d3.js
- Introduction à d3.js
- Contexte et objectifs
- Nouveautés de la v5
- Setup
- Démarrer son web serveur
- Inclure d3.js
- Data
- Créer des éléments sur la page
- Data Bindings
- Choisir sa source de données
- Selections
- TP: Utiliser d3.js pour afficher une liste de données
- Affichage de données
- Créer des graphiques avec des divs
- Créer des graphiques en svg
- Bar Chart
- TP: Créer un Bar Chart
- TP2: Ajouter légende, couleurs et labels
- Scatterplot
- TP: Créer un Scatterplot
- Échelles (Scales)
- Domains & Ranges
- Normalisation
- Différentes techniques pour créer son échelle
- Créer une échelle
- TP : Ajouter une échelle au Plot
- Axes
- Créer ses axes
- Labelliser et styliser ses axes
- TP : Ajouter les axes au Plot
[Jour 3]
Techniques avancées et intégration avec React / Angular
- Mise à jour des données
- Méthodes via les Events Listeners
- Mise à jour des axes et des échelles
- TP : Mettre à jour les données du Bar Chart
- Transitions & Animations
- La fonction duration(), delay() et ease()
- Début et fin des transitions
- TP : Animer la mise à jour des données du Bar Chart
- Interactions avec les utilisateurs
- Types d’interactions
- Attacher des DOM Events aux éléments
- TP : Rendre le bar Chart intéractif
- Afficher les données sur une carte
- GeoJSON
- Types de projections
- TP : Créer sa première carte avec des données
- Autres types de représentations graphiques
- Pie Chart
- Bubble Chart
- Mekko Chart
- Line Graph
- TP : Codons un des exemples ci-dessus
- Intégration avec React
- React
- Créer un composant réutilisable
- TP : Recréer le Bar Chart avec React
- Intégration avec Angular
- Angular
- Créer un composant réutilisable
- TP : Recréer le Scatter Plot avec Angular
Langues et Lieux disponibles
Langues
- Français
- Anglais / English
Lieux
-
France entière
- Paris
- Lille
- Reims
- Lyon
- Toulouse
- Bordeaux
- Montpellier
- Nice
- Sophia Antipolis
- Marseille
- Aix-en-Provence
- Nantes
- Rennes
- Strasbourg
- Grenoble
- Dijon
- Tours
- Saint-Étienne
- Toulon
- Angers
-
Belgique
- Bruxelles
- Liège
-
Suisse
- Genève
- Zurich
- Lausanne
-
Luxembourg
Nos Formateurs Référents
Yoann
Témoignages
Les + : Beaucoup de pratique
Les – : Le distanciel imposé
En synthèse : Formateur et formation adaptée, 1 ou 2 jours de plus ne seraient pas de trop
Par contre, je n’ai pas du tout apprécié le distanciel imposé par l’organisme de formation, alors même que la plaquette spécifiait que celle-ci allait se dérouler en présentiel ET distanciel.
Dommage et très déconcerté par point.
Afficher tous les témoignages
Les + : Beaucoup de pratique
Les – : Le distanciel imposé
En synthèse : Formateur et formation adaptée, 1 ou 2 jours de plus ne seraient pas de trop
Par contre, je n’ai pas du tout apprécié le distanciel imposé par l’organisme de formation, alors même que la plaquette spécifiait que celle-ci allait se dérouler en présentiel ET distanciel.
Dommage et très déconcerté par point.
Les + : Adaptabilité du formateur, beaucoup de pratiques
Explication d’une notion, d’une fonctionnalité => exercice qui suit
Les – : Premier jour un peu lent
Cas « réels » vus que le 3ᵉ jour
Les + : – La pratique
– Les compétences de Yoann et son aptitude à expliquer, peu importe le niveau de la personne en face de lui
Les – : – Le distanciel (même si je comprends tout à fait).
En synthèse : Merci à Yoann pour sa transmission de connaissance. J’ai apprécié les exercices, le fait d’avoir beaucoup pratiqué. Bien que ça n’ait duré que 3 jours, j’ai senti avoir progressé durant la formation.
Merci
Une formation parfaitement adaptée au développement d’applications de dashbording ou datastorytelling. Les technologies D3 + React mobilisées sont modernes, bien documentées et très riches. Elles permettent de répondre précisément aux commandes exprimées par les clients à la DSI.
Un bon niveau en JavaScript est souhaitable pour être à l’aise lors de l’ensemble des séquences et apprécier pleinement la richesse du contenu proposé.
Le formateur, Yoann Lallement, est d’une grande qualité humaine et professionnelle.
La très bonne connaissance de D3 par le formateur, et la capacité à appliquer dans des exemples concrets.
La capacité à adapter le contenu pour répondre aux attentes.
aucun
Apache Druid / Apache Pinot
Excellent formateur.
Le suivi des participants est bien effectuée. Les explications sont claires. Les exercices réalisés sont intéressants et ludiques. Le formateur était à l’écoute et agréable.
Je dirais qu’il faudrait mieux ancrer les étapes de création d’un document avec d3.js, sur l’import des données notamment, pour qu’à chaque changement de document le participant n’hésite pas sur ce qu’il doit écrire en premier.
Format très dynamique
Contenu très intéressant, avec un bon balance entre théorie et pratique
RAS, c’était vraiment bien
Petit nombre de participant et disponibilité max de l’intervenant, qui a adapté le rythme au niveau
L’intégration de la techno dans un workflow plus général (react ou autre) est un gros morceau qui mériterait plus de place
Formation Python : Analyse de Données
Merci !
Le formateur et sa pédagogie, un projet React tout prêt pour commencer sur l’essentiel.
Peu de théorie et de présentation sur les jours 2 et 3, ce qui rendait parfois la tâche plus compliquée.
Une présentation de l’implémentation basique de chaque graphe en préambule des ateliers pratiques aurait aidé à la compréhension.
NA
Merci pour les 3 jours, je comprends mieux D3;js et me sens plus paré à attaqué mon projet complexe !
Le contenu, le formateur, le rythme de la formation
Le suivi du formateur lors des sessions pratique
Le manque d’explication sur les fonctions à utiliser (mineur)
Pas de formation nécessaire actuellement
Je laisse le premier point vide, la formation s’est déroulée en télétravail. J’ai considéré que le mail de prérequis envoyé la semaine précédente était suffisante pour le 2ème point.
Noter la formation
| 1890€ HT / personne |
| 3 jours (21 heures) |
UNE QUESTION ? UN PROJET ? UN AUDIT DE CODE / D'INFRASTRUCTURE ?
Pour vos besoins d’expertise que vous ne trouvez nulle part ailleurs, n’hésitez pas à nous contacter.
ILS SE SONT FORMÉS CHEZ NOUS
