Node-Link ⇔ Adjacency Matrix

Order:

Start Transition → Toggle to Matrix View → Toggle to Node View

View Complete Version

February 26, 2023

Mustapha Unubi Momoh

Data: Les Miserables Character Network.

Inspired by: Mike Bostock.

The visualizations are of two kinds: the node-link diagram and the adjacency matrix. The default visualization that is displayed is the node link diagram. Below are the interactions that are possible with the node-link diagram prior to starting the animated transition:

The nodes are colored based on their group or community. There are 11 groups.
Hovering over a node increases the node size and highlights the links directly, attached to the node. It also displays the character name and its group.
You can also click on a node to drag it to a new position. Dragging a node close to another node repels the node causing the entire diagram to move. Essentially, the common interactions that are possible with most force directed graphs.
Once you hit on `start animation`, the interactions with the node-link diagram will be limited to hovering over the node. Hovering over the node will only display the character name and its group.
Why is that? The node clones allow only one mouse over interaction and are not intricately linked to the edges. Hence, in the animation phase (during which the clones are made) once these clones overlap the original nodes, the other actions such as link highlighting, dragging, etc. are overridden. This will be fixed in later updates.

The adjacency matrix:

The cells of the adjacency matrix represent the links.
Only cells formed by nodes or characters that actually co-occurred (or were connected in the node link diagram) are colored.
Hovering over any of the colored cells highlights the cell and the corresponding nodes.
You can also reorder the cells based on name (alphabetically), the cluster (community), or the frequency (the number of cooccurrences)

Notes about transition

You can repeatedly toggle between the node link and the adjacency matrix.
However, if you decide to change the ordering of the nodes of the adjacency matrix during a matrix view, ensure the reordering is complete before toggling to the node view. Otherwise, reordering is paused (not complete) and character names (row and column names) may overlap each other on your next view.
You can always remove the overlap by selecting a reordering and allowing it to complete.