Mini-rapport

Pour notre projet de visualisation interactive de données, nous avons choisi de nous intéresser au domaine de l'énergie en France et dans le monde. L'objectif étant de permettre à l'internaute de se rendre de compte de l'évolution de la conscience écologique au niveau de la production d'énergie. Pour cela, l'internaute a à disposition 2 pages sur lesquelles il peut interagir. Sur la page concernant la France, ce dernier peut faire évoluer le temps grâce à un curseur qui permet de faire défiler les années. Il peut également cliquer sur une ou plusieurs régions, afin de visualiser les détails de production pour ces régions. Il peut également choisir quel type d'énergie il veut visualiser sur la carte. Sur la page monde, il peut également faire défiler le temps, et décider de ne cocher que certains pays à afficher.

Source des données

Les données nécessaires proviennent de différents site :

• Le site opendata.reseaux-energies.fr pour les donneés liées aux différentes sources de production en France par région et par année. Ces données ont pour source directement GRTgaz, RTE et Teréga et sont sous license ouverte.


• Le site energydata.info pour les donneés liées à la production d'électricité au niveau mondial. Ces données ont bien entendu été utilisées pour la page "Monde".

Traitements opérés

• Formatage des données pour la vectorMap :

  
  Les données initiales étaient présentées sous la forme d'entrées pêle-mêle contenant de nombreuses données; certaines dont nous avions en effet besoin, d'autres qui ne présentaient pas vraiment d'intérêt pour notre démarche (comme la forme de la région svg sous format SVG par exemple). Le premier traitement opéré a donc été de filtrer ces données superflues. Ayant donc pris des données le noyau qui nous intéressait, nous avons ensuite dû établir la correspondance entre ces données et le format de données accepté par JsVectorMap. Si la transformation d'un type de données peut être faite sans trop de problèmes directement en temps réel pendant le fonctionnement de l'application, nous avons quand même décidé de faire un premier croisement des données régionales de l'INSEE avec la nomenclature utilisée par JsVectorMap, afin de ne pas faire de traitements trop lourds durant le fonctionnement de l'application. Le code INSEE 52, correspondant au Pays de la Loire, était ainsi exprimé avec le sigle "FR-R" pour JSVectorMap. La dernière étape du traitement a été de trier les données par année, pour rendre leur exploitation plus facile lorsque l'utilisateur intéragisait avec ce critère. Les champs des données initiales ont également été renommés pour adhérer aux conventions de nommage que nous nous étions fixés. L'intégralité du script utilisé pour la transformation peut être trouvée sous le nom de "scrap-region-data.js". (attention, ce script nécessite NodeJS).



• Traitements opérés pour la partie Monde :

  
  Dans un premier temps, nous avions prévu d'utiliser des données depuis deux sources différentes :
  - un CSV qui contient des données sur le montant, en dollars, investis dans le renouvelable, que nous comptions utiliser pour la grosseur des points.
  - une API qui retourne du JSON, et qui contient toutes les données que nous avons finalement utilisées sur la production d'électricité. En utilisant la production d'électricité renouvelable en Y, le pourcentage d'électricité renouvelable produit par rapport à la production totale d'électricité en X, la production totale d'électricité pour la taille des points, nous nous sommes rendus comptes que nous avions un résultat déjà très parlant, et que nous n'avions donc pas besoin de la première source de données.
  
  Nous avons donc utilisé l'API pour récupérer un JSON contenant tous les pays, avec tous les années : Dans le code, le fichier est ensuite chargé une fois lors du chargement de la page, et est stocké dans une variable Javascript. A chaque fois que l'utilisateur change l'année ou un pays, la variable est parsée pour afficher les bonnes données.
  
  Nous avons aussi eu besoin d'utiliser l'API pour créer un autre JSON contenant cette fois uniquement les pays, avec leur nom et leur code, afin de gérer le select contenant la liste des pays. Cette liste ne contenait pas les continents, et nous avons donc trouvé un CSV contenant les codes des pays, et leur continent. Nous avons converti ce CSV en JSON, puis parsé les deux fichiers JSON, afin d'aboutir à ce que nous avons maintenant : un JSON contenant nom du pays, son code, et son continent. C'est grâce à cela que nous avons pu avoir les couleurs des continents sur le graphe.

Architecture

Le projet est découpé en plusieurs parties :

• Un dossier pages contenant nos 3 pages HTML
• Un dossier js découpé en sous dossier pour chaque page afin de ne pas se mélanger
• Même idée de découpe pour le dossier css
• Un dossier assets contenant dans son sous répertoire data, les données préprocéssées utilisées ; et dans images, les images utilisées

Choix des technologies

• Pour la carte de France, nous avons utilisé la librairie JVectorMap qui permet d'afficher facilement un code couleur, une légende, et de gérer les interactions avec une carte.
• Pour le graphe "camembert" nous avons utilisé Chart.js.
• Pour la visualisation de la partie monde, nous avons utilisé Highcharts.