Mapping human emotions

Written on 23 Aug 2015

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.

If you see this text, This animation is not (yet) possible in your browser.

This means that the engine to run this(WebGL) may not enabled or not yet part your browser. Sorry.

What you could do is upgrade your browser. Internet Explorer 11, Firefox and chrome should do the trick!

[[ annotation.label ]], consists of:

Fear & supprise
Anger & disgust

Read about [[ annotation.label ]] on wikipedia.

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.