Difference between revisions of "IS428 Team wiki: Group12(CJS) Proposal"

From Visual Analytics for Business Intelligence
Jump to navigation Jump to search
 
(25 intermediate revisions by 2 users not shown)
Line 45: Line 45:
  
 
<div style="background: #138D75; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">PROBLEM & MOTIVATION</font></div>
 
<div style="background: #138D75; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">PROBLEM & MOTIVATION</font></div>
−
'''Problem'''  Since 2012, the United Nations Sustainable Development Solutions Network (SDSN) has been publishing a world happiness report that presents the happiness levels of 156 countries. 6 parameters that include GDP per capita, social support, healthy life expectancy, freedom to make life choices, generosity, and perception of corruption are used to come up with the happiness index for these different countries.
+
Since 2012, the United Nations Sustainable Development Solutions Network (SDSN) has been publishing a world happiness report that presents the happiness levels of 156 countries.
 +
6 factors that include GDP, Social Support, Trust (in government), Generosity, Freedom to Make Life Decisions and Healthy Life Expectancy are used to estimate these final happiness levels.
 +
Thus, this visualization explores trends with regards to these 6 factors to understand what exactly makes a "happier" country as per UN's standards.  
  
−
Our visualization, thus, explores the different trends between these 6 parameters and the final happiness index to see exactly which parameters has a higher weightage in the final score.
+
<div style="background: #138D75; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">OBJECTIVES</font></div>
 +
# Identify the overall trends of happiness ranking index of different countries over the years from 2015 to 2018.</br>
 +
# Identify the rankings of the each of 6 parameters that make up the happiness index of countries.</br>
 +
# Compare the 6 parameters between the selected countries and see how they fare in relation to their final happiness index rankings from the years 2015 to 2018.</br>
 +
# Compare different countries by geographic locations to find out the happiness pattern in different regions.</br>
  
−
'''Motivation'''  The United Nations SDSN reports the happiness ranking of the individual countries yearly. However, trends regarding these 6 parameters are not clearly presented in each of these reports. Importance of such trends can be recognized when we taking the example of Singapore. In 2018, Singapore’s was ranked 34th out of 155 countries in terms of happiness. Though this may seem somewhat high, when compared with their 26th ranking in 2017 will we realise that Singapore is becoming a less “happier” country. Hence, it is important that such trends be explored into to get a clearer understanding of what makes a happy country.
 
−
 
−
Secondly, the reports does not accurately define which of the 6 parameters play a bigger role in deciding the final happiness index of the various countries. A country ranked first in the world happiness index might not rank first in one of the 6 factors. Thus, it could be interesting to identify the relationship between the happiness index and the 6 different factors that contribute to it and identify what make a happier country as per the standards of UN. Perhaps, consistencies or inconsistencies across the yearly reports years could be observed.
 
−
 
−
<div style="background: #138D75; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">OBJECTIVES</font></div>
 
−
1. Identify happiness ranking differences over the years with relation to different regions around the world. <br>
 
−
2. Identify the rankings of the each of 6 parameters that make up the happiness index of countries from the years 2015 to 2018 <br>
 
−
3. Compare the 6 parameters between the selected countries and see how they fare in relation to their final happiness index ranking from the years 2015 to 2018 <br>
 
  
 
<div style="background: #138D75; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">DATA DESCRIPTION</font></div>
 
<div style="background: #138D75; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">DATA DESCRIPTION</font></div>
Line 108: Line 106:
 
* Corruption
 
* Corruption
 
  ||  
 
  ||  
−
Show data of one particular  year(2017), its overall score and thus can get how the final happiness score is calculated
+
Show data of one particular  year(2017), its overall score and thus can analyze how the final happiness score is calculated
 +
|-
 +
|-
 +
|
 +
Happiness rank and scores by country<br>
 +
https://www.kaggle.com/unsdsn/world-happiness<br>
 +
2015.csv
 +
||
 +
* CountryName of the country.
 +
