This site's goal is to develop an interactive Web application that allows the user to explore and take conclusions about the production of renewable energies and the ecologic footprint of each country. In order to do so, we put it in relation with some factors, like GDP, IHD or total population. You can read more about this on the about the data section


We performed all data treatment using R language. So, with the R scripts we generate the final datasets (csv and json) that are the ones that we use on the work. We do minor data changes in this application in order to format numbers or filter some data. Doing so, we are not going to onerate the user frontend experience with backend work.

More about the data treatment:

  • We have 40 datasets that turns into 4.

  • In order to do so we cleaned and unified the data, merging by the country symbol and year.
    • There was lots of missing data since some countries just became countries recently, or the mesure was not registrated, so it was challenging to treat missing data.

  • In our data it was also general information (ex: european union) or colonies.
    • As we are talking about countries and continents in this work, we have to clean the general information and unify the colonies with their origin country.

  • We also did some statistical work to show the information in the main page, over the world map.

You can see the scripts here


Architecture


The image is a drawning of our architecture.

It starts with the data being processed by R scripts, as already explained in the session 'Data Processing Performed'.

Finally, after having the final datasets we read them in our frontend application, we do all frontend work using HTML, CSS, JS and the following libraries:

  • D3.js (v5)
    • Reason of choice: It's a light library for data visualization and there are lots of documentation. Also, it has a strong community.

  • Bootstrap (v3.1)
    • Reason of choice: It's a well documented and known library for frontend. Also, one member of the group have already did some works using bootstrap.

  • jQuery.js (v2.2)
    • Reason of choice: It's a well documented and known library for communication backend/frontend. Also, three member of the group have already did some works using jquery. In addition, using it the code gets more legible and encapsulated.

  • FontAwesome (v5.11)
    • Reason of choice: It's a well documented and known free icon library. Also, one member of the group have already known this library. In addition, using it with bootstrap is really fluid.

  • Google Fonts (Roboto)
    • Reason of choice: We chose a different font than the browser defaults that fits better with the layout.



DORGUEIL Corentin

NOGUEIRA Catarina

PAGLIUCA Rosetta

SERVETTAZ Morgan

SEVERIL Leonardo