Formation D3js : Data Visualization

0,0 rating
Logo Formation D3js

2100€

1890€ HT / personne

3 jours (21 heures)

Paris
Il ne reste que quelques places
Disponible aussi en intra-entreprise pour former votre équipe.

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.

 

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

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

    Yoann

    Développeur web, je travaille sur les nouvelles technologies JavaScript pour répondre aux besoins fonctionnels des équipes produits. Après un master en ingénierie mathématique et data science, je me suis très vite intéressé à la visualisation graphique des données. Une image vaut mille mots. C’est exactement à quoi répond aujourd’hui la data viz, où nous nous efforçons de raconter des histoires en mettant en forme des données brutes.

    Témoignages

    Afficher tous les témoignages

    Noter la formation

    2100€

    1890€ HT / personne

    3 jours (21 heures)

    Paris
    Il ne reste que quelques places
    Disponible aussi en intra-entreprise pour former votre équipe.

    Une question ? Un projet ?

    Pour des informations complémentaires, n’hésitez pas à nous contacter.