* RegionRegion the country belongs to.
 +
* Happiness RankRank of the country based on the Happiness Score.
 +
* Happiness ScoreA metric measured in 2015 by asking the sampled people the question: "How would you rate your happiness on a scale of 0 to 10 where 10 is the happiest."
 +
* Standard ErrorThe standard error of the happiness score.
 +
* Economy (GDP per Capita)The extent to which GDP contributes to the calculation of the Happiness Score.
 +
* FamilyThe extent to which Family contributes to the calculation of the Happiness Score
 +
* Health (Life Expectancy)The extent to which Life expectancy contributed to the calculation of the Happiness Score
 +
* FreedomThe extent to which Freedom contributed to the calculation of the Happiness Score.
 +
* Trust (Government Corruption)The extent to which Perception of Corruption contributes to Happiness Score.
 +
* GenerosityThe extent to which Generosity contributed to the calculation of the Happiness Score.
 +
* Dystopia ResidualThe extent to which Dystopia Residual contributed to the calculation of the Happiness Score.
 +
  ||
 +
Data with explanation behind if needed
 +
|-
 +
|
 +
Happiness rank and scores by country<br>
 +
https://www.kaggle.com/unsdsn/world-happiness<br>
 +
2016.csv
 +
||
 +
* CountryName of the country
 +
* RegionRegion the country belongs to
 +
* Happiness RankRank of the country based on the Happiness Score.
 +
* Happiness ScoreA metric measured in 2016 by asking the sampled people the question: "How would you rate your happiness on a scale of 0 to 10 where 10 is the happiest"
 +
* Lower Confidence IntervalLower Confidence Interval of the Happiness Score
 +
* Upper Confidence IntervalUpper Confidence Interval of the Happiness Score
 +
* Economy (GDP per Capita)The extent to which GDP contributes to the calculation of the Happiness Score.
 +
* FamilyThe extent to which Family contributes to the calculation of the Happiness Score
 +
* Health (Life Expectancy)The extent to which Life expectancy contributed to the calculation of the Happiness Score
 +
* FreedomThe extent to which Freedom contributed to the calculation of the Happiness Score
 +
* Trust (Government Corruption)The extent to which Perception of Corruption contributes to Happiness Score
 +
* GenerosityThe extent to which Generosity contributed to the calculation of the Happiness Score
 +
* Dystopia ResidualThe extent to which Dystopia Residual contributed to the calculation of the Happiness Score.
 +
  ||
 +
Data with explanation behind if needed
 +
|-
 +
|
 +
Happiness rank and scores by country<br>
 +
https://www.kaggle.com/unsdsn/world-happiness<br>
 +
2017.csv
 +
||
 +
* Country
 +
* Happiness.Rank
 +
* Happiness.ScoreA metric measured in 2016 by asking the sampled people the question: "How would you rate your happiness on a scale of 0 to 10 where 10 is the happiest"
 +
* Whisker.high
 +
* Whisker.low
 +
* Economy..GDP.per.Capita.
 +
* Family
 +
* Health..Life.Expectancy.
 +
* Freedom
 +
* Generosity
 +
* Trust..Government.Corruption.
 +
* Dystopia.Residual
 +
  ||
 +
Data with explanation behind if needed
 
|-
 
|-
 +
 
|}
 
|}
 
<div style="background: #138D75; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">SURVEY OF RELATED WORK</font></div>
 
<div style="background: #138D75; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">SURVEY OF RELATED WORK</font></div>
Line 131: Line 192:
 
<p><center>'''Source''': https://www.gapminder.org/tools/#$chart-type=barrank</center></p>
 
<p><center>'''Source''': https://www.gapminder.org/tools/#$chart-type=barrank</center></p>
 
  ||  
 
  ||  
−
* A similar bar chart would allow users to identify which  
+
* This bar chart presents a slider that allows the users to view the changes in data in a very interactive manner.
−
 
