Cours
PrestaShop

Newsletter

D3.js : Visualisation de données

Apprendre à visualiser des données avec JavaScript grâce à D3.js

Ou s'abonner pour un accès illimité sans engagement à tout Skilleos pour 19,90€/mois. En savoir plus
chapitre

Chapitres

57

chrono

Durée

04h23 de cours en ligne

chrono

Prérequis

acces

Accès

24h/24 et 7j/7
PC/Mac, tablette et smartphone

certificat

Certificat

Délivré à la fin de la formation

1for1

1 For 1

Un abo ou un achat sur Skilleos = Un cours offert à un bénéficiaire

Enzo Ustariz

Enzo Ustariz

Enzo Ustariz, connu sur Youtube sous le pseudo "Le Designer du Web", est également le créateur de l'École du Web. Développeur Web depuis plus de 6 ans, il s'est rendu compte du manque de contenu et de formations sur internet. Il décida alors d'apprendre à créer des animations avec JavaScript,  créer des sites et des applications web avec React, ou gérer une base de données avec Firebase. 

Tous ses cours sont proposés dans le but d'aider un maximum de personnes à gagner du temps sur leurs apprentissages et trouver rapidement leurs places dans le monde professionnel.

Vous voulez apprendre à visualiser des données avec JavaScript ? Créer des animations qui vont captiver et impressionner vos visiteurs ? Améliorer votre CV et vos opportunités ?

La visualisation de données avec D3.js est là pour ça et ce cours en ligne vous apprendra à l'utiliser !

Dans cette formation en ligne vous apprendrez à créer des visualisations de données avec la librairie JavaScript "D3.js". Cette très grande librairie incontournable regroupe de nombreux concepts que ce cours vous enseignera. Vous apprendrez à lier trois domaines : les données, le design, et la logique avec JavaScript. Que vous ayez 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 vos représentations, mais aussi sur les animations liés à celle-ci. En effet on vous allez pouvoir lier toutes sortent d’interactions avec l'utilisateur afin de rendre le tout encore plus plaisant et interactif.

Contenu du cours

  • Fichiers sources

À la fin du cours, vous serez capable de :

  • Créer des visualisations de données
  • Animer des graphiques

Chapitres

INTRODUCTION
1
03:21
Introduction
2
00:53
Éditeur de texte
RAPPEL SVG
3
04:14
Que sont les SVG ?
4
05:58
Créations des formes en SVG
5
05:58
Créations des formes 2 + Path
LES BASES DE D3
6
02:55
Mise en place de D3
7
03:21
Select et SelectAll
8
02:10
Ajouter avec "append"
9
06:27
Enchaîner les méthodes + la méthode "attr"
10
01:51
Les groupes SVG
11
03:46
Lier les données avec "data"
12
09:11
Exercice "Cercle"
13
04:46
La méthode "enter"
14
01:54
Utiliser les données d'une source externe
CRÉER NOTRE PREMIER GRAPHIQUE
15
08:22
Mise en forme des données et utilisation de l'index.
16
03:19
Création d'une échelle avec "scaleLinear"
17
03:19
Création d'une échelle avec "scaleLinear"
18
02:56
Comprendre les échelles (Scale).
19
07:07
Création de l'échelle pour l'axe "X"
20
02:41
Min, Max et Extent
21
02:10
Ajouter notre cadre SVG directement dans le JavaScript
22
05:39
Mise en place des éléments dans un groupe et le décaler
23
05:07
Création des Axes
24
04:09
Styliser les "Ticks"
MÉTHODES ET CONCEPTS DE D3
25
09:19
Création des lignes
26
07:37
Projet : Créer un graphique à ligne
27
11:08
Projet : Création des axes
28
04:21
Projet : Mise en place de la ligne
29
01:28
Utiliser des couleurs avec D3
30
06:07
Utiliser des palettes
31
03:00
Création des aires
32
07:41
Création d'un graphique circulaire
ANIMATIONS AVEC D3
33
05:19
Création d'une animation avec D3
34
03:46
Projet d'animation
35
08:33
Projet d'animation partie 2
36
04:55
Interpolation et Tweens
CRÉATION D'UNE BASE DE DONNÉES AVEC FIREBASE
37
05:02
Création de notre base de données
38
02:13
Liaison de notre firestore avec l'index
39
03:13
Fin de la liaison des données
BASE DE DONNÉES À L'ECOUTE DES ÉVÉNEMENTS.
40
07:08
Création de la fonction de mise à jour
41
04:14
Base de données à l'écoute avec "onSnapshot"
42
08:08
Création du Switch
ANIMER DYNAMIQUEMENT UN GRAPHIQUE
43
03:15
Animation de la sélection "enter"
44
01:10
Animation des Updates
PROJET : GRAPHIQUE CIRCULAIRE
45
02:07
Mise en place du dossier et des CDN
46
06:06
Mise en place de l'interface avec Bootstrap
47
02:15
Création de la base de données
48
05:15
Liaison des inputs avec notre database
49
07:11
Mise en place du cadre SVG + Méthode Pie et Arc.
50
04:48
A l'écoute avec onSnapshot et création de la fonction de MAJ
51
03:10
Création du graph circulaire avec les données de la base de données
52
05:05
Mise en place des couleurs
53
01:39
Enlever des éléments dynamiquement avec la sélection "Exit"
54
04:54
Animer la sélection "Enter"
55
04:17
Mise en place des légendes
56
03:41
Supprimer un élément au click
57
03:47
Quand utiliser les fonctions fléchées VS fonctions classiques

D3.js : Visualisation de données

49.00 €

close if for show price

  • langues fr