Formations Web JavaScript Formation D3.js

Formation D3js : Data Visualization

Noté 4.5 sur 5
Logo Formation D3js
Prix 1890€ HT / personne
Durée 3 jours (21 heures)

Paris | à distance | FNE

Il ne reste que quelques places
NewCafés et déjeuners offerts en interentreprises
Disponible en intra-entreprise pour former votre équipe
Je ne veux pas me déplacer ? Option classe virtuelle gratuite

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

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

Noté 3 sur 5
16 novembre 2022

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.

Romain I. de chez Société Editrice du Monde

Afficher tous les témoignages

Noté 3 sur 5
16 novembre 2022

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.

Romain I. de chez Société Editrice du Monde
Noté 4 sur 5
16 novembre 2022

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 3eme jour

Benjamin T. de chez CGI France
Noté 5 sur 5
16 novembre 2022

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.

Mylene B. de chez CGI France
Noté 5 sur 5
1 juillet 2022

Merci

Ahmed C. de chez ASSEMBLEE PERMANENTE CHAMBRES AGRICULTURE
Noté 5 sur 5
30 juin 2022

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.

Johann P. de chez ASSEMBLEE PERMANENTE CHAMBRES AGRICULTURE
Noté 5 sur 5
30 juin 2022

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.

Mathieu C. de chez ASSEMBLEE PERMANENTE CHAMBRES AGRICULTURE
Noté 4 sur 5
18 mai 2022

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.

Thibaud J. de chez DEFENSE CONSEIL INTERNATIONAL
Noté 5 sur 5
18 mai 2022

Format très dynamique

Contenu très intéressant, avec un bon balance entre théorie et pratique

RAS, c’était vraiment bien

Joseph L. de chez Dial Once France
Noté 5 sur 5
18 mai 2022

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

https://www.ambient-it.net/formation/python-analyse-de-donnees/

Merci !

Diégo A. de chez FONDATION NATIONALE SCIENCES POLITIQUES
Noté 4 sur 5
16 décembre 2020

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 !

Nicolas D. de chez CGI France
Noté 4 sur 5
16 décembre 2020

Le contenu, le formateur, le rythme de la formation

Yohan P. de chez
Noté 5 sur 5
16 décembre 2020

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.

Jonathan T. de chez CGI France

Noter la formation

Prix 1890€ HT / personne
Durée 3 jours (21 heures)

Paris | à distance | FNE

Il ne reste que quelques places
NewCafés et déjeuners offerts en interentreprises
Disponible en intra-entreprise pour former votre équipe
Je ne veux pas me déplacer ? Option classe virtuelle gratuite

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

partenaire sncf
partenaire hp
partenaire allianz
partenaire sfr
partenaire engie
partenaire boursorama
partenaire invivo
partenaire orange
partenaire psa
partenaire bnp
partenaire sncf
partenaire hp
partenaire allianz
partenaire sfr
partenaire engie
partenaire boursorama
partenaire invivo
partenaire orange
partenaire psa
partenaire bnp