+
* The ranking are also featured on the side of the graph to help identify which countries are highly ranked from year to year. This could be useful in observing changes in happiness index over the years.
 +
* The different countries are colour-coded based on the regions they are in. For example, Asian countries are in pink while countries in yellow are in Europe.
 +
* Overall, the bar chart visualization makes it easy to distinguish the magnitudes of scores between the different countries and thus, is something that could help add value to the exploration of the happiness index.
 
|-
 
|-
 
| <p><center>''' Parallel Coordinates Plot''' </center></p>
 
| <p><center>''' Parallel Coordinates Plot''' </center></p>
Line 138: Line 201:
 
<p><center>'''Source''': https://bl.ocks.org/jasondavies/1341281</center></p>
 
<p><center>'''Source''': https://bl.ocks.org/jasondavies/1341281</center></p>
 
  ||  
 
  ||  
−
*Thanks to prof guidance, parallel coordinates plot was introduced in the class.   
+
*As taught in class, this parallel coordinates visualization provides a more consolidated view as the user can observe how the 6 factors link together for each country. Furthermore, users can click to highlight each of the individual countries.
−
* In our visualization, each of the axes would represent the 6 different parameters that make up the happiness index, and each of the different lines will represent the different countries. Thus, the user can compare all the parameters instantly and identify relationships between them.
+
*
 +
|-
 +
|}
 +
<div style="background: #138D75; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">OUR APPROACH</font></div>
 +
 
 +
{| class="wikitable" style="background-color:#FFFFFF;" width="100%"
 +
|-
 +
! style="font-weight: bold;background: #138D75;color:#fbfcfd;width: 50%;" | Work Flow
 +
! style="font-weight: bold;background: #138D75;color:#fbfcfd;" | Remark
 +
|-
 +
|
 +
[[File:CJSApproach_1.png|600px|center]]
 +
  ||
 +
* Draw box-plots for different factors to see the how important these factors are in contributing to the overall happiness score
 +
* Display Choropleth Maps based on the happiness ranking to observe different regions' happiness status
 +
* Display ranking of different countries based on individual parameters and see their position in the overall happiness score ranking
 +
* As the 6 factors are given in different scales, normalization of data ((x - min(x)) / (max(x) - min(x))) was conducted for the 6 factors. After normalization, they were presented in a radar chart and compared to see the strenghs and weaknesses between countries.  
 
|-
 
|-
 
|}
 
|}
Line 149: Line 228:
 
! style="font-weight: bold;background: #138D75;color:#fbfcfd;" | Description
 
! style="font-weight: bold;background: #138D75;color:#fbfcfd;" | Description
 
|-
 
|-
−
| <p><center>'''Main Visualisation: Chloropleth Map''' </center></p>
+
| <p><center>'''Main Visualisation: Choropleth Map''' </center></p>
 
[[File:CJStory1_1.jpg|600px|center]]
 
[[File:CJStory1_1.jpg|600px|center]]
 
  ||  
 
  ||  
 
'''Purpose:'''
 
'''Purpose:'''
−
To show the geographical distribution of the happiness index and the 6 parameters for selected years using a chloropleth map. This helps the user identify trends between regions. For example, users could see if Asian countries are “happier” than African countries.
+
To show the geographical distribution of the happiness index and the 6 parameters for selected years using a choropleth map. Similar to the survey of related work, this helps the user identify trends between regions. For example, users could see if, for example, Asian countries are “happier” than African countries.
 
<br><br>'''Features to be included:'''
 
<br><br>'''Features to be included:'''
−
* Different colour intensity would be used to represent the varying values of each factors.
+
* 2 Different colours of varying intensity would be used to represent the varying values of each factors.
 
* Filter for user to observe data by individual years and happiness index factors.
 
* Filter for user to observe data by individual years and happiness index factors.
 
* A tooltip which shows the happiness scores of the different countries will display upon hovering over the different regions on the map.
 
