$ 50.00

Tuto La visualisation de données avec D3.js avec JavaScript

$ 50.00

  • Une formation vidéo de 4h25m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

Dans cette formation en vidéo vous allez 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 !

Au programme de ce tuto visualisation de données avec D3.js

Nous allons lier trois domaines, les données, le Design, et la logique avec JavaScript. Grâce à ce cours en ligne vous allez apprendre :

  • La Visualisation de données,
  • Créer des Graphiques à partir de données,
  • Combiner données, design et logique.
  • Apprendre à utiliser Firebase,
  • Animer vos données,
  • Créer un projet concret.

Que vous aillez besoin de créer un graphique, un cartogramme, un dendrogramme ou des représentations sous forme d'arbres, de cascades ou de diagrammes à 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ées à celle-ci. En effet on va pouvoir lier toutes sortent d’interactions avec l'utilisateur afin de rendre le tout encore plus plaisant et interactif.

Les fichiers de travail sont fournis.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur le cours. 

Table des matières de cette formation JavaScript (durée : 4h25m)

  • Introduction
    • Introduction 00:03:21
    • Éditeur de texte 00:00:53
  • Rappel SVG
    • Que sont les SVG ? 00:04:14
    • Créer des formes en SVG 00:05:58
    • Créer des formes 2 + Path 00:05:58
  • Les bases de D3
    • Mettre en place D3 00:02:55
    • Select et SelectAll 00:03:21
    • Ajouter avec "append" 00:02:10
    • Enchaîner les méthodes + la méthode "attr" 00:06:27
    • Les groupes SVG 00:01:51
    • Lier les données avec "data" 00:03:46
    • Exercice "Cercle" 00:09:11
    • La méthode "enter" 00:04:46
    • Utiliser les données d'une source externe 00:01:54
  • Créer notre premier Graphique
    • Mise en forme des données et utilisation de l'index. 00:08:22
    • Créer une échelle avec "scaleLinear" 00:03:19
    • Comprendre les échelles (Scale). 00:02:56
    • Créer l'échelle pour l'axe "X" 00:07:07
    • Min, Max et Extent 00:02:41
    • Ajouter notre cadre SVG directement dans le JavaScript 00:02:10
    • Mettre nos éléments dans un groupe et le décaler 00:05:39
    • Création des Axes 00:05:07
    • Inverser nos éléments et l'axe Y 00:06:22
    • Styliser les "Ticks" 00:04:09
  • Découvrons quelques méthodes et concepts de D3
    • Créer des lignes 00:09:19
    • Projet : Créer un graphique à ligne 00:07:37
    • Projet : Création des axes 00:11:08
    • Projet : Mise en place de la ligne 00:04:21
    • Utiliser des couleurs avec D3 00:01:29
    • Utiliser des palettes 00:06:07
    • Créer des aires 00:03:00
    • Créer un graphique circulaire 00:07:41
  • Animations avec D3
    • Créer une animation avec D3 00:05:19
    • Projet d'animation 00:03:46
    • Projet d'animation partie 2 00:08:33
    • Interpolation et Tweens 00:04:55
  • Créer notre base de données avec Firebase
    • Création de notre base de données 00:05:03
    • Liaison de notre firestore avec l'index 00:02:13
    • Fin de la liaison des données 00:03:13
  • Base de données à l'écoute des évenements.
    • Création de la fonction de mise à jour 00:07:08
    • Base de données à l'écoute avec "onSnapshot" 00:04:14
    • Création du Switch 00:08:08
  • Animer dynamiquement un Graphique
    • Animation de la sélection "enter" 00:03:15
    • Animation des Updates 00:00:00
  • Projet : Graphique Circulaire
    • Mise en place du dossier et des CDN 00:02:08
    • Mise en place de l'interface avec Bootstrap 00:06:06
    • Création de la base de données 00:02:15
    • Liaison des inputs avec notre database 00:05:15
    • Mise en place du cadre SVG + Méthode Pie et Arc. 00:07:11
    • A l'écoute avec onSnapshot et création de la fonction de MAJ 00:04:48
    • Création du graph circulaire avec les données de la base de données 00:03:10
    • Mise en place des couleurs 00:05:05
    • Enlever des éléments dynamiquement avec la sélection "Exit" 00:01:39
    • Animer la sélection "Enter" 00:04:54
    • Mise en place des légendes 00:04:17
    • Supprimer un élément au click 00:03:41
    • Quand utiliser les fonctions fléchées VS fonctions classiques 00:03:47



Formateur : Enzo Ustariz

Enzo Ustariz a publié 22 tutoriels et obtenu une note moyenne de 4,9/5 sur 336 tutoriels vendus. Voir les autres formations de Enzo Ustariz

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    JavaScript
  • Quel est le niveau requis pour suivre ce tuto ?
    intermédiaire
accédez à plus de 1102 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données