Mapping human emotions

Published on November 15, 2023.

I thought it would be fun to map the human emotions and see how they relate to each other, so I did. But what is it and what does it do? The three dimensional diagram shows 4 axis that each represent one of the basic four emotions (happiness, Fear/supprise, anger/disgust and sadness). Most emotions are can measured in severity of one of them. For instance disappoinment is anger at a low intensity, while rage is anger at a high intensity. Some however are composed out of 2 or 3 basic emotions. But hey, just take a look for yourself.

You can rotate it, click on emotions and read more about them. Go ahead and try it.

{% include /posts/charting-emotions/index.html %}

How I did the research and stuff

Of course everything was easier said than done. I did have some sketches and ideas on how I would to map things, but I knew I should not be guided by some whimsical thoughts on data-visualisations. So like in any project that involves data, I started with the data-model and worked my way from there.

First of all I needed a classification system. I remembered there was a theory that there were four basal emotions: fear, anger, joy and sadness. But I was not going to be led by some vague memory. I was going to do it all sciency.

After some digging I found out there was a theory of there being six basal emotions proposed by Dr Paul Ekman and a theory of 8 emotions illustrated by Plutchik's wheel [2]. In fact there seems to be a whole lot of disagreement on the subject [3]

Finally I found a recent article proposing that we infact have only four basic emotions, fear/supprise, anger/disgust, joy and sadness.[6]. I used this as my basis for setting up my dataset.

How it works, on the inside.

The engine that builds up the graphic it a shmoosing of d3.js (the data driven part) and Three.js suggested by @Makc3d, Using d3 with Three.js. A lot of the math tools come from JavaScript itself and Three.js. The position calculation I figured out on my own and can be viewed by just inspecting the source code. I you have some in depth questions just ask them below in the comments.

Sources: