How to make an eye tracking heat map
Heat maps are a great way to get quick insights to your eye tracking experiment. A heat map shows where people wearing an eye tracker looked most, aggregated for a time window. Where people look more will show a blob with more “heat”.
To create a heat map with Kexxu Eye, Tobii G2 or Tobii G3 glasses is easy, just upload your files to editor.kexxu.com and select “create dynamic heat map”.
The easy way
What is very special about the Kexxu online tool, is that it compensates for head movements when wearing eye tracking glasses. The problem when creating a heat map of the history of gaze locations, is that when your head moves, the whole gaze history moves with it, and is not at the original spot anymore. Therefore we have developed ai tools to compensate for this movement. So when when you use the Kexxu cloud tools to generate a heat map, if you keep looking at the same spot wearing eye tracking glasses, but you move your head, the heat map spot will remain on the exact same spot. That’s the power of ai!
Create a heat map yourself on editor.kexxu.com.
If you are a software developer
If you are not doing eye tracking with a wearable device, creating a heat map is easier. Here we’ll explain how to do it.
Creating a heat map with JavaScript
Are you using webcam eye tracking? Then a good library to make JavaScript heat maps is heatmapjs. Here is some example code to generate the heat map.
<html>
<body>
<div id=”heatmapContainer”></script>
</body>
</html>
<script>
window.onload = function() {
// create a heatmap instance
var heatmap = h337.create({
container: document.getElementById(‘heatmapContainer’),
maxOpacity: .6,
radius: 50,
blur: .90,
// backgroundColor with alpha so you can see through it
backgroundColor: ‘rgba(0, 0, 58, 0.96)’
});
var heatmapContainer = document.getElementById(‘heatmapContainerWrapper’);
let data = { min: 0, max: 0, data: [
{x: << your eye tracking point x >>, y: << your eye tracking point y >> },
{x: << your eye tracking point x >>, y: << your eye tracking point y >> },
{x: << your eye tracking point x >>, y: << your eye tracking point y >> },
// add all points
]
heatmap.setData(data);
}
</script>
Creating a heat map with Python
Are you doing eye tracking on a desktop? Then a good library to make heat maps with Python is scipy. Here is an example of how to create a heat map with Python.
from scipy.ndimage import gaussian_filter
def generate_gaussian(size_x, size_y, list_array_point, frame_nr, point_lifetime, sd_guass):
sd_guass = sd_guass / 4
array_image = np.zeros((size_x, size_y))
for i, array_point in enumerate(list_array_point):
x = int(array_point[0])
y = int(array_point[1])
# Check if the point is inside the image and add it to the heatmap
if 0 <= y and y < array_image.shape[0] and 0 <= x and x < array_image.shape[1]:
array_image[y, x] += 1
array_image = gaussian_filter(array_image, sd_guass, mode=”constant”, cval=0)
array_image *= 125
array_image = np.clip(array_image, 0, 1)
return array_image
