1 <html class="no-js" lang="en">
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>
16 <div class="container">
18 <h2 class="span12" id="post-title">%(titre)s</h2>
19 <div class="span12 sigma-parent" id="sigma-example-parent">
22 <div id="barplot" style="height:200px; width:%(bargraphw)ipx;">
24 <div class="sigma-expand" id="sigma-example"></div>
28 <script type="text/javascript">
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',
37 defaultLabelBGColor: '#fff',
38 defaultLabelHoverColor: '#000',
41 defaultEdgeType: 'line'
51 // Parse a GEXF encoded file to fill the graph
52 // (requires "sigma.parseGexf.js" to be included)
53 sigInst.parseGexf('%(gexffile)s');
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:
63 // { attr: 'Lorem', val: '42' },
64 // { attr: 'Ipsum', val: 'dolores' },
66 // { attr: 'Sit', val: 'amet' }
68 function attributesToString( node ) {
69 var attr = node['attr']['attributes'];
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));
78 li.push('<li>' + attr[i].attr + ' : ' + attr[i].val + '</li>');
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>';
84 //attr.map(function(o){
85 //return '<li>' + o.attr + ' : ' + o.val + '</li>';
90 function showNodeInfo(event) {
91 popUp && popUp.remove();
94 sigInst.iterNodes(function(n){
96 },[event.content[0]]);
98 var theatt = attributesToString( node )
100 monplot = $.jqplot('barplot', [theatt[1]], {
102 renderer:$.jqplot.BarRenderer,
103 rendererOptions: {fillToZero: true, barPadding: 0, barMargin: 0, barWidth: null}
107 renderer: $.jqplot.CategoryAxisRenderer,
112 tickOptions: {formatString: '%%d'}
118 '<div class="node-info-popup"></div>'
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 :
127 'node-info'+sigInst.getID()
129 'display': 'inline-block',
132 'background': 'rgba(200,200,200,0.6)',
134 'box-shadow': '0 0 4px #666',
135 //'position': 'absolute',
136 //'left': node.displayX,
137 //'top': node.displayY+15,
141 //$('ul',popUp).css('margin','0 0 0 20px');
142 $('#popup').append(popUp);
143 $('#barplot').append(monplot);
145 //$('#sigma-example').append(popUp);
148 function hideNodeInfo(event) {
149 popUp && popUp.remove();
153 var greyColor = 'rgba(255,255,255,0.2)';
154 sigInst.bind('overnodes',function(event){
156 sigInst.iterNodes(function(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') {
164 n.attr['true_color'] = n.color;
169 n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;
173 }).bind('outnodes',function(){
175 sigInst.iterEdges(function(e){
176 e.color = e.attr['grey'] ? e.attr['true_color'] : e.color;
178 }).iterNodes(function(n){
179 n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;
184 //.bind('outnodes',hideNodeInfo)
185 sigInst.bind('overnodes',showNodeInfo).draw();
192 if (document.addEventListener) {
193 document.addEventListener("DOMContentLoaded", init, false);
195 window.onload = init;
198 <style type="text/css">
212 /* sigma.js context : */
216 -moz-border-radius: 4px;
217 -webkit-border-radius: 4px;