Permalink
Browse files

sigma.plugins.neighborhood works

And the example neighborhood-plugin.html as well.
  • Loading branch information...
1 parent a15bcde commit e8f7797d0f210e931a6359e180e6a9e848a36efd @jacomyal committed Jan 19, 2014
@@ -65,6 +65,19 @@
<script src="../plugins/sigma.layout.forceAtlas2/sigma.layout.forceAtlas2.js"></script>
<script src="../plugins/sigma.plugins.neighborhoods/sigma.plugins.neighborhoods.js"></script>
<script>
+ /**
+ * This example shows how to explore the neighborhoods inside a graph,
+ * with a simple example plugin.
+ *
+ * Basically, a graph is loaded into a kind of database mockup (the
+ * sigma.plugins.neighborhoods plugin) that provides a method to retrieve
+ * the neighborhood (or ego-centered network) of a specified node. Then,
+ * a sigma instance will display only this graph, instead of the global
+ * one.
+ *
+ * And also, if you are looking for an exemple of graph custom method or
+ * how to use the graph model outside of sigma, this is the place.
+ */
var s = new sigma({
container: 'graph-container',
settings: {
@@ -92,44 +105,42 @@
});
});
- db.onready(function() {
+ db.load('data/arctic.json', function() {
// Out function to initialize sigma on a new neighborhood:
function refreshGraph(centerNodeId) {
- db.loadNeighborhood(centerNodeId, function(graph) {
- // First, let's stop the ForceAtlas2 algorithm:
- s.stopForceAtlas2();
+ // First, let's stop the ForceAtlas2 algorithm:
+ s.stopForceAtlas2();
- // Restart the camera:
- s.cameras[0].goTo({
- x: 0,
- y: 0,
- angle: 0,
- ratio: 1
- });
+ // Restart the camera:
+ s.cameras[0].goTo({
+ x: 0,
+ y: 0,
+ angle: 0,
+ ratio: 1
+ });
- // Empty the graph:
- s.graph.clear();
+ // Empty the graph:
+ s.graph.clear();
- // Read the graph:
- s.graph.read(graph);
+ // Read the graph:
+ s.graph.read(db.neighborhood(centerNodeId));
- // Randomize the positions of the nodes and initialize their size:
- var i,
- nodes = s.graph.nodes(),
- len = nodes.length;
+ // Randomize the positions of the nodes and initialize their size:
+ var i,
+ nodes = s.graph.nodes(),
+ len = nodes.length;
- for (i = 0; i < len; i++) {
- nodes[i].x = Math.cos(Math.PI * 2 * i / len);
- nodes[i].y = Math.sin(Math.PI * 2 * i / len);
- }
+ for (i = 0; i < len; i++) {
+ nodes[i].x = Math.cos(Math.PI * 2 * i / len);
+ nodes[i].y = Math.sin(Math.PI * 2 * i / len);
+ }
- // Refresh the display:
- s.refresh();
+ // Refresh the display:
+ s.refresh();
- // Start the ForceAtlas2 algorithm:
- s.startForceAtlas2();
- document.getElementById('toggle-layout').innerHTML = 'Stop layout';
- });
+ // Start the ForceAtlas2 algorithm:
+ s.startForceAtlas2();
+ document.getElementById('toggle-layout').innerHTML = 'Stop layout';
}
// Let's now bind this new function to the "clickNode" event:
@@ -140,7 +151,7 @@
// And finally, let's initialize the first graph:
refreshGraph('1');
- }).init('data/arctic.json');
+ });
</script>
</body>
</html>
@@ -5,25 +5,20 @@ Plugin developed by [Alexis Jacomy](https://github.com/jacomyal).
---
-This plugin provides a single function, `sigma.parsers.json()`, that will load a JSON encoded file, parse it, eventually instanciate sigma and fill the graph with the `graph.read()` method. The main goal is to avoid using jQuery only to load an external JSON file.
+This plugin provides a method to retrieve the neighborhood of a node. Basically, it loads a graph and stores it in a headless `sigma.classes.graph` instance, that you can query to retrieve neighborhoods.
-The most basic way to use this helper is to call it with a path and a sigma configuration object. It will then instanciate sigma, but after having added the graph into the config object.
+It is useful for people who want to provide a neighborhoods navigation inside a big graph instead of just displaying it, and without having to deploy an API or the list of every neighborhoods. But please note that this plugin is here as an example of what you can do with the graph model, and do not hesitate to try customizing your navigation through graphs.
-````javascript
-sigma.parsers.json(
- 'myGraph.json',
- { container: 'myContainer' }
-);
-````
+This plugin also adds to the graph model a method called "neighborhood". Check the code for more information.
-It is also possible to update an existing instance's graph instead.
+Here is how to use it:
````javascript
-sigma.parsers.json(
- 'myGraph.json',
- myExistingInstance,
- function() {
- myExistingInstance.refresh();
- }
-);
-````
+var db = new sigma.plugins.neighborhoods();
+db.load('path/to/my/graph.json', function() {
+ var nodeId = 'anyNodeID';
+ mySigmaInstance
+ .read(db.neighborhood(nodeId))
+ .refresh();
+});
+````
@@ -1,30 +1,24 @@
/**
- * This plugin "emulates" a graph database that provides a unique method to
- * retrieve the neighborhood of a node. Basically, it loads a graph and stores
- * it in a headless sigma.classes.graph instance.
+ * This plugin provides a method to retrieve the neighborhood of a node.
+ * Basically, it loads a graph and stores it in a headless sigma.classes.graph
+ * instance, that you can query to retrieve neighborhoods.
*
* It is useful for people who want to provide a neighborhoods navigation
- * inside a big graph instead of just displaying it.
+ * inside a big graph instead of just displaying it, and without having to
+ * deploy an API or the list of every neighborhoods.
*
* This plugin also adds to the graph model a method called "neighborhood".
- * Check the comments of the method for more information.
+ * Check the code for more information.
*
- * Here is how the plugin works:
+ * Here is how to use it:
*
- * 1. Initialize it like this:
* > var db = new sigma.plugins.neighborhoods();
- * > db.init('path/to/my/graph.json');
- *
- * 2. Wait for it to be ready, by using its "onready" method:
- * > db.onready(function() {
- * > console.log('db is ready!');
+ * > db.load('path/to/my/graph.json', function() {
+ * > var nodeId = 'anyNodeID';
+ * > mySigmaInstance
+ * > .read(db.neighborhood(nodeId))
+ * > .refresh();
* > });
- *
- * 3. Retrieve the neighborhood of a node:
- * > var centerNodeID = 'anyNodeID';
- * > mySigmaInstance
- * > .read(db.neighborhood(centerNodeID))
- * > .refresh();
*/
(function() {
'use strict';
@@ -119,32 +113,23 @@
graph = new sigma.classes.graph();
/**
- * This method just returns the neighborhood of a node
+ * This method just returns the neighborhood of a node.
*
- * @param {[type]} centerNodeID [description]
- * @param {Function} callback [description]
- * @return {[type]} [description]
+ * @param {string} centerNodeID The ID of the center node.
+ * @return {object} Returns the neighborhood.
*/
- this.getNeighborhood = function(centerNodeID, callback) {
- return ready ?
- graph.neighborhood(centerNodeID) :
- {
- nodes: [],
- edges: []
- };
+ this.neighborhood = function(centerNodeID) {
+ return graph.neighborhood(centerNodeID);
};
- this.onready = function(callback) {
- if (ready)
- callback();
- else
- readyCallbacks.push(callback);
-
- return this;
- };
- this.init = function(path) {
- // Reset unready state:
- ready = false;
+ /**
+ * This method loads the JSON graph at "path", stores it in the local graph
+ * instance, and executes the callback.
+ *
+ * @param {string} path The path of the JSON graph file.
+ * @param {?function} callback Eventually a callback to execute.
+ */
+ this.load = function(path, callback) {
// Quick XHR polyfill:
var xhr = (function() {
if (window.XMLHttpRequest)
@@ -176,13 +161,10 @@
xhr.open('GET', path, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
- // When the file is loaded, we can initialize everything and execute
- // the "ready" callbacks:
graph.clear().read(JSON.parse(xhr.responseText));
- ready = true;console.log(readyCallbacks.length);
- readyCallbacks.forEach(function(fn) {console.log('asklmhas');
- fn();
- });
+
+ if (callback)
+ callback();
}
};
@@ -191,5 +173,14 @@
return this;
};
+
+ /**
+ * This method cleans the graph instance "reads" a graph into it.
+ *
+ * @param {object} g The graph object to read.
+ */
+ this.read = function(g) {
+ graph.clear().read(g);
+ };
};
}).call(window);

0 comments on commit e8f7797

Please sign in to comment.