Rapport: Project Open Data

Equipe

• CASTELLANOS-PAEZ Andres
• MICHAUD Marius
• PODLEWSKI Alexandre
• PRUNAUX Hugo

Source de Données

Nous avons cherché à voir les inégalités dans le monde. Pour cela, nous avons choisis, à titre d'exemple, les jeux de données suivantes au format CSV:

• Population mondiale
• Revenu National Brut
• Espérance de Vie à la naissance
• Emission de C02

Source: Banque Mondiale
License: CC BY-4.0

Traitement des Données

Les données choisies contiennent toutes des valeurs pour chaque année (de 1960 à 2017 par exemple). Le traitement de ces données ce fait à une année fixée, de la manière suivante:

1. Calcul des quantiles (dépendant du nombre de couleurs) pour chaque année. A chaque quantile est associé une couleur.
2. Chaque valeur se voit attribuer la couleur correspondant à son quantile.

Les données initiales on également été transformées afin de faciliter leur traitement:

• Ajustement des id de pays entre la liste des noms de pays et la liste des frontières
• Rectification de certains noms de pays qui ne s'affichaient pas correctement
• Les noms des pays dans les données de la banque mondiale sont corrigés par rapport aux noms des pays utilisés pour le dessin de la carte afin de pouvoir réaliser la correspondance dans l'algorithme
• Colonnes des fichiers CSV renommées pour une manipulation plus simple

Fonctionnement de l'application

L'application permet de voir différents jeux de données sur la Terre entière.
La vision de globe ne permettant de voir qu'au plus la moitié des données, le bouton permet de passer à une vue planaire.

En mode globe, il existe une rotation de la terre automatique. Cette rotation est stoppée à chaque clic sur le globe puis redémarre automatiquement au bout de quelques instants. Il est possible de stopper complétement la rotation en cliquant sur le bouton en haut à droite du cadre de la carte. Elle peut être ensuite redémarrée en cliquant sur

Les quatres boutons au dessus de la légende permettent de sélectionner le jeu de données qui nous intéresse.

Avec la molette de la souris, il est possible de zoomer sur le globe ce qui peut-être utile pour visualiser les pays de petites tailles. De plus sur le mode plan, on peut déplacer la carte via un "drag" ce qui est indispensable lors du zoom.

En passant la souris sur les pays on visualise la valeur qui leur est associée pour le jeu de donnée courant, on peut sélectionner de manière permanente un pays en cliquant dessus. La sélection peut être annulée en cliquant en dehors de tous les pays.

En bas de page le slider permet de choisir l'année courante pour notre jeu de données de 1960 à 2017. Pour certains jeux de données ne couvrant pas toute la période de 1960 à 2017 il est normal de constater des années sans données. Le bouton en bas de la page permet de faire défiler les années pour constater l'évolution de la donnée représentée.

Enfin, le cadre color, permet de choisir une couleur de base convenant à l'utilisateur pour le dégradé de couleurs de la carte. Le bouton "Invert colors" et le slider de Luminance permette de raffiner ce choix de représentation.

Choix des technologies

Une grande partie du code JavaScript, HTML et CSS de l'application ont été réalisés pour les besoins du projet. Cependant nous avons également utilisés les librairies et technologies suivantes :

• Chargement et stockage des données

  Pour charger les données à partir des fichiers TSV et CSV qui les contiennent nous utilisons la librairie D3.js qui permet de les transcrire directement dans un objet JavaScript très simplement

• Traitement des données

  La librairie TopoJSON permet l'interprétation des données de topologie chargées par D3.js qui sont en effet stockées dans un format particulier non redondant.
  Les quantiles sont calculés grâce à une librairie de math.

• Fonctionnalité du globe

  A partir des coordonnées des frontières, la librairie d3-geo permet de faire la projection de ces coordonnées sur un globe et de gérer complètement le dessin en fonction de la vue courante. Le code duquel nous sommes partis est le suivant.

• Gestion des couleurs

  Afin de ne pas imposer à l'utilisateur une couleur qu'il ne perçoit pas bien, nous avons laissé la possibilité de choisir la couleur du dégradé via cette librairie.

• Style de l'application

  Les icônes sont tirées de Font Awesome pour leur simplicité d'utilisation et leur légereté.
  BootStrap a également été utilisé pour l'apparence du site.