* A tooltip which shows the happiness scores of the different countries will display upon hovering over the different regions on the map.
Line 163: Line 242:
 
  ||  
 
  ||  
 
'''Purpose:'''
 
'''Purpose:'''
−
To identify any correlation between the 6 sub-factors and the happiness index. Users can see, for example, what the happiness index rankings are for countries with just the highest GDP
+
To identify any correlation between the 6 sub-factors and the happiness index. Users can see, for example, what the happiness index rankings are for countries with just the highest GDP.
 
<br><br>'''Features to be included:'''
 
<br><br>'''Features to be included:'''
 
* The bar length would be used to visualise the magnitude of the selected parameters while the number to the side of the bar chart would refer to the happiness index rank of the country.
 
* The bar length would be used to visualise the magnitude of the selected parameters while the number to the side of the bar chart would refer to the happiness index rank of the country.
 
* There would be a slider below the chart that would allow users to scroll through and see the bar chart visualisations for the different years.
 
* There would be a slider below the chart that would allow users to scroll through and see the bar chart visualisations for the different years.
−
* Filter for the 6 parameters.
+
* A filter so that the user can select the various parameter to analyse.
 
|-
 
|-
 
|-
 
|-
Line 174: Line 253:
 
  ||  
 
  ||  
 
'''Purpose:'''
 
'''Purpose:'''
−
To help identify trends between the 6 parameters among the different countries.
+
To help identify trends between the 6 parameters among the different countries. In our visualization, each of the axes would represent the 6 different parameters that make up the happiness index, and each of the different lines will represent the different countries. Thus, the user can compare all the parameters instantly and identify relationships between them.
 
<br><br>'''Features to be included:'''
 
<br><br>'''Features to be included:'''
−
* Boxplot on each of the axis to enable the user to see the distribution for each of the sub-factors.
+
* Boxplot on each of the axis to enable the user to see the distribution for each of the parameter.
 
* Brushing feature for users to select a range values in the chart.
 
* Brushing feature for users to select a range values in the chart.
 
* Filter for people to select the year.
 
* Filter for people to select the year.
Line 192: Line 271:
 
* Gather all data and join all sets together.
 
* Gather all data and join all sets together.
 
* Clean and transform the data.
 
* Clean and transform the data.
 +
* Make sure data follow the Codd's 3rd normal form
 
|-
 
|-
 
| Unfamiliar with Visualization Tools
 
| Unfamiliar with Visualization Tools
 
  ||  
 
  ||  
−
* Research on how to use there tools properly.
+
* Research on how to use these tools properly.
 
* Consultation with professor to get help.
 
* Consultation with professor to get help.
 +
* Use familiar development environment for application devloping
 
|-
 
|-
−
| Unfamiliar with R as a new programming language
+
| Unfamiliar programming language
 
  ||  
 
  ||  
−
* Learn R individually.
+
* Learn respective programming language individually.
 
* Incorporate Transformed html page with Javascript & JQuery to give smooth and user-friendly interface.
 
* Incorporate Transformed html page with Javascript & JQuery to give smooth and user-friendly interface.
 +
|-
 +
|}
 +
<div style="background: #138D75; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">ARCHITECTURE</font></div>
 +
{| class="wikitable" style="background-color:#FFFFFF;" width="100%"
 +
|-
 +
! style="font-weight: bold;background: #138D75;color:#fbfcfd;width: 50%;" | Tools & Technologies Used
 +
! style="font-weight: bold;background: #138D75;color:#fbfcfd;" | System Architecture
 +
|-
 +
|
 +
[[File:CJSTools.png|center|500px]]
 +
||
 +
[[File:CJSSystem.png|center|600px]]
 +
 
|-
 
|-
 
|}
 
|}
 
<div style="background: #138D75; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">VISUALIZATION SKETCH</font></div>
 
<div style="background: #138D75; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">VISUALIZATION SKETCH</font></div>
−
Please check out our visualization sketch to better understand the process.
+
Please check out our visualization sketch to better understand the process. Overall, all these graphs will be tied together on a web-page categorised by different tabs. First tab would feature the choropleth map while the second and third tabs would feature the bar chart and the box plot respectively.
 
