This project is an assignment developed for the course SIW001 - Programming in the Master of Science in Geospatial Technologies.

The source code of this project can be found in the correspondent Github repository. The code is licensed under Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

If you like it, feel free to contact me  

Clone the git repo. Then:

	cd path/to/repo
	npm install
	bower install
	grunt serve

In order to build the project you need npm, bower, grunt and sass installed in your system. Once you have built it, you can use grunt serve or launch your favourite web server. Simple example:

	cd app
	python3 -m http.server

A demo of the application can be found HERE.

NOTE This application uses the latest HTML5 features. It is highly recommended to test with Chome/Chromium.

MEIT is a mobile application that allows users to assess their emotional intelligence. The application is grounded in state of the art knowledge in psychology to grade the users emotional intelligence on a scale of 1–121 at hand of some simple visual tests.

For analysis reasons, some data about the registered user (given her permission) are collected: age group, gender, location, test scores, test dates, and some others.

For the purpose of this project, MEIT development team gave access to aggregated data per country. These data are conformal with the current privacy regulations.

The goal of the assignment is to implement a 1-page Web Application that visualizes the aggregate demographic data that is obtained from the MEIT application. In particular, the average score and time to perform the test needs to be visualized on a map, grouped per country, continent, or custom grouping of countries (i.e., the user needs to be able to group countries). Furthermore, it needs to be possible to set certain parameters: gender, age range, date range and tests performed, whereby results should be(dynamically) updateable.

To accomplish the goal, a special Web Service has been provided. The parameters are specified in the Query String and the response is in JSON format.

Important! Note that this project is not intended to give the user a full featured analysis Web Application. Instead, the purpose is to demonstrate the knowledge to build modern Web Application in a real world scenario

The first thing to do is to go to the Management section. There, you can select and filter the data you want to visualize. Also, you can manage the groups of countries. A group of countries contains the aggregated data of all the countries it is composed of. You can create as many groups as you want.

Once you have selected the data you want to analyze, you can go either to the Geo or Dashboard section. The possible variables of the analysis are: time and score. Time represents the elapsed seconds to complete a test. Score is the result obtained by a user in a specific test.

In the Geo section you can visualize the gathered data in a Geo Chart. By default, the average time of each country is visualized. To change the analysis variable (time or test score) you have to use the switch in the Data Filters panel. In the Group panel you can enable or disable grouping. If grouping is disabled (default), the analysis variable is aggregated per country. If grouping is enabled, the variable is aggregated per group.

In the Dashboard section you can analyze each group of countries. In the panel Group Selector you can choose a group, then the analysis panel will show some information along with some statistics about the group. In the Group Aggregated Data, the mean time and score of the group are showed. The Group Individuals Statistics section includes the countries within the group that have the maximum and minimum score and time values. Finally, the Group Components Detail gives the detail of each country present in the group.

The educational purpose of this project is to show basic programming skills in Javascript. Additionally, I wanted to make the most of it so I decided to develop this project using some modern front-end frameworks and tools.

The framework behind this work is BackboneJS. It helps to give a structure of the Web Application providing models, collections and views. Also, it works out of the box with jQuery and underscore.js. The former is a well known feature-rich Javascript library that provides simple API for DOM manipulation, Ajax, event handling, etc. The latter is a library that adds some functional programming helpers to make Javascript programming a lot easier.

Besides, I used other CSS and Javascript libraries to improve the user experience and the application's look: Bootstrap, Flatly (Bootstrap theme), Font Awesome (literally awesome scalable icons), Animate.css (CSS animations made easy), Bootstrap Switch (toggle switches for Bootstrap) and Humane.js (simple yet complete notification system).

The styling is done using the SASS CSS extension language. Along with it, I included the Compass extension to use some handy SASS helpers.

Grunt is used to take care of the building system (SCSS file compiling, livereload, etc.), while Bower is used as a dependency management to load Javascript and CSS libraries (when available). Finally, RequireJS is used to asynchronously load Javascript modules.

SIW-001-Programming Project by Andrea Calia is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.