✖
✖
L’application web développée a pour but de permettre à l’utilisateur de visualiser différents jeux de données pour déceler une dépendance entre ces données. L’application affiche quelques indicateurs de croissance et d’éducation sur deux cartes du monde juxtaposées. Il est possible d’interagir avec les cartes, entre autres, l’application permet de sélectionner un pays, l’année à laquelle les données sont affichées. Une liste exhaustive des fonctionnalités implémentées sont dans la section spécifications.
Les données géographiques ont été prises de www.naturalearthdata.com, les données sont présentes sur le site sous le format shapefile, la projection utilisée est la WGS84, celle utilisée par le GPS. Ces données géographiques ont été converties dans le format geoJson, plus adapté aux applications webs. Un extrait de la licence est présent dans le répertoire license fourni avec l’application.
Les indicateurs, quant à eux, ont été pris de databank.worldbank.org, les données sont présentes sur le site sous le format csv, elles ont été converties au format Json. Les données sont hétérogènes, néanmoins il est possible de voir une corrélation entre celles-ci quand affichées sur la carte grâce au système de gradient de couleurs implémenté. En effet toutes les données, lorsqu’elles sont affichées sur la carte, prennent un continum de couleur allant du blanc: la valeur la plus faible, au rouge: la valeur la plus forte.
En plus des traitements effectués pour convertir les données vers un format web, les données sont stockées dans un format précis, simple, garantissant la facilité de l'ajout ultérieur de nouveaux jeux de données. Toutes les données ont un format précis, et lors du démarrage de l’application, celle-ci charge toutes les données présentes dans le répertoire data, et les ajoute à l’application de visualisation.
Certaines des données choisies sont annuelles: le GDP, alors que d’autres données sont triennales. Il a fallu effectuer un traitement sur la barre de temps, afin de gérer les écarts de temps entre les données. Il a été choisi de rapporter les données à la date la plus proche de celle sélectionnée par l’utilisateur, par exemple, les scores Pisa affichés pour l’année 2013, sont ceux de l’année 2012.
Une fonctionnalité de l’application permet de comparer un pays aux autres sur les indicateurs affichés sur les cartes, la différence est montrée par un gradient qui va du rouge: le pays qui a le score le plus inférieur, jusqu’au vert le pays qui a le score le plus supérieur. Le blanc étant la valeur neutre du pays comparé.
Le choix des technologies a été dirigé par l’esprit du projet : le libre.
Parmi les technologies choisies:
leaflet: librairie pour la représentation des données géographiques.
Leaflet.Sync: librairie qui permet de synchroniser les cartes leaflet https://github.com/jieter/Leaflet.Sync
rainbowvis-js: librairie qui permet d’afficher des gradients https://github.com/anomal/RainbowVis-JS
La première interface de l’application contient deux cartes juxtaposées, celles-ci sont synchronisées, les déplacements dans la carte, le zoom, la sélection d’un pays vont de pair sur les deux cartes.
Les cartes ont des couches différentes, chaque couche représente des données différentes. Ainsi, il est possible de sélectionner des jeux de données différents sur chaque carte. Les cartes respectent le même jeu de couleurs.
L’application web contient une barre de navigation temporelle. La date sélectionnée s’applique sur les deux cartes, avec une particularité lorsque les données pour une année sélectionnée ne sont pas présentes. Le choix a été fait d’afficher les données à la date la plus proche de celle voulue par l’utilisateur.
L’application donne à l’utilisateur la possibilité de choisir la granularité du gradient. La carte peut afficher de deux couleurs: granularité la plus faible à dix couleurs; voire même -- à la granularité la plus forte -- d'avoir un continum de couleurs sans catégorisation.
Deux barres sont présentes dans l’application, chaque barre permet de déterminer la granularité du gradient de la carte qui lui est au-dessus.
Lors de la sélection d’un pays, les valeurs des indicateurs sont affichées sur un tableau. Il est possible de sélectionner jusqu’à deux pays, dans ce cas, le tableau contient deux colonnes, chaque colonne représente les données d’un pays. Il est aussi possible de supprimer un des pays sélectionnés pour en sélectionner un autre.
Lors de la sélection d’un pays, deux cases à cocher apparaissent sur le tableau récapitulatif. Ces deux cases permettent d’activer la fonctionnalité de comparaison visuelle. La case de gauche (respectivement droite) active la comparaison sur la carte gauche (respectivement droite). La sémantique des couleurs change, quand cette fonctionnalité est activée, les couleurs sont attribuées en fonction de la proximité, par rapport à l’indicateur choisi, entre les deux pays. Plus les deux pays ont des valeurs différentes, plus la couleur est foncée, et vice-versa.
Cette fonctionnalité ayant pour but de permettre une analyse plus fine des données, elle est utilisée de pair avec la granularité. Plus la granularité est faible, plus le gradient de couleurs va se resserrer autour de la valeur du pays choisit; c'est à dire que la carte sera de plus en plus sensible à de faibles variation de valeurs.
Nous avons fait le choix d'utiliser une échelle exponentielle au lieu de linéaire pour faire varier le resserrement du gradient de couleur autour de la valeur neutre. Cela permet à la plus forte granularité de voir visuellement des différences très subtiles; et à la granularité la plus faible d'avoir une comparaison visuelle "binaire".
D'un point de vue haut niveau, l'application est architecturée autour des deux objets carte -- map -- de Leaflet.
Toutes les réponses aux interactions de l'utilisateur vont modifier différents paramètre qui sont ensuite utilisés pour redessiner les cartes. Nous utilisons judicieusement par ce mécanisme l'attribut style du layer geoJson. Cet attribut est en fait une fonction qui renvoie pour une feature (géographique) donnée ses informations de style (couleurs, traits, etc.)
Après avoir changé les états des paramètres, il suffit de demander à Leaflet de recolorer la carte.
Cette architecture nous as permis d'utiliser de manière très efficace Leaflet. Nous avons en effet un seul objet layer qui est restylisé en fonction de l'état de l'application. Tous les jeux de données disponibles sont en fait des layers "fantômes", vides. Ils servent simplement à piloter la fonction de style utilisé pour colorer la carte.
De nombreux paramètres sont en fait des fonctions : nous tirons parti des spécifités du langage JavaScript.