Head Movement Visualization: Implement First Version Using D3

[bastianilso]

Using the column HeadCameraRotEulerY show how the user rotated his head left and right.

• Colors are a heatmap, indicating high activity or low activity. The boundaries of the colors are the degrees, to the left and right that the person looked. The dotted line is the "median" value.

[aldsanms]

Today I managed to:

• Retrieve the Max and Min angles of the rotation of the player's head.
• Calculate the median.
• Calculate the fields where the player looks the least (area in yellow in the graph).
• Display all this information only using d3.js. Here is a visualization of one player's field of vision.

[bastianilso]

@aldsanms great. then I think what remains is:

1) showing the remaining possible movement in white (like in the mockup)

and maybe that is it for "head rotation v1" (the first version). In next versions we can make it interactive, but for this one maybe we should start with a static visualization.

When the code is ready, please create a pull request.

[aldsanms]

@aldsanms great. then I think what remains is:

1. showing the remaining possible movement in white (like in the mockup)

and maybe that is it for "head rotation v1" (the first version). In next versions we can make it interactive, but for this one maybe we should start with a static visualization.

When the code is ready, please create a pull request.

---

Today, I continued this issue. Here is a screenshot of the final render:

The code is made in such a way that the style is easily modified, we can then discuss afterwards so that I can adapt to your preferences.

I posted my code on Github but couldn't make a pull request.

Here is a link to the Github directory: https://github.com/med-material/d3-rshiny-vis/tree/main/Head_orientation_stat/headMovementStat01

Moreover, it is now possible for us to visualize the field of vision of the player during his game according to the data presented in a CSV. Here is an example :https://github.com/med-material/d3-rshiny-vis/issues/2#issuecomment-1298574014

I think this issue can be closed.

[bastianilso]

Preprocessing step in R for wrapping the head orientation data:

https://github.com/med-material/Whack_A_Mole_RShiny/blob/master/modules/plot_head_orientation_density_module.R#L18

D %>% mutate(
HeadCameraRotEulerY_wrap = ifelse(HeadCameraRotEulerY > 180, HeadCameraRotEulerY - 360, HeadCameraRotEulerY)
)

[aldsanms]

Now:

• We don't need anymore a background image (everything is done with D3 and js).
• I changed the structure of some functions to make them more understandable.
• It is now easier to change the color or the size of the elements present on the graph.
• The square outline has been removed.