While working as a research assistant at the Computational Biology Research Center at the Amirkabir University of Technology, I was tasked with implmenting an algorithm for Identification of large disjoint motifs in biological networks. We soon realized we needed a visualization tool to help us better understand the networks we were working with, and the motifs that were identified. This was when I stumbled on the D3.js library, and decided to use its force layout for interactive visualization. The tool below is based on the countless examples and tutrials I found, which I’ve lost track of, and should give a glimpse of the power of D3.js.
This example is a visualization of protein-protein interaction network. Its main features are:
- Force Layout: You can drag the nodes around, and the links will adjust accordingly. You can also toggle between static and force layout.
- FishEye Distortion: It allows you to zoom in on a particular node, and see its neighbors more clearly.
- Zoom: You can zoom in and out of the network.
- Pin on Drop: You can pin a node in place by first activating the pin mode, and then dragging the node to the desired location.
- Highlighting: You can highlight a node and its neighbors by double-clicking on the node.
- Settings: You can adjust the charge, link strength, node radius, link width, velocity decay, and center gravity of the network.
The source code can be found here. The visualization code is in the output folder.
Network Details
Order:
Size:
Components:
Pattern Details
Order:
Size:
Frequency:
Settings
About