Global Emissions Observer (GEO)

---

This visualization was created by two students during the Open Data lecture. The project was conducted without a data coach. We use the data from gapminder.com. a portal that promotes factual education of the population through data. With our visualization we show how countries compare to each other in terms of emissions.

📝 Table of Contents

• 📝 Table of Contents
• 🧐 About
• 🏁 Extend the project
  • Add a new Dataset
  • Change the ranking system
• ⛏️ Built Using
• ✍️ Authors

🧐 About

The project displays data from gapminder.com as an area cartogram. Here you can select a category, out of which all relate in some form to the emissions of a country. The most interesting thing is that it always depends on how you look at the data. For greenhouse gases in absolute numbers, the most populous country, China is the worst. But when you look at the figures per inhabitant, the picture looks very different. Rich countries like Switzerland, for example, are no longer in a good position. If you now look at the whole per capita figure in terms of gross domestic product, the rich countries are in a good position again. Our conclusion from this project is that data can always be chosen in a way that serves the purpose or argument that is needed.

🏁 Extend the project

To adapt the project for your needs you need to clone it to a local repository and make the changes there. You then can upload it to a webserver where you can see your new project.

Add a new Dataset

1. Add the .csv file to the data folder. The file should be formatted such that the first row are all the years of the dataset and the first column is the country's name.
2. Then extend the loadData.js in the js folder. In the array datasetsInformation (which you find here) all the datasets to be loaded are stored.

   let datasetsInformation = [ {
       "src": "../data/co2_emissions_tonnes_per_person.csv",
       "title": "CO2 Emissions in tonnes per person",
       "units": "tonnes per capita",
       "id": "co2-t-per-capita"
   } ..., 
   // Your new Dataset
   {
       "src": "../data/<name-of-the-file>.csv",
       "title": "<The title that should be displayed>",
       "units": "<The units used to describe the data values>",
       "id": "<A unique Id not used by any other Dataset>"
       "isMoreBetter": <true|false> //Indicates if a bigger value is better than a smaller. Defaults to false.
   }

Change the ranking system

To calculated the best and worst part of the country, the project calculates a rankingscore for every country and datapoint. The score is made up by a factor of values including the score and how many countries there is data for in this country. The standard formula we used was

    ((numberOfCountries*0.5)/rank)*10 * Math.log(numberOfCountries)/Math.log(50) * normalizedMean / normalizedValue;

with the normalized Mean and Value are calculated the following way:

(value - min)/(max-min) * (2 - 0.5) + 0.5

If the dataset is a dataset, where a bigger value is better the last part of the formula is inverted. This formula can be customized in the Ranking.js file, which is located in the js folder. The score calculation is made in the method getRankingScore, so at best you only customize this.

⛏️ Built Using

• D3.js (v4)
• jQuery
• Bootstrap
• Topojson (v3)
• Cartogram Chart
• d3 Simple Slider

✍️ Authors

• Adrian Joerg (adrian.joerg@students.unibe.ch)
• Olivier Staehli (olivier.staehli@students.unibe.ch)