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 <script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
  11 <script type="text/javascript" src="js/jqplot.barRenderer.min.js"></script>
  12 <script type="text/javascript" src="js/jqplot.categoryAxisRenderer.min.js"></script>
  13 <script type="text/javascript" src="js/jqplot.pointLabels.min.js"></script>
  14 </head>
  15 <body>
  16 <div class="container">
  17     <div class="row">
  18   <h2 class="span12" id="post-title">%(titre)s</h2>
  19    <div class="span12 sigma-parent" id="sigma-example-parent">
  20         <div id="popup">
  21         </div>
  22         <div id="barplot" style="height:200px; width:%(bargraphw)ipx;">
  23         </div>
  24     <div class="sigma-expand" id="sigma-example"></div>
  25   </div>
  26 </div>
  27
  28 <script type="text/javascript">
  29 function init() {
  30   // Instanciate sigma.js and customize rendering :
  31   //var sigInst = sigma.init(document.getElementById('sigma-example')).drawingProperties({
  32   var sigInst = sigma.init($('#sigma-example')[0]).drawingProperties({
  33     defaultLabelColor: '#fff',
  34     //defaultLabelSize: 10,
  35     labelSize: 'proportional',
  36     labelSizeRatio: 2,
  37     defaultLabelBGColor: '#fff',
  38     defaultLabelHoverColor: '#000',
  39     labelThreshold: 6,
  40     labelColor: 'node',
  41     defaultEdgeType: 'line'
  42   }).graphProperties({
  43     minNodeSize: 0.3,
  44     maxNodeSize: 20,
  45     minEdgeSize: 0.01,
  46     maxEdgeSize: 1
  47   }).mouseProperties({
  48     maxRatio: 32
  49   });
  50
  51   // Parse a GEXF encoded file to fill the graph
  52   // (requires "sigma.parseGexf.js" to be included)
  53     sigInst.parseGexf('%(gexffile)s');
  54
  55 //attributs
  56 (function(){
  57 var popUp;
  58 var monplot;
  59
  60 // This function is used to generate the attributes list from the node attributes.
  61 // Since the graph comes from GEXF, the attibutes look like:
  62 // [
  63 // { attr: 'Lorem', val: '42' },
  64 // { attr: 'Ipsum', val: 'dolores' },
  65 // ...
  66 // { attr: 'Sit', val: 'amet' }
  67 // ]
  68 function attributesToString( node ) {
  69     var attr = node['attr']['attributes'];
  70     var cl = [];
  71     var chis = [];
  72     var li = [];
  73     for (var i = 0; i < attr.length; i++) {
  74         if (attr[i].attr.substring(0,9) == 'chiclasse') {
  75              cl.push(attr[i].attr.substring(10));
  76              chis.push(parseFloat(attr[i].val));
  77         } else {
  78             li.push('<li>' + attr[i].attr + ' : ' + attr[i].val + '</li>');
  79         }
  80     }
  81         var txt = '<ul>' + '<li><strong>Label : ' + node.label + '</strong></li>' + li.join('') + '<li><table border=1 style="font-size:10px;"><tr><td>' + cl.join('</td><td>') + '</td></tr><tr><td>' + chis.join('</td><td>') + '</td></tr></table></li></ul>';
  82         return [txt,chis,cl];
  83 //    return '<ul>' +
  84 //attr.map(function(o){
  85 //return '<li>' + o.attr + ' : ' + o.val + '</li>';
  86 //}).join('') +
  87 //'</ul>';
  88 }
  89
  90 function showNodeInfo(event) {
  91     popUp && popUp.remove();
  92
  93     var node;
  94     sigInst.iterNodes(function(n){
  95     node = n;
  96     },[event.content[0]]);
  97
  98     var theatt = attributesToString( node )
  99
 100     monplot = $.jqplot('barplot', [theatt[1]], {
 101             seriesDefaults:{
 102             renderer:$.jqplot.BarRenderer,
 103             rendererOptions: {fillToZero: true, barPadding: 0, barMargin: 0, barWidth: null}
 104         },
 105         axes: {
 106             xaxis: {
 107                 renderer: $.jqplot.CategoryAxisRenderer,
 108                 ticks: theatt[2],
 109             },
 110             yaxis: {
 111                 pad: 1.05,
 112                 tickOptions: {formatString: '%%d'}
 113             }
 114          },
 115     });
 116
 117     popUp = $(
 118     '<div class="node-info-popup"></div>'
 119     ).append(
 120     // The GEXF parser stores all the attributes in an array named
 121     // 'attributes'. And since sigma.js does not recognize the key
 122     // 'attributes' (unlike the keys 'label', 'color', 'size' etc),
 123     // it stores it in the node 'attr' object :
 124     theatt[0]
 125     ).attr(
 126     'id',
 127     'node-info'+sigInst.getID()
 128     ).css({
 129     'display': 'inline-block',
 130     'border-radius': 3,
 131     'padding': 5,
 132     'background': 'rgba(200,200,200,0.6)',
 133     'color': '#000',
 134     'box-shadow': '0 0 4px #666',
 135     //'position': 'absolute',
 136     //'left': node.displayX,
 137     //'top': node.displayY+15,
 138     'font-size': '12px',
 139     });
 140
 141     //$('ul',popUp).css('margin','0 0 0 20px');
 142     $('#popup').append(popUp);
 143     $('#barplot').append(monplot);
 144     monplot.replot();
 145     //$('#sigma-example').append(popUp);
 146 }
 147
 148 function hideNodeInfo(event) {
 149     popUp && popUp.remove();
 150     popUp = false;
 151 }
 152
 153 var greyColor = 'rgba(255,255,255,0.2)';
 154 sigInst.bind('overnodes',function(event){
 155     var node;
 156     sigInst.iterNodes(function(n){
 157     node = n;
 158     },[event.content[0]]);
 159     var nodes = [node.id];
 160     sigInst.iterNodes(function(n){
 161         //if(!neighbors[n.id]){
 162         if(n.color != node.color && n.label != 'F1' && n.label != 'F2') {
 163             if(!n.attr['grey']){
 164                 n.attr['true_color'] = n.color;
 165                 n.color = greyColor;
 166                 n.attr['grey'] = 1;
 167             }
 168         }else{
 169             n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;
 170             n.attr['grey'] = 0;
 171         }
 172     }).draw(2,2,2);
 173 }).bind('outnodes',function(){
 174
 175     sigInst.iterEdges(function(e){
 176         e.color = e.attr['grey'] ? e.attr['true_color'] : e.color;
 177         e.attr['grey'] = 0;
 178     }).iterNodes(function(n){
 179         n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;
 180         n.attr['grey'] = 0;
 181     }).draw(2,2,2);
 182 });
 183
 184 //.bind('outnodes',hideNodeInfo)
 185 sigInst.bind('overnodes',showNodeInfo).draw();
 186 })();
 187 }
 188   // Draw the graph :
 189 //  sigInst.draw();
 190 //}
 191
 192 if (document.addEventListener) {
 193   document.addEventListener("DOMContentLoaded", init, false);
 194 } else {
 195   window.onload = init;
 196 }
 197 </script>
 198 <style type="text/css">
 199   .jqplot-axis {
 200   font-size:10px;
 201   }
 202   #barplot {
 203     position: relative;
 204     left:850px;
 205
 206     }
 207    #popup {
 208     position: relative;
 209     left:850px;
 210     }
 211
 212   /* sigma.js context : */
 213   .sigma-parent {
 214     position: relative;
 215     border-radius: 4px;
 216     -moz-border-radius: 4px;
 217     -webkit-border-radius: 4px;
 218     background: #222;
 219     height: 700px;
 220     width: 800px;
 221   }
 222   .sigma-expand {
 223     position: absolute;
 224     width: 100%%;
 225     height: 100%%;
 226     top: 0;
 227     left: 0;
 228   }
 229   .buttons-container{
 230     padding-bottom: 8px;
 231     padding-top: 12px;
 232   }
 233 </style>
 234
 235 </body>
 236 </html>