Sociogramme plus ergonomique reste le placement relatif à gérer.

manager/module/chart/networkChart.php

@@ -20,54 +20,54 @@
 				/* (2) Liste des alters */
 				'alter' => array(
 					// Pour chaque alter, on a ID_ALTER, NOM_ALTER, AFFINITE_ALTER
-					array( 653,  "Norris",     2   ),
+					array( 653,  "Norris",     2*5/100   ),
-				    array( 1743, "Melissa",    79  ),
+				    array( 1743, "Melissa",    79*5/100  ),
-				    array( 3739, "Sue",        38  ),
+				    array( 3739, "Sue",        38*5/100  ),
-				    array( 36,   "Rasmussen",  34  ),
+				    array( 36,   "Rasmussen",  34*5/100  ),
-				    array( 1372, "Brown",      35  ),
+				    array( 1372, "Brown",      35*5/100  ),
-				    array( 3030, "Brock",      84  ),
+				    array( 3030, "Brock",      84*5/100  ),
-				    array( 3821, "Savage",     21  ),
+				    array( 3821, "Savage",     21*5/100  ),
-				    array( 1288, "Black",      17  ),
+				    array( 1288, "Black",      17*5/100  ),
-				    array( 1443, "Susie",      69  ),
+				    array( 1443, "Susie",      69*5/100  ),
-				    array( 4129, "Rowe",       66  ),
+				    array( 4129, "Rowe",       66*5/100  ),
-				    array( 71,   "Dillard",    87  ),
+				    array( 71,   "Dillard",    87*5/100  ),
-				    array( 1002, "Richmond",   5   ),
+				    array( 1002, "Richmond",   5*5/100   ),
-				    array( 640,  "Morris",     24  ),
+				    array( 640,  "Morris",     24*5/100  ),
-				    array( 2335, "Daugherty",  53  ),
+				    array( 2335, "Daugherty",  53*5/100  ),
-				    array( 2541, "Hughes",     74  ),
+				    array( 2541, "Hughes",     74*5/100  ),
-				    array( 3963, "Roach",      13  ),
+				    array( 3963, "Roach",      13*5/100  ),
-				    array( 4550, "Hazel",      30  ),
+				    array( 4550, "Hazel",      30*5/100  ),
-				    array( 3120, "Eugenia",    97  ),
+				    array( 3120, "Eugenia",    97*5/100  ),
-				    array( 4302, "Nicholson",  25  ),
+				    array( 4302, "Nicholson",  25*5/100  ),
-				    array( 859,  "Marguerite", 70  ),
+				    array( 859,  "Marguerite", 70*5/100  ),
-				    array( 2551, "Aurora",     36  ),
+				    array( 2551, "Aurora",     36*5/100  ),
-				    array( 3612, "Tracie",     55  ),
+				    array( 3612, "Tracie",     55*5/100  ),
-				    array( 3040, "Fulton",     62  ),
+				    array( 3040, "Fulton",     62*5/100  ),
-				    array( 1895, "Stuart",     37  ),
+				    array( 1895, "Stuart",     37*5/100  ),
-				    array( 4342, "Latasha",    21  ),
+				    array( 4342, "Latasha",    21*5/100  ),
-				    array( 2957, "Coleen",     1   ),
+				    array( 2957, "Coleen",     1*5/100   ),
-				    array( 2493, "Contreras",  100 ),
+				    array( 2493, "Contreras",  100*5/100 ),
-				    array( 4776, "Holmes",     97  ),
+				    array( 4776, "Holmes",     97*5/100  ),
-				    array( 3623, "Hallie",     88  ),
+				    array( 3623, "Hallie",     88*5/100  ),
-				    array( 3660, "Ginger",     26  ),
+				    array( 3660, "Ginger",     26*5/100  ),
-				    array( 471,  "Slater",     23  ),
+				    array( 471,  "Slater",     23*5/100  ),
-				    array( 4581, "Elnora",     23  ),
+				    array( 4581, "Elnora",     23*5/100  ),
-				    array( 286,  "Patton",     71  ),
+				    array( 286,  "Patton",     71*5/100  ),
-				    array( 3210, "Autumn",     23  ),
+				    array( 3210, "Autumn",     23*5/100  ),
-				    array( 1896, "Benton",     99  ),
+				    array( 1896, "Benton",     99*5/100  ),
-				    array( 4875, "Fern",       17  ),
+				    array( 4875, "Fern",       17*5/100  ),
-				    array( 2156, "Bond",       99  ),
+				    array( 2156, "Bond",       99*5/100  ),
-				    array( 1556, "Ingrid",     34  ),
+				    array( 1556, "Ingrid",     34*5/100  ),
-				    array( 2097, "Case",       23  ),
+				    array( 2097, "Case",       23*5/100  ),
-				    array( 3024, "Pat",        57  ),
+				    array( 3024, "Pat",        57*5/100  ),
-				    array( 1121, "Reeves",     41  ),
+				    array( 1121, "Reeves",     41*5/100  ),
-				    array( 1832, "Francis",    75  ),
+				    array( 1832, "Francis",    75*5/100  ),
-				    array( 3733, "Moore",      77  ),
+				    array( 3733, "Moore",      77*5/100  ),
-				    array( 737,  "Elva",       49  ),
+				    array( 737,  "Elva",       49*5/100  ),
-				    array( 1137, "Stevenson",  10  ),
+				    array( 1137, "Stevenson",  10*5/100  ),
-				    array( 988,  "Lauri",      44  ),
+				    array( 988,  "Lauri",      44*5/100  ),
-				    array( 1182, "Boone",      19  ),
+				    array( 1182, "Boone",      19*5/100  ),
-				    array( 909,  "Morin",      68  )
+				    array( 909,  "Morin",      68*5/100  )
 				),
 
 				/* (1) Liste des relations */
