/* [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);