NxTIC/view/js/charts.js

/* [1] Gestion du sociogramme
=========================================================*/
/* (0) On recupere les elements importants */
var SOCIOGRAM = {
	container: document.getElementById('sociogram'),
	sigma: null,

	request: { path: 'charts/network_data' },
	response: null,
	nodes: null,
	edges: null
};
/* (0.5) Surcharge graph */
// On recupere les voisins d'un noeud
sigma.classes.graph.addMethod('getNeighbords', function(nodeId){
	// On recupere les voisins du noeud courant
	var neighbors = this.allNeighborsIndex[nodeId];
	var tmp = neighbors;

	// Et on recupere les voisins des voisins
	for( subnodeId in tmp ){
		var subneighbors = this.allNeighborsIndex[subnodeId];
		for( subneighbor in subneighbors )
		neighbors[subneighbor] = subneighbors[subneighbor];
	}

	// On retourne le resultat
	return neighbors;
})


/* (0.8) Initialisation de SIGMA */
SOCIOGRAM.sigma = new sigma({renderer: { container:SOCIOGRAM.container, 'type': 'canvas' }});





/* (1) On recupere les informations via l'API */
api.send(SOCIOGRAM.request, function(response){
	// Si erreur, on quitte
	if( response.ModuleError != 0 ) return;

	// Sinon on enregistre
	SOCIOGRAM.response = response;


	/* (2) Parametrage de SIGMA */
	SOCIOGRAM.sigma.settings({
			defaultNodeColor: '#348ed8',
			defaultLabelSize: 14,
	        defaultLabelBGColor: "#ddd",
	        defaultHoverLabelBGColor: "#002147",
	        defaultLabelHoverColor: "#fff",
	        labelThreshold: 10,
	        defaultEdgeType: "curve"
		});


	/* (3) On recupere la liste des noeuds */
	SOCIOGRAM.nodes = [];

	// On calcule l'angle min
	var ang = 2*Math.PI / SOCIOGRAM.response.data.alter.length;

	// Parametres d'affichage
	var ray            = 500;

	// Pour chaque alter
	for( var i = 0 ; i < SOCIOGRAM.response.data.alter.length ; i++ ){
		SOCIOGRAM.nodes.push({
				'id':    'n-'+SOCIOGRAM.response.data.alter[i][0],
				'label': SOCIOGRAM.response.data.alter[i][1],
				'x':     ray+ ray*Math.cos(ang*i),
				'y':     ray+ ray*Math.sin(ang*i),
				'size':  SOCIOGRAM.response.data.alter[i][2]
			});
	}



	/* (4) On recupere la liste des liens */
	SOCIOGRAM.edges = [];

	for( var i = 0 ; i < SOCIOGRAM.response.data.inter.length ; i++ ){
		SOCIOGRAM.edges.push({
				'id':     'e-'+SOCIOGRAM.response.data.inter[i][0]+'-'+SOCIOGRAM.response.data.inter[i][1],
				'source': 'n-'+SOCIOGRAM.response.data.inter[i][0],
				'target': 'n-'+SOCIOGRAM.response.data.inter[i][1]
			});
	}



	/* (5) On ajoute nos noeuds */
	for( var i = 0 ; i < SOCIOGRAM.nodes.length ; i++)
		SOCIOGRAM.sigma.graph.addNode(SOCIOGRAM.nodes[i]);

	/* (6) On ajoute nos liens */
	for( var i = 0 ; i < SOCIOGRAM.edges.length ; i++)
		SOCIOGRAM.sigma.graph.addEdge(SOCIOGRAM.edges[i]);

	/* (7) Gestion des interactions */
	// On affiche que les voisins d'un noeud
	SOCIOGRAM.sigma.bind('clickNode', function(e){
		var nodeId = e.data.node.id;
		// On recupere les voisins
		var neighborNodes = SOCIOGRAM.sigma.graph.getNeighbords(nodeId);
		neighborNodes[nodeId] = e.data.node; // on ajoute le noeud clique

		SOCIOGRAM.sigma.graph.nodes().forEach(function(n) {
			if( neighborNodes[n.id] ) n.color = n.originalColor;
			else                      n.color = '#eee';
        });

		SOCIOGRAM.sigma.refresh();
	});

	// On affiche tous les noeuds quand on clique dans le vide
	SOCIOGRAM.sigma.bind('clickStage', function(e){
		SOCIOGRAM.sigma.graph.nodes().forEach(function(n) { n.color = n.originalColor; });

		SOCIOGRAM.sigma.refresh();
	});

	/* (8) On affiche le graphique */
	SOCIOGRAM.sigma.camera.ratio = 1.2;
	SOCIOGRAM.sigma.refresh();

});
























































var i,
    s,
    o,
    L = 10,
    N = 100,
    E = 500,
    g = {
      nodes: [],
      edges: []
    },
    step = 0;
// Generate a random graph:
for (i = 0; i < N; i++) {
  o = {
    id: 'n' + i,
    label: 'Node ' + i,
    circular_x: L * Math.cos(Math.PI * 2 * i / N - Math.PI / 2),
    circular_y: L * Math.sin(Math.PI * 2 * i / N - Math.PI / 2),
    circular_size: Math.random(),
    circular_color: '#' + (
      Math.floor(Math.random() * 16777215).toString(16) + '000000'
    ).substr(0, 6),
    grid_x: i % L,
    grid_y: Math.floor(i / L),
    grid_size: 1,
    grid_color: '#ccc'
  };
  ['x', 'y', 'size', 'color'].forEach(function(val) {
    o[val] = o['grid_' + val];
  });
  g.nodes.push(o);
}
for (i = 0; i < E; i++)
  g.edges.push({
    id: 'e' + i,
    source: 'n' + (Math.random() * N | 0),
    target: 'n' + (Math.random() * N | 0),
  });
// Instantiate sigma:
s = new sigma({
  graph: g,
  renderer: { container: document.getElementById('graph-container'), 'type': 'canvas' },
  settings: {
    animationsTime: 1000
  }
});

setInterval(function(){
	var prefix = ['grid_', 'circular_'][step = +!step];
	  sigma.plugins.animate(
	    s,
	    {
	      x: prefix + 'x',
	      y: prefix + 'y',
	      size: prefix + 'size',
	      color: prefix + 'color'
	    }
	  );
}, 10000);