Analyse de données et réalisation d’un site web en D3.

En 2^ème année d’études en bachelor d’ingénierie des médias, un cours sur la visualisation des données est enseigné. Dans ce cours d’introduction, plusieurs objectifs sont demandés afin de pouvoir en avoir une vue générale :

• Connaître différentes technologies de visualisation de données dans un navigateur Web.
• Connaître la pyramide de productivité de ces technologies.
• Comprendre le fonctionnement du langage SVG et de l’API Canvas avec JavaScript.
• Utiliser la librairie d3.js pour créer des visualisations de divers types.
• Utiliser Javascript avec cette librairie pour ajouter de l’animation et de l’interaction.
• Utiliser une librairie de cartographie en ligne (ex. Leaflet).
• Connaître quelques plateformes de données ouvertes et les formats principaux en vigueur.
• Utiliser des services de données ouvertes pour créer des visualisations.
• Utiliser le “scraping” pour les données “fermées”.

Pour mettre en pratique ce qui est demandé, un projet sur un sujet libre est à réaliser en binôme et à rendre au format fini. Il est évalué de la manière suivante :

• Thématique (10%)
• Wireframe (10%)
• Présentation (20%)
• Site web (60%)

Mon binôme et moi-même sommes des passionnés du Japon. C’est pourquoi il nous ait apparu évident de le choisir comme thème. Une fois ce dernier choisi, il a fallu trouver des données dessus. Bien que le Japon soit à la mode et de plus en plus ouvert au reste du monde, nous avons quand même dû réajuster notre wireframe à plusieurs reprises par manque de données existantes. Malgré tout, nous avons pu construire une histoire cohérente à travers diverses données telles que la floraison des sakuras, des haïkus (poèmes japonais), des kanjis (3^ème alphabet japonais) et des ramens (plat typique japonais) narrée par un haijin (écrivain de haiku) qui accompagne le lecteur tout au long de son aventure.

Etant le deuxième projet en D3 que j’ai dù réaliser, mon défi personnel a été de construire ce site uniquement en D3. Malgré qu’il aurait, dans certains cas, été plus facile de programmer en Javascript, le fait d’avoir insister en D3.JS m’a permis d’être beaucoup plus à l’aise avec ce langage et d’avoir pu rendre un projet maîtrisé du début à la fin.

Ce travail a été pensé pour une visualisation sur ordinateur, il n’est donc pas responsif. De ce fait, l’affichage sur tablette ou téléphone portable n’est pas optimal.

Ce projet s’est achevé en juin 2023 sur la note de 5,6 permettant la réussite du module.