Dataviz

Contexte

Cette Situation d'Apprentissage Evaluée (SAE) se nommait “Concevoir des visualisations de données pour le web et une application interactive”. Elle a eu pour but de nous faire travailler sur les données afin d’apprendre à les manipuler et à les trier pour répondre à une problématique donnée. Mon camarade et moi avons choisi de traiter la question suivante : “Dans quelle mesure de meilleures infrastructures cyclables diminuent elles l’accidentologie à vélo ?”. Nous avons donc procédé à l'analyse des données dans un premier temps, puis à la réalisation de la maquette sur Figma, puis de l'intégrer. Pour finir, nous avons effectué tous les tests d'accessibilité : lihthouse, w3c...

Contribution

Pour cela, j’ai dans un premier temps tente de répondre moi-même à la question en listant mes arguments. Ensuite, j’ai regardé toutes les bases de données à notre disposition et j’ai pu retrouver certains de mes arguments. J’ai pris la décision, avec mon camarade, de diviser la page en 3 parties : en France, le Plan Vélo, en Bretagne. Cela nous semblait plus pertinent pour bien répondre à la question. Avec les informations récoltées, j’ai choisi les données les plus importantes et qui répondaient le mieux à la question. Une fois les données choisies, j’ai choisi un type de graphique mais aussi une question pour représenter chacun des graphiques , 11 au total. J'ai par exemple choisi de réaliser un histogramme pour comparer le nombre d’accidents en France métropolitaine de 2015 à 2022. Cela permet une vision claire et une analyse comparative facile. A la suite de cela, j’ai entamé la partie la plus longue et la plus fastidieuse, le tri des données. Une fois le traitement des données fini, je me suis penchée sur la maquette. Je l’ai réalisé sur Figma. J’ai choisi la couleur verte comme couleur dominante pour rappeler la nature, l’écologie. A noter que j’ai testé le contraste de toutes les combinaisons de couleurs afin de m’assurer de l’accessibilité de mon site web.

De plus, j’ai pris la décision de réaliser un one page, permettant la visualisation globale des données et faciliter la navigation et la comparaison des données entre elles. J’ai aussi choisi d’ajouter du texte pour aérer la page et créer des coupures.Tout d’abord, j’ai pris en main les librairies Chart.js et D3.js en m’exerçant sur les exercices simples proposés sur les sites respectifs. En fois avoir compris les principes, j’ai réalisé chacun des graphiques qui allaient composer ma datavisualisation un par un sur des fichiers distincts. Cela m’a permis de pouvoir tester chaque graphique de manière individuelle sans impacter les autres graphiques. Une fois un graphique abouti, je l’intégrais à la base HTML codée au préalable. J’ai toutefois eu des difficultés avec les imports des données ce qui m’a contraint à réduire le niveau d’interactivité de certains de mes graphiques.

Une fois le développement web fini, j’ai pris soin de tester le lighthouse ainsi que le W3C, m’assurant ainsi des performances et du respect des règles d’accessibilité notamment. Enfin, j’ai fini par minifier le CSS et le Javascript. En effet, minifier permet de réduire un fichier et donc d'optimiser le temps de chargement. Dans l’ensemble, j’ai plutôt apprécié cette SAE car nous avons abordés des choses que nous ne connaissions pas à savoir les graphiques, mais aussi l’interactivité de ces derniers. Néanmoins, j’ai eu des difficultés à intégrer des fichiers json à mes graphiques pour ce qui est des données. J’ai donc dû les importer de manière statique. Ceci est un point sur lequel je vais travailler car cela est beaucoup plus intéressant de traiter les données de manière dynamique.

Difficultés

Il est vrai que j’ai eu des difficultés à intégrer des fichiers json à mes graphiques pour ce qui est des données. J’ai donc dû les importer de manière statique. Ceci est un point sur lequel je vais travailler car cela est beaucoup plus intéressant de traiter les données de manière dynamique.