Web

5$/h – Développement web pour la visualisation de données

Objectifs:  

Ce cours vous permettra de maîtriser des outils et bibliothèques modernes tels que D3.js et Chart.js, ainsi que l’intégration de visualisations dans des applications basées sur React et Vue.js.

Contenu du cours:  

Séance 1 : Introduction à la visualisation de données et D3.js (3 heures)

• Théorie de la visualisation de données
  • Importance et applications
  • Principes de base de la conception visuelle
  • Types de données et choix des graphiques appropriés
• Introduction à D3.js
  • Présentation et installation
  • Sélection et manipulation des éléments DOM
  • Liaison des données aux éléments

Séance 2 : Création de visualisations avec D3.js (3 heures)

• Visualisations de base avec D3.js
  • Graphiques à barres, linéaires et circulaires
  • Utilisation des échelles et des axes
  • Formatage des données
• Interactivité avec D3.js
  • Ajout d’événements (mouseover, click)
  • Transitions et animations de base

Séance 3 : Visualisations avancées et bonnes pratiques avec D3.js (3 heures)

• Visualisations complexes
  • Nuages de points, diagrammes hiérarchiques, cartes choroplèthes
  • Gestion des projections géographiques
• Optimisation et performance
  • Gestion des grandes quantités de données
  • Bonnes pratiques de codage avec D3.js
• Préparation des données
  • Nettoyage et transformation des données avec JavaScript

Séance 4 : Introduction à Chart.js (3 heures)

• Présentation de Chart.js
  • Avantages et cas d’utilisation
  • Installation et configuration de base
• Création de graphiques avec Chart.js
  • Graphiques linéaires, à barres, circulaires, radar, etc.
  • Personnalisation des options de graphiques
• Interactivité et animations
  • Ajout de légendes, info-bulles
  • Animation des graphiques lors du chargement ou de la mise à jour

Séance 5 : Chart.js avancé et comparaison avec D3.js (3 heures)

• Personnalisation avancée
  • Création de plugins personnalisés
  • Gestion des données en temps réel
• Comparaison entre D3.js et Chart.js
  • Quand utiliser l’un ou l’autre
  • Intégration conjointe dans un projet
• Exportation et déploiement
  • Préparation des visualisations pour le web
  • Considérations pour la compatibilité entre navigateurs

Séance 6 : Intégration des visualisations dans React et Vue.js (3 heures)

• Introduction à React et Vue.js
  • Présentation rapide des cadriciels
  • Concepts clés pour l’intégration des visualisations
• Intégration avec React
  • Création de composants pour D3.js et Chart.js
  • Gestion de l’état et du cycle de vie des composants
• Intégration avec Vue.js
  • Utilisation des directives et des composants Vue.js
  • Communication entre les composants et gestion des props
• Bonnes pratiques et ressources pour aller plus loin
  • Structuration du projet
  • Optimisation des performances dans les cadriciels

Préalables

Pour profiter pleinement de cette formation, il est recommandé d’avoir :

• Connaissances de base en programmation web :
  • HTML, CSS et JavaScript
  • Notions de programmation (variables, fonctions, boucles, conditions)
• Compréhension de base des formats de données :
  • Manipulation de fichiers CSV et JSON
• Intérêt pour la visualisation de données