ArtArchive/Class5/marc_network/public/sigma/examples/neighborhoods-plugin.html

<!-- START SIGMA IMPORTS -->
<script src="../src/sigma.core.js"></script>
<script src="../src/conrad.js"></script>
<script src="../src/utils/sigma.utils.js"></script>
<script src="../src/utils/sigma.polyfills.js"></script>
<script src="../src/sigma.settings.js"></script>
<script src="../src/classes/sigma.classes.dispatcher.js"></script>
<script src="../src/classes/sigma.classes.configurable.js"></script>
<script src="../src/classes/sigma.classes.graph.js"></script>
<script src="../src/classes/sigma.classes.camera.js"></script>
<script src="../src/classes/sigma.classes.quad.js"></script>
<script src="../src/classes/sigma.classes.edgequad.js"></script>
<script src="../src/captors/sigma.captors.mouse.js"></script>
<script src="../src/captors/sigma.captors.touch.js"></script>
<script src="../src/renderers/sigma.renderers.canvas.js"></script>
<script src="../src/renderers/sigma.renderers.webgl.js"></script>
<script src="../src/renderers/sigma.renderers.svg.js"></script>
<script src="../src/renderers/sigma.renderers.def.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.nodes.def.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.nodes.fast.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.edges.def.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.edges.fast.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.edges.arrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.labels.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.hovers.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.nodes.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edges.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edges.curve.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edges.arrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edges.curvedArrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.curve.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.arrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.curvedArrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.extremities.def.js"></script>
<script src="../src/renderers/svg/sigma.svg.utils.js"></script>
<script src="../src/renderers/svg/sigma.svg.nodes.def.js"></script>
<script src="../src/renderers/svg/sigma.svg.edges.def.js"></script>
<script src="../src/renderers/svg/sigma.svg.edges.curve.js"></script>
<script src="../src/renderers/svg/sigma.svg.labels.def.js"></script>
<script src="../src/renderers/svg/sigma.svg.hovers.def.js"></script>
<script src="../src/middlewares/sigma.middlewares.rescale.js"></script>
<script src="../src/middlewares/sigma.middlewares.copy.js"></script>
<script src="../src/misc/sigma.misc.animation.js"></script>
<script src="../src/misc/sigma.misc.bindEvents.js"></script>
<script src="../src/misc/sigma.misc.bindDOMEvents.js"></script>
<script src="../src/misc/sigma.misc.drawHovers.js"></script>
<!-- END SIGMA IMPORTS -->
<script src="../plugins/sigma.layout.forceAtlas2/worker.js"></script>
<script src="../plugins/sigma.layout.forceAtlas2/supervisor.js"></script>
<script src="../plugins/sigma.plugins.neighborhoods/sigma.plugins.neighborhoods.js"></script>
<div id="container">
  <style>
    #graph-container {
      height: 400px;
      background: #000;
    }
  </style>
  <div class="buttons">
    <button id="toggle-layout">Stop layout</button>
    <button id="restart-camera">Restart camera</button>
    <div id="graph-container"></div>
  </div>
</div>
<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: {
        defaultLabelColor: '#fff',
        sideMargin: 2
      }
    }),
    db = new sigma.plugins.neighborhoods();

document.getElementById('toggle-layout').addEventListener('click', function() {
  if ((s.supervisor || {}).running) {
    s.killForceAtlas2();
    document.getElementById('toggle-layout').innerHTML = 'Start layout';
  } else {
    s.startForceAtlas2({worker: true});
    document.getElementById('toggle-layout').innerHTML = 'Stop layout';
  }
});
document.getElementById('restart-camera').addEventListener('click', function() {
  s.camera.goTo({
    x: 0,
    y: 0,
    angle: 0,
    ratio: 1
  });
});

db.load('data/arctic.json', function() {
  // Out function to initialize sigma on a new neighborhood:
  function refreshGraph(centerNodeId) {
    // First, let's stop the ForceAtlas2 algorithm:
    s.killForceAtlas2();

    // Restart the camera:
    s.camera.goTo({
      x: 0,
      y: 0,
      angle: 0,
      ratio: 1
    });

    // Empty the graph:
    s.graph.clear();

    // 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;

    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();

    // Start the ForceAtlas2 algorithm:
    s.startForceAtlas2({worker: true});
    document.getElementById('toggle-layout').innerHTML = 'Stop layout';
  }

  // Let's now bind this new function to the "clickNode" event:
  s.bind('clickNode', function(event) {
    if (!event.data.node.center)
      refreshGraph(event.data.node.id);
  });

  // And finally, let's initialize the first graph:
  refreshGraph('1');
});
</script>