Proof of concept for the visualization of Power Graph with cytoscape.js. The living implementation is in bubbletools.
Install the needed javascript files in site/js/:
- cytoscape.min.js
- cytoscape-cose-bilkent.js module, improving compound support
See Makefile for automatic setup of site example. For instance, make basics for a basic usage of Cytoscape.js.
The make_from_bubble.py python script compiles any bubble file into a code.js equivalent.
Use make make-bbl to put the data/test.bbl equivalent into the automade example, and make automade to load this example.
Then open the webpage with make open.
False edges are given in the bubble file with the FALSEEDGE and FALSEPOWEREDGE lines, as shown in data/test-falsedge.bbl example.
This is currently handled by the compiler bubble to js, in two different manners (depends of a flag hardcoded in the code) :
- the false edges are kept hidden, until the mouse goes over the involved poweredge (quasi-biclique) or powernode (quasi-clique)
- the false edges are shown, and grow in width when hovered
- use compounds to simulate power-nodes ; it's limited to rectangle shape giving a weird-looking powergraph
- use cose-bilkent layout, which do not gives tremendous results but is the best available
- self-loops on compounds works unbelievably bad, because they are rendered using the compounds center as endpoints. As a consequence, the compounds size modifies the edge shape. If the compound is too big, the edge disappear behind the compound.
- The CyOog convention (color cliques in green) has been kept as a workaround.