Introduction
- Introduction
- Éditeur de texte
- Ressources
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
