sparse jaccard
[iramuteq] / 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>