Visualization Chord Diagram

[julevdl]

User story

1. As a IT project manager
2. I want / need to see a summary of connections between nodes
3. So that I can see the importance of the flow

Acceptance criteria

• Displayed on subpage in main menu visualization
• Added as clickable option in dashboard Dashboard #45
• In Exploration Logic Exploration Page #289 Assign the weight "P" to this diagram and change the preview title to "Chord diagram" instead of "Pie Chart"
• In circle only display nodes -> relations are displayed as chords
• Chords are number of edges -> modify thickness of chords relative to number of edges
• "Focus function": mouseover allows to focus on node -> everything else fades
• Stays consistent with prev. used color scheme
• Visualization example:

Definition of done

• Documentation conform with tsdoc
• Reviewed with 4 eyes principle
• Did not break other code
• Understandable documentation for developers

[derwehr]

Regarding feasibility: There's a react component for building d3 chord-diagrams.
Also, here's a tutorial with the requested mouseover effect.