Eye-tracking visualizer

Project attribution: Project done in a SCRUM team along with Mino Keuren, Teun Kortekaas, Valentijn van den Berg, Rick van der Heijden and Kelvin Toonen.
Source: The project’s source code is unavailable.
Short description: Website that provides 4 visualizations for eye-tracking data.
Technologies: Python, Flask, Bokeh.
What I did: I contributed to the heat map and I implemented the time plot.

The website was written in Python with the Flask library that provides visualizations for eye-tracking data. The visualizations were made with the Bokeh library. The used dataset was of metro maps, however the website can display any eye-tracking data for any other use case.

The website provides the following visualizations:

  • Heat map
  • Gaze stripes
  • Eye cloud
  • Time plot
Graphical User Interface used by the end-user to analyze eye-tracking data. It contains: (1) A menu for the different visualizations and the dashboard where the interactions and filters can be controlled. (2) Button that would open the Settings for this visualization. (3) Several tools for exploring the graph. (4) Sliders to change the look of the graph.
Heat map. The gradient goes from green (least attention) to red (highest attention). It can be used to observe the focus points of the person that looks at the metro map.
Filtered heat map that highlights the highest-value points.
Eye clouds. The bigger circles show the most interesting areas for the end-user.
Gaze stripes show the areas and the order in which the end-users looked at them.
The time plot shows the transition between areas on the metro maps. The eye-tracking dataset is split into 5 clusters and the time plot highlights the transition between them. The larger circles on the time plot signify a higher attention given by the end-user.