How to use sigma - 7 common examples

* Highlight Neighbors Example
 * ============================
 *
 * @Yomguithereal
 *
 * Highlighting neighbors of the clicked node using a rendering engine such
 * as sigma.
 */
import Graph from 'graph';
import sigma from 'sigma';

// Creating our graph (we'll assume it's hydrated with external data)
const graph = new Graph(data);

// Instantiating sigma
const sigInst = new sigma(graph, {
  settings: {
    edgeColor: 'source'
  }
});

// Click handler
function clickHandler({data: {node}}) {

  // Creating a set of the node & its neighbors
  const nodesToHighlight = new Set([node].concat(graph.neighbors(node)));

  // Iterating through nodes
  graph.forEachNode(node => {
    const color = nodesToHighlight.has(node) ?
      graph.getNodeAttribute(node, 'originalColor') :
      '#ccc';

doubleClickEnabled: false,
                    defaultEdgeColor: "#ccc",
                    defaultNodeColor: "black",
                    defaultEdgeArrow: "target",
                    edgeColor: "edge",
                    minEdgeSize: 1,
                    maxEdgeSize: 2,
                    minNodeSize: 1,
                    maxNodeSize: 10,
                    enableHovering: true,
                    minArrowSize: 1,
                    verbose: true
                }
            });

            sigma.plugins.dragNodes(self._s, self._s.renderers[0]);

            self._s.bind("clickNode", function (node) {
                self._onNodeClicked.apply(self, arguments);
            });

            self.on("viewDepends:selected", function (binderProc) {
                self.select(binderProc);
            });

            // Add any pending node.
            self._addGraphNode();

            self._functions.add(new Function({
                id: "fnStartAutoPlace",
                name: "Start Auto Place",
                callback: function () {

window.Graph = graphology;

var randomLayout = graphology.library.layout.random;

var forceAtlas2Layout = graphology.library.layoutForceAtlas2;
window.layout = {
  random: randomLayout,
  forceAtlas2: forceAtlas2Layout
};

window.ForceAtlas2Layout = graphology.library.FA2Layout;

window.louvain = graphology.library.communitiesLouvain;

// Requiring sigma
window.SigmaWebGLRenderer = require('sigma/renderers/webgl').default;

// Requiring own modules
require('./view_upload/upload.js');
require('./view_board/board.js');
require('./recipes/_recipes_list_.js');

// Declare app level module which depends on views, and components
angular.module('graphrecipes', [
  'ngRoute',
  'ngMaterial',
  'graphrecipes.view_upload',
  'graphrecipes.view_board',
  'graphrecipes.recipes_list'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.otherwise({redirectTo: '/upload'});

this.renderer = {
		container: 'sigma-canvas',
		type: 'canvas',
	};

	this.settings = {
		sideMargin: 1,
		singleHover: true,
		minNodeSize: 0.5,
		maxNodeSize: 16,
		drawLabels: false,
		defaultEdgeType: 'arrow',
	};

	this.sigma = new Sigma({
		renderer: this.renderer,
		settings: this.settings,
	});

	function NodeSelect(sigma) {
		this.sigma = sigma;
		this.color = '#5bc0de';

		this.add = function (event) {
			this.remove(event);
			this.node = event.data.node;
			this.prevColor = this.node.color;
			this.node.color = this.color;
			this.sigma.refresh();
		};

color: color
	});
});
app.stats.chunks.forEach(function(chunk) {
	chunk.parents.forEach(function(parent) {
		edges.push({
			id: "edge" + chunk.id + "-" + parent,
			source: "chunk" + parent,
			target: "chunk" + chunk.id,
			arrow: "target",
			type: "arrow",
			size: chunk.parents.length
		});
	});
});
var s = new sigma({
	graph: {
		nodes: nodes,
		edges: edges
	},
	renderer: {
		type: "canvas",
		container: element
	},
	settings: {
		edgeColor: "target",
		maxNodeSize: 20,
		minNodeSize: 4,
		maxEdgeSize: 3,
		minEdgeSize: 1
	}
});

sourceModule: parentModule,
			source: "module" + parentModule.uid,
			targetModule: module,
			targetModuleUid: module.uid,
			target: "module" + module.uid,
			arrow: "target",
			type: async ? "dashedArrow" : "arrow",
			lineDash: module.chunks.length === 0 ? [2] : [5],
			originalColor: edgeColor,
			color: edgeColor,
			size: weight,
			weight: async ? weight / 4 : weight
		});
	});
});
var s = new sigma({
	graph: {
		nodes: nodes,
		edges: edges
	},
	renderer: {
		type: "canvas",
		container: element
	},
	settings: {
		edgeColor: "target",
		maxNodeSize: 4,
		minNodeSize: 4,
		maxEdgeSize: 2,
		minEdgeSize: 0.05
	}
});

import { sigma as Sigma } from 'sigma';
import netjsonData from '../../examples/data/netjson.json';
import 'forceLayoutWorker';
import 'forceLayoutSupervisor';
import './netjsongraph.css';

const N = 100;
const s = new Sigma('container');

netjsonData.nodes.forEach((n, i) => {
  s.graph.addNode({
    id: n.id,
    label: n.id,
    size: 1,
    color: 'red',
    x: 100 * Math.cos(2 * i * Math.PI / N),
    y: 100 * Math.sin(2 * i * Math.PI / N)
  });
});

netjsonData.links.forEach((l, i) => {
  s.graph.addEdge({
    id: i,
    source: l.source,