iramuteq.org Git - iramuteq/blob - webexport/afc.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   <meta name="viewport" content="width=device-width">
   6   <title>%(titre)s</title>
   7 <script src="js/jquery.min.js"></script>
   8 <script src="js/sigma.min.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">%(titre)s</h2>
  15    <div class="span12 sigma-parent" id="sigma-example-parent">
  16
  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     //defaultLabelSize: 10,
  28     labelSize: 'proportional',
  29     labelSizeRatio: 2,
  30     defaultLabelBGColor: '#fff',
  31     defaultLabelHoverColor: '#000',
  32     labelThreshold: 6,
  33     labelColor: 'node',
  34     defaultEdgeType: 'line'
  35   }).graphProperties({
  36     minNodeSize: 0.3,
  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('%(gexffile)s');
  47
  48 //attributs
  49 (function(){
  50 var popUp;
  51
  52 // This function is used to generate the attributes list from the node attributes.
  53 // Since the graph comes from GEXF, the attibutes look like:
  54 // [
  55 // { attr: 'Lorem', val: '42' },
  56 // { attr: 'Ipsum', val: 'dolores' },
  57 // ...
  58 // { attr: 'Sit', val: 'amet' }
  59 // ]
  60 function attributesToString(attr) {
  61     return '<ul>' +
  62 attr.map(function(o){
  63 return '<li>' + o.attr + ' : ' + o.val + '</li>';
  64 }).join('') +
  65 '</ul>';
  66 }
  67
  68 function showNodeInfo(event) {
  69     popUp && popUp.remove();
  70
  71     var node;
  72     sigInst.iterNodes(function(n){
  73     node = n;
  74     },[event.content[0]]);
  75
  76     popUp = $(
  77     '<div class="node-info-popup"></div>'
  78     ).append(
  79     // The GEXF parser stores all the attributes in an array named
  80     // 'attributes'. And since sigma.js does not recognize the key
  81     // 'attributes' (unlike the keys 'label', 'color', 'size' etc),
  82     // it stores it in the node 'attr' object :
  83     attributesToString( node['attr']['attributes'] )
  84     ).attr(
  85     'id',
  86     'node-info'+sigInst.getID()
  87     ).css({
  88     'display': 'inline-block',
  89     'border-radius': 3,
  90     'padding': 5,
  91     'background': 'rgba(200,120,0,0.6)',
  92     'color': '#000',
  93     'box-shadow': '0 0 4px #666',
  94     'position': 'absolute',
  95     'left': node.displayX,
  96     'top': node.displayY+15
  97     });
  98
  99     $('ul',popUp).css('margin','0 0 0 20px');
 100
 101     $('#sigma-example').append(popUp);
 102 }
 103
 104 function hideNodeInfo(event) {
 105     popUp && popUp.remove();
 106     popUp = false;
 107 }
 108
 109 var greyColor = 'rgba(255,255,255,0.2)';
 110 sigInst.bind('overnodes',function(event){
 111     var node;
 112     sigInst.iterNodes(function(n){
 113     node = n;
 114     },[event.content[0]]);
 115     var nodes = [node.id]
 116     sigInst.iterNodes(function(n){
 117         //if(!neighbors[n.id]){
 118         if(n.color != node.color && n.label != 'F1' && n.label != 'F2') {
 119             if(!n.attr['grey']){
 120                 n.attr['true_color'] = n.color;
 121                 n.color = greyColor;
 122                 n.attr['grey'] = 1;
 123             }
 124         }else{
 125             n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;
 126             n.attr['grey'] = 0;
 127         }
 128     }).draw(2,2,2);
 129 }).bind('outnodes',function(){
 130
 131     sigInst.iterEdges(function(e){
 132         e.color = e.attr['grey'] ? e.attr['true_color'] : e.color;
 133         e.attr['grey'] = 0;
 134     }).iterNodes(function(n){
 135         n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;
 136         n.attr['grey'] = 0;
 137     }).draw(2,2,2);
 138 });
 139
 140
 141 sigInst.bind('overnodes',showNodeInfo).bind('outnodes',hideNodeInfo).draw();
 142 })();
 143 }
 144   // Draw the graph :
 145 //  sigInst.draw();
 146 //}
 147
 148 if (document.addEventListener) {
 149   document.addEventListener("DOMContentLoaded", init, false);
 150 } else {
 151   window.onload = init;
 152 }
 153 </script>
 154 <style type="text/css">
 155   /* sigma.js context : */
 156   .sigma-parent {
 157     position: relative;
 158     border-radius: 4px;
 159     -moz-border-radius: 4px;
 160     -webkit-border-radius: 4px;
 161     background: #222;
 162     height: 800px;
 163     /*width: 800px;*/
 164   }
 165   .sigma-expand {
 166     position: absolute;
 167     width: 100%%;
 168     height: 100%%;
 169     top: 0;
 170     left: 0;
 171   }
 172   .buttons-container{
 173     padding-bottom: 8px;
 174     padding-top: 12px;
 175   }
 176 </style>
 177
 178 </body>
 179 </html>