CODEWITHSUNDEEP
javascriptjsoncytoscape.jscytoscapewebcola
ma-jo-ne
ma-jo-ne

Reputation: 147

Cytoscape Cola.js Layout edge length = text corpus visualisation

I want to set the edge length with the weight in my data.json.

Like in the cytoscape-spread demo the edge length should be longer depending on the weight.

"data" : {
    "id" : "1965",
    "source" : "108",
    "target" : "149",
    "shared_name" : "A (interacts with) B",
    "shared_interaction" : "interacts with",
    "name" : "A (interacts with) B",
    "interaction" : "interacts with",
    "SUID" : 1965,
    "weight" : 342,
    "selected" : false
  },
  "selected" : false

The weighting is the count how often A and B stands together in my text-corpus.

I tried different layouts but don't now how i can change the position, that the highest weight has the shortest distance.

At the moment i try to use the 'cose' Layout and set idealEdgeLength: function( edge ){ return edge.data('weight'); }

  var options = {
  name: 'cose',

  // Called on `layoutready`
  ready: function(){},

  // Called on `layoutstop`
  stop: function(){},

  // Whether to animate while running the layout
  animate: true,


  // Whether to fit the network view after when done
  fit: true,

  // Padding on fit
  padding: 30,

  // Constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
  boundingBox: undefined,

  // Randomize the initial positions of the nodes (true) or use existing positions (false)
  randomize: false,


  // Ideal edge (non nested) length
  idealEdgeLength: function( edge ){ return edge.data('weight'); },


};

cy.layout( options );

And cola.js edgeLength:

 name: 'cola',
            animate: true, // whether to show the layout as it's running
            refresh: 1, // number of ticks per frame; higher is faster but more jerky
            maxSimulationTime: 4000, // max length in ms to run the layout
            ungrabifyWhileSimulating: false, // so you can't drag nodes during layout
            fit: true, // on every layout reposition of nodes, fit the viewport
            padding: 0, // padding around the simulation
            boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }

            // layout event callbacks
            ready: function(){}, // on layoutready
            stop: function(){}, // on layoutstop

            // positioning options
            randomize: false, // use random node positions at beginning of layout
            avoidOverlap: true, // if true, prevents overlap of node bounding boxes
            handleDisconnected: true, // if true, avoids disconnected components from overlapping
            nodeSpacing: function( node ){ return 10; }, // extra spacing around nodes
            flow: undefined, // use DAG/tree flow layout if specified, e.g. { axis: 'y', minSeparation: 30 }
            alignment: undefined, // relative alignment constraints on nodes, e.g. function( node ){ return { x: 0, y: 1 } }

            // different methods of specifying edge length
            // each can be a constant numerical value or a function like `function( edge ){ return 2; }`
            edgeLength: function( edge ){var len = parseInt(edge.data('weight')); return len; }, // sets edge length directly in simulation
            edgeSymDiffLength: undefined, // symmetric diff edge length in simulation
            edgeJaccardLength: undefined, // jaccard edge length in simulation

            // iterations of cola algorithm; uses default values on undefined
            unconstrIter: undefined, // unconstrained initial layout iterations
            userConstIter: undefined, // initial layout iterations with user-specified constraints
            allConstIter: undefined, // initial layout iterations with all constraints including non-overlap

            // infinite layout options
            infinite: false // overrides all other options for a forces-all-the-time mode

Upvotes: 1

Views: 1416

Answers (1)

maxkfranz
maxkfranz

Reputation: 12242

If you want nodes to be pulled closer together if the edge weight is high, then the edge length needs to be inversely proportional to the weight, e.g. k / edge.data('weight') for some constant k. You'll have to experiment to find which k value works best for your data.

Take a look at the Cola demo source for an example. It uses this exact approach, and the slider just changes the k value.

http://js.cytoscape.org/demos/2ebdc40f1c2540de6cf0/

Upvotes: 1

Related Questions