Informations sur le Projet

  • Catégorie: JavaScript
  • Type: Projet Scolaire
  • Date du Projet: 5ème année université
  • Outils: JavaScript, CSV, Xampp.
  • URL du Projet: Lien

Description

D3.js est une bibliothèque graphique JavaScript permettant l'affichage de données numériques de manière graphique et dynamique. Elle est cruciale pour la conformité aux normes W3C, utilisant les technologies SVG, JavaScript et CSS pour la visualisation de données.

Notre professeur nous a assigné à chacun un sujet de discussion pour apprendre la bibliothèque D3.js et l'utiliser à cette fin.

J'ai divisé le projet en 4 grandes parties :


  • Téléchargement des données : Pour mon projet, j'ai choisi l'évolution du coronavirus dans 7 pays et j'ai stocké mes données dans un fichier CSV. En utilisant la commande "console log(data)", j'ai remarqué que chaque donnée était stockée comme une chaîne de caractères, donc j'ai dû définir le type de chaque ligne.

  • Utilisation de D3.nest : L'objectif est de regrouper chaque pays en une seule ligne et de regrouper tous les points de ce pays.

  • Affichage de plusieurs lignes : Pour afficher plusieurs lignes, nous pouvons utiliser un "data join".

  • Couleurs différentes pour chaque ligne : Pour cela, je ne peux pas simplement utiliser un fichier CSS, sinon j'aurais une seule couleur pour toutes les lignes. J'ai donc dû chercher une solution et j'ai découvert que cela pouvait être fait en utilisant "colorScale" et en choisissant parmi une palette de couleurs multiples.

Conclusion

Travailler avec D3.js a été un défi pour moi, non seulement en raison du délai, mais aussi parce que j'ai appris une compétence par moi-même tout en respectant ce que je pouvais accomplir en peu de temps. Même si je considère que cette bibliothèque n'est pas la seule solution, car il existe plusieurs solutions faciles et flexibles, le but était d'explorer la variété des solutions pour construire une vue graphique sur le web, et cette bibliothèque fait très bien son travail.

URL du Projet

Télécharger le code source

NB : Le code source doit être placé dans un serveur.