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 <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>
12 <div class="container">
14 <h2 class="span12" id="post-title">Load and display a GEXF encoded graph</h2>
16 <div class="span12 sigma-parent" id="sigma-example-parent">
17 <div class="sigma-expand" id="sigma-example"></div>
21 <script type="text/javascript">
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',
29 //defaultLabelSize: 10,
31 defaultLabelBGColor: '#fff',
32 defaultLabelHoverColor: '#000',
34 defaultEdgeType: 'curve'
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');
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:
57 // { attr: 'Lorem', val: '42' },
58 // { attr: 'Ipsum', val: 'dolores' },
60 // { attr: 'Sit', val: 'amet' }
62 function attributesToString(attr) {
65 return '<li>' + o.attr + ' : ' + o.val + '</li>';
70 function showNodeInfo(event) {
71 popUp && popUp.remove();
74 sigInst.iterNodes(function(n){
76 },[event.content[0]]);
79 '<div class="node-info-popup"></div>'
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'] )
88 'node-info'+sigInst.getID()
90 'display': 'inline-block',
93 'background': 'rgba(200,120,0,0.6)',
95 'box-shadow': '0 0 4px #666',
96 'position': 'absolute',
97 'left': node.displayX,
98 'top': node.displayY+15
101 $('ul',popUp).css('margin','0 0 0 20px');
103 $('#sigma-example').append(popUp);
106 function hideNodeInfo(event) {
107 popUp && popUp.remove();
111 var greyColor = 'rgba(255,255,255,0)';
112 sigInst.bind('overnodes',function(event){
114 sigInst.iterNodes(function(n){
116 },[event.content[0]]);
117 var nodes = [node.id]
119 sigInst.iterEdges(function(e){
120 if(nodes.indexOf(e.source)<0 && nodes.indexOf(e.target)<0){
122 e.attr['true_color'] = e.color;
127 e.color = e.attr['grey'] ? e.attr['true_color'] : e.color;
129 neighbors[e.source] = 1;
130 neighbors[e.target] = 1;
132 }).iterNodes(function(n){
133 if(!neighbors[n.id]){
134 //if(n.color != node.color) {
136 n.attr['true_color'] = n.color;
141 n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;
145 }).bind('outnodes',function(){
147 sigInst.iterEdges(function(e){
148 e.color = e.attr['grey'] ? e.attr['true_color'] : e.color;
150 }).iterNodes(function(n){
151 n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;
157 sigInst.bind('overnodes',showNodeInfo).bind('outnodes',hideNodeInfo).draw();
159 sigInst.activateFishEye().draw();
164 if (document.addEventListener) {
165 document.addEventListener("DOMContentLoaded", init, false);
167 window.onload = init;
170 <style type="text/css">
171 /* sigma.js context : */
175 -moz-border-radius: 4px;
176 -webkit-border-radius: 4px;