[[File:CJSthinkingProcess.png|center|800px]]
 
[[File:CJSthinkingProcess.png|center|800px]]
−
For section 1(left side of the above image), users would be greeted with a general view of the data from 2008 to 2017 through the time series data and the geographical distribution visualisation. This section aims to fulfill objective 1.  Users can hover over the map and see the 6 parameters that make up the happiness index of the country in the specific year. User need to select the year for Chloropleth map.<br>
+
For section 1(left side of the above image), users would be greeted with a general view of the data from 2015 to 2018 through the geographical distribution visualisation. This section aims to fulfill objective 4 where we want to observe trends in the specific regions which are more happy than others.  Users can hover over the map and see the 6 parameters that make up the happiness index of the country in the specific year. User need to select the year for Choropleth map. In here, 2 colours will be used to represent the diverging attributes from the world happiness ranking – happier countries and least happier countries.The line graph will serve objective 1 where we aim to identify overall trends in the change of happiness ranking from 2015 to 2018.<br>
−
Visualization presented:
+
 
−
# Line Graph
+
Section 2 (top right of the image) presents a more drilled down view as trends specifically related to the 6 parameters that make up the final happiness index can be seen here after the user selects the parameter and year. Tentatively, user would only need to select any one of the 6 parameters and the chart will change dynamically according to the year. This section aims to fulfill objective 2 where the goal is to identify the rankings of each of the 6 factors.<br>
−
# Chloropleth map
+
 
−
Section 2(top right of the image) presents a more drilled down view as trends specifically related to the 6 parameters that make up the final happiness index can be seen here after the user selects the parameter and year. Tentatively, user would only need to select any one of the 6 parameters and the chart will change dynamically according to the year. This section aims to fulfill objective 2.<br>
+
For the section 3(bottom right of the image), the different y-axes represent the different parameters and lines are plotted for all the different countries.This section aims to fulfill objective 3 where we would like to identify distribution of countries for the 6 different factors.<br>
−
Visualizations presented:
 
−
#Bar Chart
 
−
For the section 3(bottom right of the image), the different y-axes represent the different parameters and lines are plotted for all the different countries.This section aims to fulfill objective 3.<br>
 
−
Visualizations presented:
 
−
# Parallel Coordinates
 
 
<div style="background: #138D75; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">MILESTONES AND TASK DESCRIPTIONS</font></div>
 
<div style="background: #138D75; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">MILESTONES AND TASK DESCRIPTIONS</font></div>
 
Milestones are indicated with the star.
 
Milestones are indicated with the star.
Line 226: Line 315:
 
# https://www.gapminder.org/tools/#$chart-type=barrank
 
# https://www.gapminder.org/tools/#$chart-type=barrank
 
# https://bl.ocks.org/jasondavies/1341281
 
# https://bl.ocks.org/jasondavies/1341281
−
<div style="background: #138D75; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">COMMENTS</font></div>
+
<div style="background: #138D75; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">ADDITION</font></div>
−
Please provide us with any comments to improve our visualization better.
+
We have added a radar graph visualization that compare between the parameters on a same scale. The user can select between different countries and different years.
 +
[[File:CJSProjRadar.png|center|500px]]
 +
<div style="background: #138D75; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">COMMENT</font></div>
 +
Please provide some comments.

Latest revision as of 22:18, 25 November 2018

CJSlogo.png
Back to Project Groups

HOME

 

PROPOSAL

 

POSTER

 

APPLICATION

 

RESEARCH PAPER


PROBLEM & MOTIVATION

Since 2012, the United Nations Sustainable Development Solutions Network (SDSN) has been publishing a world happiness report that presents the happiness levels of 156 countries. 6 factors that include GDP, Social Support, Trust (in government), Generosity, Freedom to Make Life Decisions and Healthy Life Expectancy are used to estimate these final happiness levels. Thus, this visualization explores trends with regards to these 6 factors to understand what exactly makes a "happier" country as per UN's standards.

