Visualizing world happiness

I created an interactive D3 visualization of the annual world happiness survey and its relation to several variables related to each country's government.

Rebecca Barter

Over the new year I decided to work on my D3.js skills (rather than do the actual work that I probably should’ve done) by submitting an entry to the World Data Visualization competition.

The interactive version of the fruits of my labour can be found by clicking here. Below is a static screenshot.


Essentially, the first screen shows each country’s happiness score (and are colored accordingly using the viridis color palette). When you hover over a bubble, it reveals which country each bubble belongs to. If you click on a variable name, the position of each bubble is jiggled to its new ranking according to the variable selected.

When I began to create this visualization, I had a picture in my head of a plot that a lot of Google searching lead me to realize was called a “beeswarm plot”, which is essentially a jittered one-dimensional scatterplot where the points are kind of “glued” together.

The main thing I struggled with when creating this visualization was realizing that forces in D3 are inherently different from transitions when I was implementing the buttons. But once I wrapped my head around these different types of “simulations”, a lot of things magically started falling into place.

Most of all, I learnt a huge amount from the process and am really proud of my second-ever D3 project!