La visualisation de données avec D3.js

Apprendre à visualiser des données avec JavaScript

4.80 (92 reviews)
Udemy
platform
Français
language
Web Development
category
instructor
460
students
4.5 hours
content
Nov 2023
last update
$19.99
regular price

What you will learn

La Visualisation de données

Créer des Graphiques à partir de données

Combiner données, design et logique.

Apprendre à utiliser Firebase

Description

Bonjour à toi.

Dans cette formation tu vas apprendre à créer des visualisations de données avec la librairie JavaScript "D3.js".

Cette librairie est incontournable, elle est très grande et regroupe de nombreux concepts, elle mérite donc vraiment une formation à elle toute seule, voire plusieurs !
On va lier trois domaines, les données, le Design, et la logique avec JavaScript.

Que tu ais besoin de créer un graphique, un cartogramme, un dendrogramme ou encore des représentation sous forme d'arbre, de cascades ou de diagramme à bulles, D3 est là pour répondre à ces besoins.

Cette librairie permet d'avoir une emprise totale sur nos représentations, mais aussi sur les animations liés à celle-ci.
En effet on va pouvoir lier toutes sortent d’interaction avec l'utilisateur afin de rendre le tout encore plus plaisant et interactif.

Alors, achète cette formation maintenant !

Content

Introduction

Introduction
Éditeur de texte

Rappel SVG

Que sont les SVG ?
Créer des formes en SVG
Créer des formes 2 + Path

Les bases de D3

Mettre en place D3
Select et SelectAll
Ajouter avec "append"
Enchaîner les méthodes + la méthode "attr"
Les groupes SVG
Lier les données avec "data"
Exercice "Cercle"
La méthode "enter"
Utiliser les données d'une source externe

Créer notre premier Graphique

Mise en forme des données et utilisation de l'index.
Créer une échelle avec "scaleLinear"
Comprendre les échelles (Scale).
Créer l'échelle pour l'axe "X"
Min, Max et Extent
Ajouter notre cadre SVG directement dans le JavaScript
Mettre nos éléments dans un groupe et le décaler
Création des Axes
Inverser nos éléments et l'axe Y
Styliser les "Ticks"

Découvrons quelques méthodes et concepts de D3

Créer des lignes
Projet : Créer un graphique à ligne
Projet : Création des axes
Projet : Mise en place de la ligne
Utiliser des couleurs avec D3
Utiliser des palettes
Créer des aires
Créer un graphique circulaire

Animations avec D3

Créer une animation avec D3
Projet d'animation
Projet d'animation partie 2
Interpolation et Tweens

Créer notre base de données avec Firebase

Création de notre base de données
Liaison de notre firestore avec l'index
Fin de la liaison des données

Base de données à l'écoute des évenements.

Création de la fonction de mise à jour
Base de données à l'écoute avec "onSnapshot"
Création du Switch

Animer dynamiquement un Graphique

Animation de la sélection "enter"
Animation des Updates

Projet : Graphique Circulaire

Mise en place du dossier et des CDN
Mise en place de l'interface avec Bootstrap
Création de la base de données
Liaison des inputs avec notre database
Mise en place du cadre SVG + Méthode Pie et Arc.
A l'écoute avec onSnapshot et création de la fonction de MAJ
Création du graph circulaire avec les données de la base de données
Mise en place des couleurs
Enlever des éléments dynamiquement avec la sélection "Exit"
Animer la sélection "Enter"
Mise en place des légendes
Supprimer un élément au click
Quand utiliser les fonctions fléchées VS fonctions classiques

Screenshots

La visualisation de données avec D3.js - Screenshot_01La visualisation de données avec D3.js - Screenshot_02La visualisation de données avec D3.js - Screenshot_03La visualisation de données avec D3.js - Screenshot_04

Reviews

François
December 26, 2022
Cours obsolète, comme d'autres apprenants j'ai acheté une formation mais reste bloqué car le cours n'est pas mis à jour concernant la connexion de la bdd à notre dataviz. C'est impossible de continuer même en cherchant sur le web
Rico
October 13, 2022
formation qui mériterait d'être mise à jour notamment sur la partie firebase/firestore. Element difficile à comprendre.
Jordan
September 17, 2022
Les bases sont posés, la répétion des étapes les plus simples permettent d'acquérir des automatismes et la pédagogie d'Enzo, toujours au top ! On aimerait toujours en avoir plus mais l'objectif est atteint... merci!
Patrick
August 18, 2022
Cours intéressant et l'exemple est une bonne introduction à l'utilsation de D3. Malheureusement ce cours nécessiterait une mise à jour car l'utilisation de Firestore à évoluée (utilisation de la v9 pour suivre le cours) et d3 à également reçu des évolutions.
Jyhad
August 15, 2022
Cours intéressant, pas beaucoup de cours sur le sujet en français donc merci. Par contre un peu ancien et j’ai l’impression qu’il n’est pas vraiment à jour, utilisation de var au lieu de let et manque de fonction fléchées (ça aurait été plus lisible je pense). C’est pour cela que je met tout de même 4/5
Joel
October 27, 2021
Très bonne formation pour débuter avec d3, en tout cas il y a toutes les armes nécessaires pour vite en monter en compétences avec ce framework.
Michaël
April 13, 2021
- Aspects théoriques complètement absents. - Pédagogie proche de zéro. :( - Il y a mieux et gratuit sur Youtube. - Gardez votre argent.
LethargicDog
January 8, 2021
Yep, good match, so far so good, lectures are short and efficient, sections are well balanced, all great stuff.
Daniel
December 17, 2020
Je suis satisfait de la formation car elle a répondu à mes attentes. J'aurais aimé aussi avoir le projet sur les Top Friday présenté dans la première vidéo du cours. Est-ce possible?
M.
October 15, 2020
Le formateur connait parfaitement le sujet et l'explique très bien. Ce cours est parfait pour débuter avec D3JS.
Antonin
June 21, 2020
Cours très clair pour se familiariser à l'utilisation de D3.js et acquérir les bonnes bases pour approfondir le sujet. Formateur clair et pédagogue. Exemples simples et ludiques
Pierre-Alain
May 3, 2020
Très bien. Un bémol, le cours part rapidement dans les animations. Ce n'est pas la chose la plus importante lorsque l'on désire afficher des données. L'affichage de points m'aurait plus intéressé.
Emmanuel
March 31, 2020
Très bonne formation ! J'ai beaucoup appris avec celle ci. Enzo est un formateur que j'apprécie beaucoup car il connait très bien ses sujets même si comme à l'habitude, même s'il explique toujours tout, il faut parfois bien s'accrocher parce que pour lui c'est "logique et simple" haha
Insosama
February 25, 2020
complet, pas trop long mais suffisement progressif et démonstratif pour prendre en main toute les bases et se débrouiller tout seul pour la suite. merci !

Charts

Price

La visualisation de données avec D3.js - Price chart

Rating

La visualisation de données avec D3.js - Ratings chart

Enrollment distribution

La visualisation de données avec D3.js - Distribution chart
2367360
udemy ID
5/14/2019
course created date
10/29/2019
course indexed date
Bot
course submited by