The World Happiness Report is a landmark survey of the state of global happiness, including over 150 countries. Every year, a new report is published that gives countries a happiness ranking based on a number of factors. However, the report consists over 200 pages and can for some readers be unclear.
This interactive web application aims to clearify the world happiness ranking among countries by combinding the world happiness data from the year 2015 up and including 2020, with easy to use and understandable charts and maps built with D3 and THREE.js.
- Installation
Install system dependencies Install dependencies Run project - Usage
- Technologies used
- Acknowledgments
The following instructions walks you through the installation process. For this installation process, it is assumed you have basic experience with a terminal or the windows command prompt.
Installing the application is as simple as downloading the latest release and unzipping the files in a directory of choice. You can now run the index.html in your preferred browser.
You can also build the project yourself. The following steps will walk you through this process.
In order to run this project, you must have Node.js installed. We recommend installing the long time support version of Node, v14.15.x, since previous Node versions might not work.
You can check your if Node is succesfully installed by running the command
node -vinside a terminal window or command prompt.
To install the required packages, use must ensure that you have NPM installed. NPM comes typically bundled with Node, meaning once Node.js is installed, NPM will also be installed.
You can check your if NPM is succesfully installed by running the command
npm -vinside a terminal window or command prompt.
You can clone the repo with the command git clone https://github.com/leonardomathon/interactive-world-happiness-visualization. This will create a directory with the name of this repo and start downloading.
Once the cloning process has completed, navigate to the cloned repository and open a terminal or command prompt. To install all the required dependencies, use the command npm install. If succesful, this will create a folder called node_modules, containing all of the dependencies
If everything went right, you are now able to start the project using npm run start in the project root. This initializes webpack and will start a live server at localhost:8080.
Alternatively, you can use the command npm run build in the project root. This command starts the build process, which bundles all the source files and spits out a static .html file, together with two .js files containing all our written code, as well as all the dependencies used. The static .html file can be found at dist/index.html and can easily be opened using a modern webbrowser.
TODO
This project is mainly build with webpack for bundling javascript files and assets, D3 for drawing and displaying graphs, and THREE.js, a lightweigt, 3D librabry with a default WebGL renderer, used to render the main world globe. Other noticable dependencies are Hotkeys.js, a library for capturing keyboard inputs, jsPanel4, a library to create floating panels, hints, modals and other kinds of windows and Tailwind, a utility-first CSS framework.
This application was developed by a team of 3 CS master students, namely:
It was developed as part of the course 2IMV20 - Visualization, taught at Eindhoven University of Technology.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent