D3.js est une bibliothèque JavaScript qui aide à apporter « de la vie » aux données en effectuant une visualisation graphique des datas sur le web à partir d’HTML, SVG et CSS sans passer par un Framework généraliste. Dans cette formation, vous allez apprendre comment créer avec D3.js vos propres graphiques et de nouvelle manière d’afficher vos données.
D3.js
2 jours II Code CNCP : 2226 II Certif info : 83841
Les objectifs de la formation D3.js
A l’issu de la formation D3.js, les apprenants auront les capacités de :
- 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
Les prérequis de la formation D3.js
La formation D3.js nécessite les prérequis suivants :
- Connaissance de HTML5/CSS3, JavaScript
Vous n’avez pas les prérequis nécessaires pour la formation D3.js ? Contactez-nous pour étudier ensemble un parcours sur mesure et garantir ainsi la réussite de votre projet.
Le public de la formation D3.js
La formation D3.js s’adresse à tout public salarié, demandeur d’emploi ou en reconversion professionnelle souhaitant acquérir des compétences en développement Front End, notamment :
- Développeur Web
- Lead Developer
- Web Designers
- Designers
0
Certif Info
0
Code CNCP
0
Jours
0
Heures
Contenu de la formation
D3.js
Section 1 : Rappels des prérequis
- Rappel des prérequis
- Introduction
- Rappel des bases du HTML
- Présentation de SVG
- Rappel des bases CSS
- Combiner Javascript et D3
- Comprendre le DOM et la console
- Comprendre les fondamentaux de D3.js
- Quiz : Rappels des prérequis
Section 2 : Créer des graphiques et formes simples avec D3
- Créer un graphique à barres simple avec D3
- Ajouter un SVG
- Ajouter des rectangles
- Définition des attributs des formes
- Voir le code comme le navigateur le voit
- Quiz I : Créer des graphiques et formes simples avec D3
- Formes de base, les avantages de SVG
- Présentation des formes SVG
- Dessiner des cercles
- Dessiner des ellipses
- Dessiner des lignes
- Ajouter du texte
- Travail à faire : Créer des graphiques et formes simples avec D3
- Quiz II : Créer des graphiques et formes simples avec D3
Section 3 : Formes avancées, Paths et Echelles dans D3
- Formes avancées et Path avec D3
- Présentation de Path
- Expliquer les générateurs
- Dessiner un graphique en aires
- Trouver d’autres générateurs
- Présentation des groupes
- Quiz I : Formes avancées, Paths et Echelles dans D3
- Échelles et axes
- Présentation des échelles
- Créer une échelle linéaire
- Créer un axe linéaire
- Positionnement et formatage de notre axe
- Créer une échelle de temps
- Création d’un axe de série chronologique
- Création d’une échelle et d’un axe ordinal
- Utilisation des échelles de couleurs
- Présentation d’autres échelles
- Travail à faire : Formes avancées, Paths et Echelles dans D3
- Quiz II : Formes avancées, Paths et Echelles dans D3
Section 4 : Importation de données dans D3
- Importation de données dans D3
- Présentation de données externes
- Analyse d’un fichier CSV
- Dessiner un graphique linéaire à partir d’un fichier CSV
- Utilisation de TSV et DSV
- Analyse d’un fichier JSON
- Analyse et mappage XML
- Analyse d’un fichier TXT
- Analyse d’un HTML
- Présentation d’autres méthodes de données
- Quiz I : Importation de données dans D3
- Graphiques supplémentaires avec D3
- Créer un diagramme à partir de JSON
- Faire une tessellation Voronoi
- Présentation d’autres layouts
- Quiz II : Importation de données dans D3
- Préparation de vos données pour les graphiques avancés
- Préparer les données à l’aide de map
- Dessiner un graphique en aires de pile
- Faire progresser les sélections
- Rendre les données plates multidimensionnelles
- Filtrage des données
- Travail à faire : Importation de données dans D3
- Quiz III : Importation de données dans D3
Section 5 : Interactivité dans D3
- Interactivité
- Rendre votre graphique responsive
- Ajouter de l’interactivité avec CSS et Javascript
- Présentation de dispatch
- Les transitions
- Glisser et zoomer
- Quiz I : Interactivité dans D3
- Choisir le bon graphique
- Séries chronologiques
- Données textuelles et hiérarchiques
- Géographie et Distribution
- Travail à faire : Interactivité dans D3
- Quiz II : Interactivité dans D3
Une attestation d’assiduité sera délivrée après la validation de toutes les compétences du module D3.js
Modalités De Formations
D3.js
La formation certifiante D3.js est disponible en 3 modalités : E-learning tutoré, Blended Learning et en présentiel.