Visualizing world happiness

p5.js, react & tailwindcss

View Demo

I was inspired to create this data visualization after reading the Blue Zones of Happiness by Dan Buettner. In the book, he outlines the main factors that make up happiness and draws from the happiest places on Earth.

I found a public source for happiness data from the World Happiness Report, and used it to map 150+ countries of happiness data to a globe.

The visualization is built with React and p5.js. I had always wanted to use processing for a project, to write code that translates to a piece of art.


Here is a snippet from the p5 sketch file that creates the earth visualization. It supports mouse drag to rotate the earth, and plots all country data points as a line and sphere at the latitude and longitude of the middle of the country.