SHARE
TWEET

Using sigma and html to putt a Gephi graph online

a guest Jan 29th, 2015 600 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html lang="en">
  2. <head>
  3.   <meta charset="utf-8">
  4.   <script src="js/sigma.min.js"></script>
  5.  
  6.  
  7. </head>
  8. <body>
  9.  
  10.   <div class="container">
  11.     <div class="row">
  12.   <h2 >This is the result ! </h2>
  13.   I used data I gathered a few months ago (it shows how one of my picture was shared on social networks)  
  14.   <div class="sigma-parent" id="sigma-example-parent">
  15.     <div class="sigma-expand" id="sigma-example"></div>
  16.   </div>
  17. </div>
  18.  
  19.         <script src="js/sigma.parseGexf.js"></script><script type="text/javascript">function init() {
  20.   // Instanciate sigma.js and customize rendering :
  21.   var sigInst = sigma.init(document.getElementById('sigma-example')).drawingProperties({
  22.     defaultLabelColor: '#fff',
  23.     defaultLabelSize: 14,
  24.     defaultLabelBGColor: '#fff',
  25.     defaultLabelHoverColor: '#000',
  26.     labelThreshold: 6,
  27.     defaultEdgeType: 'curve'
  28.   }).graphProperties({
  29.     minNodeSize: 1,
  30.     maxNodeSize: 10,
  31.     minEdgeSize: 1,
  32.     maxEdgeSize: 1
  33.   }).mouseProperties({
  34.     maxRatio: 32
  35.   });
  36.  
  37.   // Parse a GEXF encoded file to fill the graph
  38.   // (requires "sigma.parseGexf.js" to be included)
  39.   sigInst.parseGexf('data/essai.gexf');
  40.  
  41.   //highlights the nodes that is hovered+ its edges
  42.   //
  43.   // Bind events :
  44.   var greyColor = '#666';
  45.   sigInst.bind('overnodes',function(event){
  46.     var nodes = event.content;
  47.     var neighbors = {};
  48.     sigInst.iterEdges(function(e){
  49.       if(nodes.indexOf(e.source)<0 && nodes.indexOf(e.target)<0){
  50.         if(!e.attr['grey']){
  51.           e.attr['true_color'] = e.color;
  52.           e.color = greyColor;
  53.           e.attr['grey'] = 1;
  54.         }
  55.       }else{
  56.         e.color = e.attr['grey'] ? e.attr['true_color'] : e.color;
  57.         e.attr['grey'] = 0;
  58.  
  59.         neighbors[e.source] = 1;
  60.         neighbors[e.target] = 1;
  61.       }
  62.     }).iterNodes(function(n){
  63.       if(!neighbors[n.id]){
  64.         if(!n.attr['grey']){
  65.           n.attr['true_color'] = n.color;
  66.           n.color = greyColor;
  67.           n.attr['grey'] = 1;
  68.         }
  69.       }else{
  70.         n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;
  71.         n.attr['grey'] = 0;
  72.       }
  73.     }).draw(2,2,2);
  74.   }).bind('outnodes',function(){
  75.     sigInst.iterEdges(function(e){
  76.       e.color = e.attr['grey'] ? e.attr['true_color'] : e.color;
  77.       e.attr['grey'] = 0;
  78.     }).iterNodes(function(n){
  79.       n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;
  80.       n.attr['grey'] = 0;
  81.     }).draw(2,2,2);
  82.   });
  83.  
  84.  
  85.   // Draw the graph :
  86.   sigInst.draw();
  87. }
  88.  
  89. if (document.addEventListener) {
  90.   document.addEventListener("DOMContentLoaded", init, false);
  91. } else {
  92.   window.onload = init;
  93. }
  94. </script>
  95.  
  96. <style type="text/css">
  97.   /* sigma.js context : */
  98.   .sigma-parent {
  99.     position: relative;
  100.     border-radius: 4px;
  101.     -moz-border-radius: 4px;
  102.     -webkit-border-radius: 4px;
  103.     background: #222;
  104.     height: 1000px;
  105.   }
  106.   .sigma-expand {
  107.     position: absolute;
  108.     width: 100%;
  109.     height: 100%;
  110.     top: 0;
  111.     left: 0;
  112.   }
  113.   .buttons-container{
  114.     padding-bottom: 8px;
  115.     padding-top: 12px;
  116.   }
  117. </style>
  118.  
  119.        
  120.                
  121. <?php include("../php/statcounter.php"); ?>            
  122. </body>
  123. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top