iramuteq.org Git - iramuteq/blob - webexport/graphe.html

   1 <html class="no-js" lang="en">
   2 <head>
   3 <meta charset="utf-8" />
   4   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   5   <title>%(titre)s</title>
   6 <script src="js/jquery.min.js"></script>
   7 <script src="js/sigma.min.js"></script>
   8 <script src="js/sigma.fisheye.js"></script>
   9 <script src="js/sigma.parseGexf.js"></script>
  10 </head>
  11 <body>
  12 <div class="container">
  13     <div class="row">
  14   <h2 class="span12" id="post-title">Load and display a GEXF encoded graph</h2>
  15
  16   <div class="span12 sigma-parent" id="sigma-example-parent">
  17     <div class="sigma-expand" id="sigma-example"></div>
  18   </div>
  19 </div>
  20
  21 <script type="text/javascript">
  22 function init() {
  23   // Instanciate sigma.js and customize rendering :
  24   //var sigInst = sigma.init(document.getElementById('sigma-example')).drawingProperties({
  25   var sigInst = sigma.init($('#sigma-example')[0]).drawingProperties({
  26     defaultLabelColor: '#fff',
  27     labelSize: 'proportional',
  28     labelSizeRatio: 1,
  29     //defaultLabelSize: 10,
  30
  31     defaultLabelBGColor: '#fff',
  32     defaultLabelHoverColor: '#000',
  33     labelThreshold: 4,
  34     defaultEdgeType: 'curve'
  35   }).graphProperties({
  36     minNodeSize: 0.01,
  37     maxNodeSize: 20,
  38     minEdgeSize: 0.01,
  39     maxEdgeSize: 1
  40   }).mouseProperties({
  41     maxRatio: 32
  42   });
  43
  44   // Parse a GEXF encoded file to fill the graph
  45   // (requires "sigma.parseGexf.js" to be included)
  46   //sigInst.parseGexf('USA_2008_1.gexf');
  47     sigInst.parseGexf('%(gexffile)s');
  48 //rttotgephi.gexf
  49
  50 //attributs
  51 (function(){
  52 var popUp;
  53
  54 // This function is used to generate the attributes list from the node attributes.
  55 // Since the graph comes from GEXF, the attibutes look like:
  56 // [
  57 // { attr: 'Lorem', val: '42' },
  58 // { attr: 'Ipsum', val: 'dolores' },
  59 // ...
  60 // { attr: 'Sit', val: 'amet' }
  61 // ]
  62 function attributesToString(attr) {
  63     return '<ul>' +
  64 attr.map(function(o){
  65 return '<li>' + o.attr + ' : ' + o.val + '</li>';
  66 }).join('') +
  67 '</ul>';
  68 }
  69
  70 function showNodeInfo(event) {
  71     popUp && popUp.remove();
  72
  73     var node;
  74     sigInst.iterNodes(function(n){
  75     node = n;
  76     },[event.content[0]]);
  77
  78     popUp = $(
  79     '<div class="node-info-popup"></div>'
  80     ).append(
  81     // The GEXF parser stores all the attributes in an array named
  82     // 'attributes'. And since sigma.js does not recognize the key
  83     // 'attributes' (unlike the keys 'label', 'color', 'size' etc),
  84     // it stores it in the node 'attr' object :
  85     attributesToString( node['attr']['attributes'] )
  86     ).attr(
  87     'id',
  88     'node-info'+sigInst.getID()
  89     ).css({
  90     'display': 'inline-block',
  91     'border-radius': 3,
  92     'padding': 5,
  93     'background': 'rgba(200,120,0,0.6)',
  94     'color': '#000',
  95     'box-shadow': '0 0 4px #666',
  96     'position': 'absolute',
  97     'left': node.displayX,
  98     'top': node.displayY+15
  99     });
 100
 101     $('ul',popUp).css('margin','0 0 0 20px');
 102
 103     $('#sigma-example').append(popUp);
 104 }
 105
 106 function hideNodeInfo(event) {
 107     popUp && popUp.remove();
 108     popUp = false;
 109 }
 110
 111 var greyColor = 'rgba(255,255,255,0)';
 112 sigInst.bind('overnodes',function(event){
 113     var node;
 114     sigInst.iterNodes(function(n){
 115     node = n;
 116     },[event.content[0]]);
 117     var nodes = [node.id]
 118     var neighbors = {};
 119     sigInst.iterEdges(function(e){
 120         if(nodes.indexOf(e.source)<0 && nodes.indexOf(e.target)<0){
 121             if(!e.attr['grey']){
 122                 e.attr['true_color'] = e.color;
 123                 e.color = greyColor;
 124                 e.attr['grey'] = 1;
 125             }
 126         }else{
 127             e.color = e.attr['grey'] ? e.attr['true_color'] : e.color;
 128             e.attr['grey'] = 0;
 129             neighbors[e.source] = 1;
 130             neighbors[e.target] = 1;
 131         }
 132     }).iterNodes(function(n){
 133         if(!neighbors[n.id]){
 134         //if(n.color != node.color) {
 135             if(!n.attr['grey']){
 136                 n.attr['true_color'] = n.color;
 137                 n.color = greyColor;
 138                 n.attr['grey'] = 1;
 139             }
 140         }else{
 141             n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;
 142             n.attr['grey'] = 0;
 143         }
 144     }).draw(2,2,2);
 145 }).bind('outnodes',function(){
 146
 147     sigInst.iterEdges(function(e){
 148         e.color = e.attr['grey'] ? e.attr['true_color'] : e.color;
 149         e.attr['grey'] = 0;
 150     }).iterNodes(function(n){
 151         n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;
 152         n.attr['grey'] = 0;
 153     }).draw(2,2,2);
 154 });
 155
 156
 157 sigInst.bind('overnodes',showNodeInfo).bind('outnodes',hideNodeInfo).draw();
 158 })();
 159 sigInst.activateFishEye().draw();
 160 }
 161   // Draw the graph :
 162 //  sigInst.draw();
 163 //}
 164 if (document.addEventListener) {
 165   document.addEventListener("DOMContentLoaded", init, false);
 166 } else {
 167   window.onload = init;
 168 }
 169 </script>
 170 <style type="text/css">
 171   /* sigma.js context : */
 172   .sigma-parent {
 173     position: relative;
 174     border-radius: 4px;
 175     -moz-border-radius: 4px;
 176     -webkit-border-radius: 4px;
 177     background: #222;
 178     height: 800px;
 179   }
 180   .sigma-expand {
 181     position: absolute;
 182     width: 100%%;
 183     height: 100%%;
 184     top: 0;
 185     left: 0;
 186   }
 187   .buttons-container{
 188     padding-bottom: 8px;
 189     padding-top: 12px;
 190   }
 191 </style>
 192
 193 </body>
 194 </html>