@@ -91,7 +91,6 @@
 				    array( 2156, 3030 ),
 				    array( 4342, 4302 ),
 				    array( 71,   286  ),
-				    array( 1896, 1896 ),
 				    array( 3120, 1182 ),
 				    array( 3821, 3660 ),
 				    array( 2541, 1743 ),
@@ -171,8 +170,8 @@
 			foreach($data['alter'] as $i=>$alter){
 				// On calcule l'origine (centre du cercle)
 				$origins[$alter[0]] = array(
-					'x' => 500 + (100-$alter[2])*(400/100) * cos($ang*$i),
+					'x' => 500 + (5-$alter[2])*(400/5) * cos($ang*$i),
-					'y' => 500 + (100-$alter[2])*(400/100) * sin($ang*$i)
+					'y' => 500 + (5-$alter[2])*(400/5) * sin($ang*$i)
 				);
 
 				// On ajoute le cercle associe a l'alter courant

view.php

@@ -32,7 +32,7 @@
 
 		<!-- Librairies Externes Javascript -->
 		<script type='text/javascript' src='/f/js/sigma-min/sigma'                            ></script>  <!-- Gestion du graphique de type réseau      -->
-		<script type='text/javascript' src='/f/js/sigma-parsers-json-min/sigma/plugins' ></script>  <!-- Gestion du JSON pour le graphique reseau -->
+		<script type='text/javascript' src='/f/js/sigma-plugins-animate-min/sigma/plugins' ></script>  <!-- Gestion du JSON pour le graphique reseau -->
 	</head>
 	<body>
 		

view/charts.php

@@ -49,6 +49,14 @@ $render = $answer->get('render');
 
 
 
+	<!-- SECTION 1 BIS - SOCIOGRAMME SPATIAL -->
+	<section>
+		<center><h6>SOCIOGRAMME EGOCENTRE</h6></center>
+		<div id='graph-container' style='border-radius:3px;border: 1px solid #ddd;margin: 2em;width:30em;height: 30em;'></div>
+	</section>
+
+
+
 	<!-- SECTION 2 - SOCIOGRAMME EGOCENTRE -->
 	<section>
 		<center><h6>SOCIOGRAMME EGOCENTRE</h6></center>

view/js/charts.js

@@ -10,8 +10,31 @@ var SOCIOGRAM = {
 	nodes: null,
 	edges: null
 };
-// Initialisation de SIGMA
+/* (0.5) Surcharge graph */
-SOCIOGRAM.sigma = new sigma(SOCIOGRAM.container);
+// 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){
@@ -24,7 +47,13 @@ api.send(SOCIOGRAM.request, function(response){
 
 	/* (2) Parametrage de SIGMA */
 	SOCIOGRAM.sigma.settings({
-			defaultNodeColor: '#ec5148'
+			defaultNodeColor: '#348ed8',
+			defaultLabelSize: 14,
+	        defaultLabelBGColor: "#ddd",
+	        defaultHoverLabelBGColor: "#002147",
+	        defaultLabelHoverColor: "#fff",
+	        labelThreshold: 10,
+	        defaultEdgeType: "curve"
 		});
 
 
@@ -34,14 +63,17 @@ api.send(SOCIOGRAM.request, function(response){
 	// 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':     500+ 100*Math.cos(ang*i),
+				'x':     ray+ ray*Math.cos(ang*i),
-				'y':     500+ 100*Math.sin(ang*i),
+				'y':     ray+ ray*Math.sin(ang*i),
-				'size':  SOCIOGRAM.response.data.alter[i][2]/10
+				'size':  SOCIOGRAM.response.data.alter[i][2]
 			});
 	}
 
@@ -69,10 +101,145 @@ api.send(SOCIOGRAM.request, function(response){
 		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 = 2;
+	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);