Live Code Examples: Cytoscape.js Initialization -- Incomplete?

Being brand new to cytoscape.js, I may be missing something obvious. Please forgive me if that is so. I am studying the first example offered here: reached from this page Three fi

Solution 1:

Your first example is indeed a fully working example. Just use the menu to the top left. Choose File -> Download. This will download a single HTML-file, that works out of the box.

The file is called jsbin.ravecala.1.html. Open with

firefox jsbin.ravecala.1.html 

(I also struggled a while before realizing this.)

Solution 2:

I really don't know what's your JavaScript & jQuery knowledge level, but it seems you may need to practice it all a little.

1. Yes, if you're referring to the following tag:

   <script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>

   This is indeed necessary, as it is the basis of cytoscape.js, the library itself, wich allows, for instance, add the method cytoscape to the variable #cy, as you mentioned in your second point.

2. The variable #cy is the div itself. jQuery refers to objects IDs this way, with #. So:

   <div id="cy"></div>

   Can be referred as $("#cy"). Wich adds the cytoscape function to it is the library itself.

I think that this live example is really good, although the one you linked is more basic and appropriate to get known with the basic structure and initialization of cytoscape.js. I suggest you to get known with jQuery (this course was really clear to me) and read the cytoscape.js documentation, which is full of rich examples.