PoC: implement a webpage to visualize the global graph of public comparisons

[amatissart]

This is an idea suggesting during a recent retrospective session.

TODO:

• propose an implementation to integrate such a graph on a webpage
  • with D3 (https://d3js.org) ?
• how to make it visually attractive ?
• potential interactions to access video details ?

[NatNgs]

Open questions prior to implementation:

• Do we compute the graph in backend (once every x time) or dynamically in frontend ? Maybe half on the back (preprocessing data) and half on the front (for display) ?
• What does the dataset looks like (in backend if computation in backend; in frontend if compute in frontend) ?
• What the graph should look like ? Should it be static (like a picture) or dynamic (like a video or an interactive object) ?

Current idea:

• Display videos as nodes (maybe squared that become video icons when zooming)
  • The more users have seen (compared at least once) a video, the bigger the node
  • Under 3 users having seen the video => display as a dot (no video icon)
  • Maybe some shadow or border of color according to global tournesol score (black -> red -> yellow -> green)
• Edges (links between nodes) if comparisons between two videos
  • More comparisons between two videos => Larger the edge
  • Try to make all egdes length the same with graph layout algorithm
    • That will obviously not be possible (graph isn't planar)
    • Comparisons made per multiple persons to have the priority to be of the fixed length (weight force between videos by comparisons count) => for large comparisons not to be stretched too far away
  • Color comparisons with red to green color gradient (green on the + side, red on the - side)
    • Color intensity depends on average comparison value between videos (0=gray, 1=grayish color, ... 10=bright color)

I imagine with this display to see groups where videos have been compared a lot to eachother (so maybe groups by video airing date or theme), and globaly red and green zones indicating where good and bad video are. I expect some moon like dots all around (all the less compared videos), displaying all the diversity available on Tournesol

Demo picture incoming, feel free to give others visualization styles idea or to suggest improvements to this idea above