OBJECTIVES
  1. Identify the overall trends of happiness ranking index of different countries over the years from 2015 to 2018.
  2. Identify the rankings of the each of 6 parameters that make up the happiness index of countries.
  3. Compare the 6 parameters between the selected countries and see how they fare in relation to their final happiness index rankings from the years 2015 to 2018.
  4. Compare different countries by geographic locations to find out the happiness pattern in different regions.


DATA DESCRIPTION
Dataset/ Source Data Attributes Rationale of Usage

World Happiness Report Data 2015-2018
https://s3.amazonaws.com/happiness-report/2018/WHR2018Chapter2OnlineData.xls
table2.1

  • County
  • Year
  • Life Ladder
  • Log GDP per capita
  • Social Support
  • Healthy life expectancy at birth
  • Freedom to make life choices
  • Generosity
  • Perceptions of corruption
  • Positive affect
  • Negative affect
  • Confidence in national government
  • Democratic Quality
  • Delivery Quality
  • Standard deviation of ladder by country-year
  • Stand deviation/ Mean of ladder by country-year
  • GINI index (World Bank estimate)
  • GINI index (World Bank estimate), average 2000-15
  • GINI of household income reported in Gallup, by wp5-year

See the overall performance of each individual country changes from year 2006 onwards

World Happiness Report Data 2017

https://s3.amazonaws.com/happiness-report/2018/WHR2018Chapter2OnlineData.xls
Figure2.2

  • Country
  • Happiness score
  • Whisker-high
  • Whisker-low
  • Dystopia + residual
  • GDP Per capita
  • Social support
  • Healthy life expectancy
  • Freedom to make life choices
  • Generosity
  • Corruption

Show data of one particular year(2017), its overall score and thus can analyze how the final happiness score is calculated

Happiness rank and scores by country
https://www.kaggle.com/unsdsn/world-happiness
2015.csv

  • CountryName of the country.
  • RegionRegion the country belongs to.
  • Happiness RankRank of the country based on the Happiness Score.
  • Happiness ScoreA metric measured in 2015 by asking the sampled people the question: "How would you rate your happiness on a scale of 0 to 10 where 10 is the happiest."
  • Standard ErrorThe standard error of the happiness score.
  • Economy (GDP per Capita)The extent to which GDP contributes to the calculation of the Happiness Score.
  • FamilyThe extent to which Family contributes to the calculation of the Happiness Score
  • Health (Life Expectancy)The extent to which Life expectancy contributed to the calculation of the Happiness Score
  • FreedomThe extent to which Freedom contributed to the calculation of the Happiness Score.
  • Trust (Government Corruption)The extent to which Perception of Corruption contributes to Happiness Score.
  • GenerosityThe extent to which Generosity contributed to the calculation of the Happiness Score.
  • Dystopia ResidualThe extent to which Dystopia Residual contributed to the calculation of the Happiness Score.

Data with explanation behind if needed

Happiness rank and scores by country
https://www.kaggle.com/unsdsn/world-happiness
2016.csv

  • CountryName of the country
  • RegionRegion the country belongs to
  • Happiness RankRank of the country based on the Happiness Score.
  • Happiness ScoreA metric measured in 2016 by asking the sampled people the question: "How would you rate your happiness on a scale of 0 to 10 where 10 is the happiest"
  • Lower Confidence IntervalLower Confidence Interval of the Happiness Score
  • Upper Confidence IntervalUpper Confidence Interval of the Happiness Score
  • Economy (GDP per Capita)The extent to which GDP contributes to the calculation of the Happiness Score.
  • FamilyThe extent to which Family contributes to the calculation of the Happiness Score
  • Health (Life Expectancy)The extent to which Life expectancy contributed to the calculation of the Happiness Score
  • FreedomThe extent to which Freedom contributed to the calculation of the Happiness Score
  • Trust (Government Corruption)The extent to which Perception of Corruption contributes to Happiness Score
  • GenerosityThe extent to which Generosity contributed to the calculation of the Happiness Score
  • Dystopia ResidualThe extent to which Dystopia Residual contributed to the calculation of the Happiness Score.

