Springy/Ajax/JSON Cytoscape.js

[Theresa Becker]

Hello!

First let me begin by saying that I am complete newbie to JavaScript, Jquery, Cytoscape.js etc. and I hope this is the appropriate forum. My task is to build a web application using cytoscape.js to create network visualizations. I have been cramming tutorials in trying to get up to speed, and I am having a few issues. Any advice and/or insight is greatly appreciated. 

I am trying to use Springy and it seems like there are two ways to use Springy. One is to set it in layouts after initiating a new 

var cy = window.cy = cytoscape({

      container: document.getElementById('cy'),

 // etc

}); 

 and the other is 

var graph = new Springy.Graph(); 

Considering my end goal is to load in a user provided JSON file via ajax and rawgit, my guess is that the latter is better? 

My next question is then, I am not sure how to loop through json file and create new nodes etc. I have selected Springy since it is a force directed graph that does not seem to require a preset location for the nodes. Is this the case? Here is how I am planning to load the file:

$(function(){

  

  // get exported json from cytoscape desktop via ajax

  var graphP = $.ajax({

    url: 'https://rawgit.com/theresajbecker/CompBio/master/TokyosmallTest/Tokyosmall2.json', // tokyo-railways.json

    type: 'GET',

    dataType: 'json'

  });

  function initCy( then ){

    var loading = document.getElementById('loading');

    var expJson = then[0];

    //taking out style load

    var styleJson = then[1];

    var elements = expJson.elements;

    console.log(loading )

    loading.classList.add('loaded');

    

   var graph = new Springy.Graph();

  // the below code is psuedo-esque 

     var node = graphP.nodes;

       

  for ( var i in node) {

graph.newNode( {id: 'name'});

};

Any insight as to what I am doing wrong here would be greatly appreciated. 

Thanks for your time and help. 

[Max Franz]

Simply call the layout as in the example in the docs:

http://js.cytoscape.org/#layouts/springy

`new Springy.Graph()` will not do anything with Cytoscape.js.