masoomabakhshi / webinfographic

World Happiness Reports 2015-17

Info-Graphic of World Happiness Reporst 2015-17

Website URL: https://worldhappinessreport.masoomabakhshi.com
Video Demo: https://youtu.be/w9iDgIvXWK8

---

For this aproject I created an interactive info-graphic website for world happiness reports of 2015-17 that let users explore about the world's happiest and least happy countries, and how global happiness has changed over the past three years. These findings were calculated by looking at the state of well-being in 158 nations across the globe, using analysis from experts in economics, psychology, survey analysis, and national statistics to make a case for why well-being should be considered a measure of national development. Happiness isn't only beneficial for individual mental and physical health and corporate bottom lines -- it may also contribute to the progress and development of entire nations. I believe my goal was to be able to translate those reports’ findings into the professional sphere in order to display these large amount of data into easy, understandable and effect interactive info-graphics. However, as learning, I tried the best my web skill set. Not only that, but I tried to develop good data visualising skill. This web info-graphic has absorbed a huge pool of data into an interactive world map.

Design and Layout:

For me a big challenge was to present this large amount of data into concise yet effective info-graphic. I divided the data into four sections. In first section I wanted to compare all the reports’ data in a concise way but I failed in first attempt and I came up with idea of using average happiness value of 2015-17 for each country. In other sections I showed the data of 158 countries in interactive world map which was one of the best approach for me. I embedded array of data of each country on a click which displays all the values of variables in a horizontal bar charts in side bar. I have used icons in bar chart to represent the variable names.

Technologies:

I did hectic research to come up with right technologies to develop this info-graphic. I had skill set of using data into graphics through pure HTML and CSS; and chart.js but I wanted to add new modern skill into my skill set. So I incorporated D3.js and JSON with JavaScript into HTML and CSS. I sketched the world map with D3.js using JSON data. Then I mapped out the reports data by reading them from CSV files through JavaScript. I graphed the data in SVG charts through code with these specified technologies.

Colors:

For this info-graphic I am utilizing the psychological primary colors based on opponent process which is a color theory that states that the human visual system interprets information about color by processing signals from cones and rods in an antagonistic manner. The theory states that every color can be described as a mix along the three axes of red vs. green, blue vs. yellow and white vs. Black (Cohen & Matthen, 2010). The Pattern which has been used in map is green, violet, blue, yellow, orange and red which refer a range of emotions from happiness to anger.

Interactivity:

Interaction is the shinning element of this info-graphic which let me hide large amount of data smartly and revel them upon basic universal interactions of website i-e mouse over, mouse out and click.