Data with explanation behind if needed

Happiness rank and scores by country
https://www.kaggle.com/unsdsn/world-happiness
2017.csv

  • Country
  • Happiness.Rank
  • Happiness.ScoreA metric measured in 2016 by asking the sampled people the question: "How would you rate your happiness on a scale of 0 to 10 where 10 is the happiest"
  • Whisker.high
  • Whisker.low
  • Economy..GDP.per.Capita.
  • Family
  • Health..Life.Expectancy.
  • Freedom
  • Generosity
  • Trust..Government.Corruption.
  • Dystopia.Residual

Data with explanation behind if needed

SURVEY OF RELATED WORK

Our visualization are inspired by the following works:

Reference Visualization Work Our Team's Take-away

World Map

CJSref1.jpg

Source: http://shiny.rstudio.com/gallery/superzip-example.html

  • It can be seen in this visualization that 2 different colours are used - one to represent "yes" and one to represent "no". A similar design could be used in our visualization where two different colors of different intensity can be used to show the happiness index of different countries. One colour would be used to categorise the more "happier" countries while the other colour would categorise the less "happier" countries. This would be complemented with different hue intensities to represent the magnitude of the various happiness scores.
  • Upon clicking each of the states, a tooltip is shown that gives a brief information overview of that particular area. This could be useful in our visualization as we provide more information on the happiness index than just the happiness scores. Perhaps, scores of the 6 factors can be shown in the tooltip of our visualization.

Interactive Ranking Bar Chart

CJSref2.jpg

Source: https://www.gapminder.org/tools/#$chart-type=barrank
  • This bar chart presents a slider that allows the users to view the changes in data in a very interactive manner.
  • The ranking are also featured on the side of the graph to help identify which countries are highly ranked from year to year. This could be useful in observing changes in happiness index over the years.
  • The different countries are colour-coded based on the regions they are in. For example, Asian countries are in pink while countries in yellow are in Europe.
  • Overall, the bar chart visualization makes it easy to distinguish the magnitudes of scores between the different countries and thus, is something that could help add value to the exploration of the happiness index.

Parallel Coordinates Plot

CJSrefParallel.jpg

Source: https://bl.ocks.org/jasondavies/1341281
  • As taught in class, this parallel coordinates visualization provides a more consolidated view as the user can observe how the 6 factors link together for each country. Furthermore, users can click to highlight each of the individual countries.
OUR APPROACH
Work Flow Remark
CJSApproach 1.png
  • Draw box-plots for different factors to see the how important these factors are in contributing to the overall happiness score
  • Display Choropleth Maps based on the happiness ranking to observe different regions' happiness status
  • Display ranking of different countries based on individual parameters and see their position in the overall happiness score ranking
  • As the 6 factors are given in different scales, normalization of data ((x - min(x)) / (max(x) - min(x))) was conducted for the 6 factors. After normalization, they were presented in a radar chart and compared to see the strenghs and weaknesses between countries.
PROPOSED STORYBOARD
Visualization Description

Main Visualisation: Choropleth Map

CJStory1 1.jpg

Purpose: To show the geographical distribution of the happiness index and the 6 parameters for selected years using a choropleth map. Similar to the survey of related work, this helps the user identify trends between regions. For example, users could see if, for example, Asian countries are “happier” than African countries.

Features to be included:

  • 2 Different colours of varying intensity would be used to represent the varying values of each factors.
  • Filter for user to observe data by individual years and happiness index factors.
  • A tooltip which shows the happiness scores of the different countries will display upon hovering over the different regions on the map.

Main Visualisation: Bar chart

