2 jours (14 heures)
Formation certifiante - Code CNCP : 2226 - Certif Info : 83841
- Présentiel
- Blended - Learning
- FOAD / E-learning tutoré
Objectifs
- Comprendre les bases de la data visualization
- Choisir le bon graphique pour représenter ses données
Prérequis
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.
Intervenants
Les contenus pédagogiques sont synchronisés sur les évolutions techniques grâce à notre équipe d’intervenant experts et professionnels du secteur enseigné. Les formateurs qui interviennent pour animer les formations ont une double compétence : compétence informatique et compétence métier (Banque, Assurance, Administration, Santé, Transport).
PROGRAMME DE 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 de ce module.
POUR TOUTE DEMANDE DE RENSEIGNEMENT OU DE DEVIS