a.
Adding node labels
: Modify graph.html to show a node label (the node name, i.e., the source) below each node. If a node is dragged, its label must move with it.
b.
Styling links: Style the links based on the “value” field in the links array. Assign the following styles:
If the value of the edge is equal to 0, the link should be green and thick.
If the value of the edge is equal to 1, the link should be blue and thin.
c. Scaling node sizes:
-
Scale the radius of each node in the graph based on the degree of the node (you may try linear or squared scale, but you are not limited to these choices).
Note: Regardless of which scale you decide to use, you should avoid extreme node sizes (e.g., nodes that are mere points, or barely visible, as well as very large nodes). Failure to do so will result in a poor quality visualization.
d.
Pinning nodes
(fixing node positions):
- Modify the code so that when you double click a node, it pins the node’s position such that it will not be modified by the graph layout algorithm (note: pinned nodes can still be dragged around by the user but they will remain at their positions otherwise). Node pinning is an effective interaction technique to help users spatially organize nodes during graph exploration.
- Mark pinned nodes to visually distinguish them from unpinned nodes, e.g., pinned nodes are shown in a different color, border thickness or visually annotated with an “asterisk” (*), etc.
- Double clicking a pinned node should unpin (unfreeze) its position and unmark it.