CJStory2.jpg

Purpose: To identify any correlation between the 6 sub-factors and the happiness index. Users can see, for example, what the happiness index rankings are for countries with just the highest GDP.

Features to be included:

  • The bar length would be used to visualise the magnitude of the selected parameters while the number to the side of the bar chart would refer to the happiness index rank of the country.
  • There would be a slider below the chart that would allow users to scroll through and see the bar chart visualisations for the different years.
  • A filter so that the user can select the various parameter to analyse.

Main Visualisation: Parallel Coordinates with Boxplot

cener

Purpose: To help identify trends between the 6 parameters among the different countries. In our visualization, each of the axes would represent the 6 different parameters that make up the happiness index, and each of the different lines will represent the different countries. Thus, the user can compare all the parameters instantly and identify relationships between them.

Features to be included:

  • Boxplot on each of the axis to enable the user to see the distribution for each of the parameter.
  • Brushing feature for users to select a range values in the chart.
  • Filter for people to select the year.
KEY CHALLENGES
Key Technical Challenges Proposed Solution

No centralized data. Data are all divided year by year.

  • Gather all data and join all sets together.
  • Clean and transform the data.
  • Make sure data follow the Codd's 3rd normal form
Unfamiliar with Visualization Tools
  • Research on how to use these tools properly.
  • Consultation with professor to get help.
  • Use familiar development environment for application devloping
Unfamiliar programming language
  • Learn respective programming language individually.
  • Incorporate Transformed html page with Javascript & JQuery to give smooth and user-friendly interface.
ARCHITECTURE
Tools & Technologies Used System Architecture
CJSTools.png
CJSSystem.png
VISUALIZATION SKETCH

Please check out our visualization sketch to better understand the process. Overall, all these graphs will be tied together on a web-page categorised by different tabs. First tab would feature the choropleth map while the second and third tabs would feature the bar chart and the box plot respectively.

CJSthinkingProcess.png

For section 1(left side of the above image), users would be greeted with a general view of the data from 2015 to 2018 through the geographical distribution visualisation. This section aims to fulfill objective 4 where we want to observe trends in the specific regions which are more happy than others. Users can hover over the map and see the 6 parameters that make up the happiness index of the country in the specific year. User need to select the year for Choropleth map. In here, 2 colours will be used to represent the diverging attributes from the world happiness ranking – happier countries and least happier countries.The line graph will serve objective 1 where we aim to identify overall trends in the change of happiness ranking from 2015 to 2018.

Section 2 (top right of the image) presents a more drilled down view as trends specifically related to the 6 parameters that make up the final happiness index can be seen here after the user selects the parameter and year. Tentatively, user would only need to select any one of the 6 parameters and the chart will change dynamically according to the year. This section aims to fulfill objective 2 where the goal is to identify the rankings of each of the 6 factors.

For the section 3(bottom right of the image), the different y-axes represent the different parameters and lines are plotted for all the different countries.This section aims to fulfill objective 3 where we would like to identify distribution of countries for the 6 different factors.

MILESTONES AND TASK DESCRIPTIONS

Milestones are indicated with the star.

CJSProjTimeline.png
REFERENCES
  1. https://s3.amazonaws.com/happiness-report/2018/WHR2018Chapter2OnlineData.xls
  2. https://s3.amazonaws.com/happiness-report/2018/WHR2018Chapter2OnlineData.xls
  3. http://shiny.rstudio.com/gallery/superzip-example.html
  4. https://www.gapminder.org/tools/#$chart-type=barrank
  5. https://bl.ocks.org/jasondavies/1341281
ADDITION

We have added a radar graph visualization that compare between the parameters on a same scale. The user can select between different countries and different years.

CJSProjRadar.png
COMMENT

Please provide some comments.

Retrieved from ‘https://wiki.smu.edu.sg/18191is428g1/index.php?title=IS428_Team_wiki:_Group12(CJS)_Proposal&oldid=4603’