Sociogramme plus ergonomique reste le placement relatif à gérer.
This commit is contained in:
xdrm-brackets
parent
d2ad9576a6
commit
5ebc8891ac
|
|
@ -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( 1743, "Melissa", 79 ),
|
||||
array( 3739, "Sue", 38 ),
|
||||
array( 36, "Rasmussen", 34 ),
|
||||
array( 1372, "Brown", 35 ),
|
||||
array( 3030, "Brock", 84 ),
|
||||
array( 3821, "Savage", 21 ),
|
||||
array( 1288, "Black", 17 ),
|
||||
array( 1443, "Susie", 69 ),
|
||||
array( 4129, "Rowe", 66 ),
|
||||
array( 71, "Dillard", 87 ),
|
||||
array( 1002, "Richmond", 5 ),
|
||||
array( 640, "Morris", 24 ),
|
||||
array( 2335, "Daugherty", 53 ),
|
||||
array( 2541, "Hughes", 74 ),
|
||||
array( 3963, "Roach", 13 ),
|
||||
array( 4550, "Hazel", 30 ),
|
||||
array( 3120, "Eugenia", 97 ),
|
||||
array( 4302, "Nicholson", 25 ),
|
||||
array( 859, "Marguerite", 70 ),
|
||||
array( 2551, "Aurora", 36 ),
|
||||
array( 3612, "Tracie", 55 ),
|
||||
array( 3040, "Fulton", 62 ),
|
||||
array( 1895, "Stuart", 37 ),
|
||||
array( 4342, "Latasha", 21 ),
|
||||
array( 2957, "Coleen", 1 ),
|
||||
array( 2493, "Contreras", 100 ),
|
||||
array( 4776, "Holmes", 97 ),
|
||||
array( 3623, "Hallie", 88 ),
|
||||
array( 3660, "Ginger", 26 ),
|
||||
array( 471, "Slater", 23 ),
|
||||
array( 4581, "Elnora", 23 ),
|
||||
array( 286, "Patton", 71 ),
|
||||
array( 3210, "Autumn", 23 ),
|
||||
array( 1896, "Benton", 99 ),
|
||||
array( 4875, "Fern", 17 ),
|
||||
array( 2156, "Bond", 99 ),
|
||||
array( 1556, "Ingrid", 34 ),
|
||||
array( 2097, "Case", 23 ),
|
||||
array( 3024, "Pat", 57 ),
|
||||
array( 1121, "Reeves", 41 ),
|
||||
array( 1832, "Francis", 75 ),
|
||||
array( 3733, "Moore", 77 ),
|
||||
array( 737, "Elva", 49 ),
|
||||
array( 1137, "Stevenson", 10 ),
|
||||
array( 988, "Lauri", 44 ),
|
||||
array( 1182, "Boone", 19 ),
|
||||
array( 909, "Morin", 68 )
|
||||
array( 653, "Norris", 2*5/100 ),
|
||||
array( 1743, "Melissa", 79*5/100 ),
|
||||
array( 3739, "Sue", 38*5/100 ),
|
||||
array( 36, "Rasmussen", 34*5/100 ),
|
||||
array( 1372, "Brown", 35*5/100 ),
|
||||
array( 3030, "Brock", 84*5/100 ),
|
||||
array( 3821, "Savage", 21*5/100 ),
|
||||
array( 1288, "Black", 17*5/100 ),
|
||||
array( 1443, "Susie", 69*5/100 ),
|
||||
array( 4129, "Rowe", 66*5/100 ),
|
||||
array( 71, "Dillard", 87*5/100 ),
|
||||
array( 1002, "Richmond", 5*5/100 ),
|
||||
array( 640, "Morris", 24*5/100 ),
|
||||
array( 2335, "Daugherty", 53*5/100 ),
|
||||
array( 2541, "Hughes", 74*5/100 ),
|
||||
array( 3963, "Roach", 13*5/100 ),
|
||||
array( 4550, "Hazel", 30*5/100 ),
|
||||
array( 3120, "Eugenia", 97*5/100 ),
|
||||
array( 4302, "Nicholson", 25*5/100 ),
|
||||
array( 859, "Marguerite", 70*5/100 ),
|
||||
array( 2551, "Aurora", 36*5/100 ),
|
||||
array( 3612, "Tracie", 55*5/100 ),
|
||||
array( 3040, "Fulton", 62*5/100 ),
|
||||
array( 1895, "Stuart", 37*5/100 ),
|
||||
array( 4342, "Latasha", 21*5/100 ),
|
||||
array( 2957, "Coleen", 1*5/100 ),
|
||||
array( 2493, "Contreras", 100*5/100 ),
|
||||
array( 4776, "Holmes", 97*5/100 ),
|
||||
array( 3623, "Hallie", 88*5/100 ),
|
||||
array( 3660, "Ginger", 26*5/100 ),
|
||||
array( 471, "Slater", 23*5/100 ),
|
||||
array( 4581, "Elnora", 23*5/100 ),
|
||||
array( 286, "Patton", 71*5/100 ),
|
||||
array( 3210, "Autumn", 23*5/100 ),
|
||||
array( 1896, "Benton", 99*5/100 ),
|
||||
array( 4875, "Fern", 17*5/100 ),
|
||||
array( 2156, "Bond", 99*5/100 ),
|
||||
array( 1556, "Ingrid", 34*5/100 ),
|
||||
array( 2097, "Case", 23*5/100 ),
|
||||
array( 3024, "Pat", 57*5/100 ),
|
||||
array( 1121, "Reeves", 41*5/100 ),
|
||||
array( 1832, "Francis", 75*5/100 ),
|
||||
array( 3733, "Moore", 77*5/100 ),
|
||||
array( 737, "Elva", 49*5/100 ),
|
||||
array( 1137, "Stevenson", 10*5/100 ),
|
||||
array( 988, "Lauri", 44*5/100 ),
|
||||
array( 1182, "Boone", 19*5/100 ),
|
||||
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),
|
||||
'y' => 500 + (100-$alter[2])*(400/100) * sin($ang*$i)
|
||||
'x' => 500 + (5-$alter[2])*(400/5) * cos($ang*$i),
|
||||
'y' => 500 + (5-$alter[2])*(400/5) * sin($ang*$i)
|
||||
);
|
||||
|
||||
// On ajoute le cercle associe a l'alter courant
|
||||
|
|
|
|||
12
view.php
12
view.php
|
|
@ -25,14 +25,14 @@
|
|||
|
||||
|
||||
<!-- Dépendences Javascript -->
|
||||
<script type='text/javascript' src='/f/js/input-checker/js/lib' ></script> <!-- Gestion dynamique des saisies -->
|
||||
<script type='text/javascript' src='/f/js/reset/js/lib' ></script> <!-- Corrections Javascript natif (ajouts) -->
|
||||
<script type='text/javascript' src='/f/js/api/js/lib' ></script> <!-- Gestion des transactions avec le serveur -->
|
||||
<script type='text/javascript' src='/f/js/page-manager/js/lib' ></script> <!-- Gestion réseau/chargement/liens/URL -->
|
||||
<script type='text/javascript' src='/f/js/input-checker/js/lib' ></script> <!-- Gestion dynamique des saisies -->
|
||||
<script type='text/javascript' src='/f/js/reset/js/lib' ></script> <!-- Corrections Javascript natif (ajouts) -->
|
||||
<script type='text/javascript' src='/f/js/api/js/lib' ></script> <!-- Gestion des transactions avec le serveur -->
|
||||
<script type='text/javascript' src='/f/js/page-manager/js/lib' ></script> <!-- Gestion réseau/chargement/liens/URL -->
|
||||
|
||||
<!-- 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-min/sigma' ></script> <!-- Gestion du graphique de type réseau -->
|
||||
<script type='text/javascript' src='/f/js/sigma-plugins-animate-min/sigma/plugins' ></script> <!-- Gestion du JSON pour le graphique reseau -->
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -10,8 +10,31 @@ var SOCIOGRAM = {
|
|||
nodes: null,
|
||||
edges: null
|
||||
};
|
||||
// Initialisation de SIGMA
|
||||
SOCIOGRAM.sigma = new sigma(SOCIOGRAM.container);
|
||||
/* (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){
|
||||
|
|
@ -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),
|
||||
'y': 500+ 100*Math.sin(ang*i),
|
||||
'size': SOCIOGRAM.response.data.alter[i][2]/10
|
||||
'x': ray+ ray*Math.cos(ang*i),
|
||||
'y': ray+ ray*Math.sin(ang*i),
|
||||
'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);
|
||||
Loading…
Reference in New Issue