Cameron Erdogan
just swarm.png

World Happiness Report

UN dataset + d3

A suite of visualizations depicting global happiness.

World Happiness Report

UN Dataset + d3

A suite of visualizations depicting global happiness.


(Play around first here)

Overview

This project allows users to explore the UN’s World Happiness Report dataset in a flexible and intuitive way. Users can see how different countries compare based on different happiness metrics. They can also compare values from specific countries.

another just swarm.png
 

Tools Used

There are many tools for data visualizations, but one of the most popular is d3. And for good reason: D3 enables interactivity, which is critical for allowing users to explore and derive their own insights. D3 is also unique in the flexibility it offers designers. Unlike something more rigid and prebuilt like Tableau, your visualizations can be completely custom and suited to your specific goal. This, of course, comes at the expense of technical investment and expertise.

Project Goal

In the age of Big Data, data visualization is an invaluable tool for understanding and deriving insights from an abundance of raw data. Data Visualizations often exist somewhere on a spectrum, with pure storytelling on one end and pure exploration on the other.

Our team set out to create a series of visualizations set primarily in the exploratory end of that spectrum.

 

Dataset

Before we could build anything, we had to choose a dataset worthy of exploration. We decided on the World Happiness Report, a publication from the UN describing countries in terms of “Happiness”. The overall Happiness values are derived from a survey put out by the United Nations Sustainable Development Solutions Network.

Subsequent analysis was conducted by the same group in order to derive a series of sub-factors that contribute to a given nation’s overall happiness. These factors include things like “Generosity”, “Family”, and “GDP per Capita”. The idea here is that happiness is a holistic measurement that manifests differently in a given country’s set of circumstances. 

Our visualizations would be built to answer questions about these factors: Are there patterns in these factors? Which contribute most strongly to overall happiness? Do certain factors correlate with others?

 

Design Rationale

To us, there were two apparent ways of going about exploring the data: 

  1. Choosing one (or two) factors and seeing where every country falls
  2. Choosing one (or two) countries and seeing where each factor falls

Thus, we decided that a suite of complimentary visualizations would be more useful than a single, complicated one. After a collaborative sketching session, a few options emerged for exploring the data according to 1 and 2 above. 

For 1, we faced the challenge of plotting around ~160 different countries at once. Our sketches were inspired by swarm plots , which are particularly good at showing a dimension in which many data points are grouped around particular values. 

For 2, we started with the idea of parallel coordinates, since we were attempting to show 7 different dimensions simultaneously. Traditional parallel coordinates visualizations are busy. One of our team members, Yutong, envisioned a similar but simpler approach.

A swarm plot

A swarm plot

A parallel coordinate plot

A parallel coordinate plot

 

Preliminary Sketches

Below are our high-fidelity preliminary sketches. These would be the basis of what would try to create in d3, at the same fidelity. Much of the visual design is credited to our team's design wizard, Ketki.

Our sketches show 5 different visualizations: 3 inspired by swarm plots and 2 inspired by parallel coordinates. We ultimately only implemented 4 of the 5, choosing to omit the stacked continental swarm chart visual, but I included it for posterity's sake.

 

Final Result

We successfully implemented the designs into an interactive visualization. My teammate Yutong and I learned d3 along the way, so our code went through a metamorphosis in the two short weeks it took to develop. We ultimately settled on a different color scheme took advantage of d3's built-in animations. 

We created a video walkthrough to show off the interactivity and to highlight some interesting findings we made while using our tool. For example, using the visualization that compares two happiness factors, we compared Generosity and GDP Per Capita. We found there was no apparent correlation between having a high GDP and being generous. We also saw that Myanmar was outstandingly generous despite having a relatively low GDP. 

Check out the walkthrough below, or better yet, visit worldhappiness.site and play around yourself!