Tutorial
1. The Data
The table below shows how a data sheet should look like.
The AOIName column identifies the specific area of interest (AOI).
The FixationDuration column shows for how long an AOI has been looked at (in milliseconds).
The Stimulus column indicates the stimulus that has been looked at.
The Participant column characterizes the participant that was recorded.
The data must be stored in a csv-file that is separated by commas or semicolons. Do not leave
any cell 'free', all cells must be filled with the according info*. If the dataset contains only the data of one participant,
then the participant column can be removed, same holds for the stimulus.
In this example, we could therefore remove the stimulus column.
* Except the AOI cells. If there is no AOI Name set, it will be aggregated towards an AOI being called other.
2. The Upload
Now that the data is stored the right way, it has to be uploaded.
To get the file loaded into the tool, simply drag and drop it into the upload box (or click on the box and use the file chooser):
The data is aggregated line by line until the stimulus or participant changes and a new aggregation starts. For data that is aggregated, all fixation durations of the same AOI are added to a total dwell time. Whenever the AOIName changes, it counts as a transition from the old AOI to the new AOI. Transitions having the same origin and destination are summed up to a total transition value as well.
3. Radial Transition Graph View
This is what a graph looks like, there are two versions that differ by their sector lengths.
In this example, the two graphs contain the same information, the dataset of the participant Jane.
In the left graph the sectors represent the value of the total dwell time
on the according AOI by their length.
In the right graph each sector has the same length. Using
the settings, it is possible to switch between both states, allowing to either focus on fixation times or transition patterns.
Both times each AOI is assigned a unique color.
The arcs between the AOIs show transitions. The thicker an arc, the
more transitions exist between two AOIs.
The transition arcs start and end at the according AOI; being marked with small circles within the AOI sector.
A black circle represents an outgoing transition, a white circle an incoming one.
For example, Jane has switched her attention from the apple AOI to the strawberry AOI
and the Melon AOI each at least once, but never from the apple AOI to the Banana AOI.
Furthermore, the size of sectors shows that Jane never had a look at the apricot AOI, as it is not presented in
the left graph. However, with the equal sectors we can see that there are no transitions to and from this AOI.
Tip: Hover over the AOI sectors and transitions to get further information.
5. The Transition Graph Diff View
Simply drag'n'drop one graph on another to get the transition diff graph. Contrary to this tutorial it will does appear in the same place, but on the right side of the comparison list.
Each sector now has the value of the graph with the higher duration (either Jane or John's).
Now there are two more rings:
The inner ring sectors represent the data of the graph that was dragged; in this case it is Jane's.
The outer ring sectors represent the other graph; in this case John's.
Either the inner or the outer sector has the same length as the colored one. This means that the sector
has the higher fixation duration on this AOI. The other one is shortened percentually.
For example, Jane never looked at the apricot AOI, that is why only John's sector is shown. On the
other hand, Jane looked a lot longer at the strawberry AOI and the apple AOI than John did.
A blue transition means that Jane had more transitions than John.
A red transition means that Jane had less transitions than John.
A black transition means they both had the same amount of transitions. The more blue/red the transition is, the more/less transitions Jane had. Note that the color is always calculated locally for the transition, so the maximum transition value of Jane or John marks the 100%.
6. The Comparison List View
After uploading the data the list view is shown. All graphs (we use another example here, so that there are more than 2 graphs), are listed next to each other. Having more graphs starts new rows when the place is not enough to fit all graphs in one row.
To start inspecting graphs, left-click a single graph and it appears enlarged on
the right side. Also, all other graphs change their background color. The darker the background,
the more similar the transition-patterns are, compared to the selected graph.
By dragging one graph on another, their merged graph appears also on the right side. Again the
similarity backgrounds are shown, in respected to the dragged graph.
Further Inspection
Below each graph on the right one or three sliders are shown. One if a single graph is inspected or three if a merged graph is inspected. The picture below represents the case for a merged one.
First, it's telling which graph's data is represented by the inner/outer ring sectors, same for the
transition colors.
Also, each graph's data additionally is shown in a timeline. This allows to track the path which
was taken by a participant.
While the transition sliders allows to jump through all transitions in the same order as they have occured. The time sliders allows to control the time that is inspected. Therefore, there are two slider handles, allowing to change the start and end range The time slider(s) allow to only inspect a range of done transitions. This might help to find similar patterns or to compare the differences of done transitions at the beginning or near the end of the experiment for example.
Furthermore, it is possible to upload a video for each stand-alone transition graph. Right click a transition graph to open the context menu and choose upload video. Each time you inspect this transition graph the video will appear below the sliders. Optionally it is possible to open the context menu again and choose play video. This feature can be used to have better insights into the participants procedure and what the participant focused on during a study. Please note that this feature only works with videos of small size. The exact size limit depends on your system configuration as well as the used browser. Best results have been experienced with Mozilla Firefox.
7. The Comparison Grid View
The comparison grid allows to see more than just one merged graph at a time. There are two possible ways to
open the comparison grid. Either yall graphs are compared or a small selection. Selecting some graphs is achieved
by entering a mode in the comparison list view where the desired graphs can be selected.
In the comparison grid each (selected) graph from the list view is listed on the left side (rows) and on the top (columns). All cells
inside the grid are the merged product of the according graphs on the left/top. Graphs on the left are represented
as inner ring sectors and red, graphs on the right as outer ring
sectors and blue. Also, each merged graph's background represents their global similarity.
8. Further Information
Sorting
By default the ring sectors are sorted by their AOI name. If the sectors need to be sorted differently,
because a strawberry is so much tastier than an apple, a column can be added to the dataset named AOIId.
Each line should then contain an integer, representing the sorting index of the according AOI name.
The AOIs are sorted in ascending order, so the strawberry ID (e.g., AOIId = 1) should have a lower value
than the apple ID (e.g. AOIId = 2).
Data Splitting
If the data should not only be split when a different stimulus or participant occurs, an extra
column can be added to the dataset named AdditionalInfo. As soon as this value changes, a new graph is created as well.
Dataset
Must contain: AOIName, FixationDuration
Can contain: Stimulus, Participant, AOIId and AdditionalInfo.
Everything else is ignored.
Stimulus
It is possible to upload a picture as well as a video of the stimulus. A button on the bottom right of the page opens a file chooser.
7. Settings
There are some settings that can be changed to fit everything to ones needs.
Buttons are used to enable/disable features or to show/hide elements. This includes:
- Graph Information: Shows information about which data the graph represents.
- Transitions: Shows transitions. Hiding them allows focusing on dwell times.
- Hover Tooltips: Shows tooltips on hover.
- Similarity Info: Shows similarities between all graphs in respect to the selected one.
- Drag and Merge: Enables drag and drop to merge graphs.
- Update on the fly: Enables animations.
- Colorblind Mode: Red transitions will be colored orange instead of red for better readability.
- Equal Sectors: Each graph represents all AOIs with the same length.
Sliders are used to change sizes. This includes:
- Ring Size: This slider has two slider handles to determine the inner and the outer radius of a ring.
- Comparison Ring Size: This slider determines the width of the inner/outer sectors on merged graphs.
- Transition Thickness: This slider is used to make transitions thicker or thinner.