Frederic De Groef avatar Frederic De Groef committed 289ca03

Updated page layout. Click on nodes (instead of hover) to get details. Enabled checkbox for controlling nodes without a date

Comments (0)

Files changed (2)

test_sigma_gexf.js

 
-
+// --------------------------------------------------------------------------
+// provides a dict-like interface on node attributes
 function getAttrValue(attributes, attrName) {
   return attributes.map(function(o){
     if(o.attr == attrName){
 };
 
 
+// --------------------------------------------------------------------------
+// Extract node attributes and format them for the details box
 function makePrettyListFromAttr(attr) {
   var ul = '<ul>';
-
-
   ul +=  '<li> Title: ' + getAttrValue(attr, 'title') + '</li>';
   ul +=  '<li> Author: ' + getAttrValue(attr, 'author') + '</li>';
   var url = getAttrValue(attr, 'url');
   ul +=  '<li> URL: ' + '<a href="'+ url + '"  target="_blank">'+ url + '</a></li>';
   ul +=  '<li> Date: ' + getAttrValue(attr, 'date') + '</li>';
-
   return ul + '</ul>';
 };
 
 
 
 function init() {
-
+  // --------------------------------------------------------------------------
   // Instanciate sigma.js and customize rendering :
   var sigma_canvas = document.getElementById('sigma-example');
 
   sigInst.parseGexf('/data/carto_discours.gexf');
 
 
-function showNodeInfo(event){
-  var node;
-  sigInst.iterNodes(function(n){
-    node = n;
-  },[event.content[0]]);
 
-  var infos_div = document.getElementById("node_infos");
-  var attributes = makePrettyListFromAttr(node['attr']['attributes']);
-  infos_div.innerHTML = '<div>'
-          + '<h4> Details: </h4>'
-          + attributes
-          + '</div>';
 
+  // --------------------------------------------------------------------------
+  // Bind events
+  var greyColor = '#666';
 
-};
+  // highlight neighbours on mouse over
+  sigInst.bind('overnodes',function(event){
+    var nodes = event.content;
+    var neighbors = {};
+    sigInst.iterEdges(function(e){
+      if(nodes.indexOf(e.source)<0 && nodes.indexOf(e.target)<0){
+        if(!e.attr['grey']){
+          e.attr['true_color'] = e.color;
+          e.color = greyColor;
+          e.attr['grey'] = 1;
+        }
+      }else{
+        e.color = e.attr['grey'] ? e.attr['true_color'] : e.color;
+        e.attr['grey'] = 0;
 
-// Bind events :
-var greyColor = '#666';
-sigInst.bind('overnodes',function(event){
-  var nodes = event.content;
-  var neighbors = {};
-  sigInst.iterEdges(function(e){
-    if(nodes.indexOf(e.source)<0 && nodes.indexOf(e.target)<0){
-      if(!e.attr['grey']){
-        e.attr['true_color'] = e.color;
-        e.color = greyColor;
-        e.attr['grey'] = 1;
+        neighbors[e.source] = 1;
+        neighbors[e.target] = 1;
       }
-    }else{
+    }).iterNodes(function(n){
+      if(!neighbors[n.id]){
+        if(!n.attr['grey']){
+          n.attr['true_color'] = n.color;
+          n.color = greyColor;
+          n.attr['grey'] = 1;
+        }
+      }else{
+        n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;
+        n.attr['grey'] = 0;
+      }
+    }).draw(2,2,2);
+  }).bind('outnodes',function(){
+    sigInst.iterEdges(function(e){
       e.color = e.attr['grey'] ? e.attr['true_color'] : e.color;
       e.attr['grey'] = 0;
-
-      neighbors[e.source] = 1;
-      neighbors[e.target] = 1;
-    }
-  }).iterNodes(function(n){
-    if(!neighbors[n.id]){
-      if(!n.attr['grey']){
-        n.attr['true_color'] = n.color;
-        n.color = greyColor;
-        n.attr['grey'] = 1;
-      }
-    }else{
+    }).iterNodes(function(n){
       n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;
       n.attr['grey'] = 0;
-    }
-  }).draw(2,2,2);
-}).bind('outnodes',function(){
-  sigInst.iterEdges(function(e){
-    e.color = e.attr['grey'] ? e.attr['true_color'] : e.color;
-    e.attr['grey'] = 0;
-  }).iterNodes(function(n){
-    n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;
-    n.attr['grey'] = 0;
-  }).draw(2,2,2);
-});
+    }).draw(2,2,2);
+  });
 
-  sigInst.bind('overnodes',showNodeInfo);
 
 
 
+  // --------------------------------------------------------------------------
+  // show node details on mouse click
+  function showNodeInfo(event){
+    var node;
+    sigInst.iterNodes(function(n){
+      node = n;
+    },[event.content[0]]);
+
+    var infos_div = document.getElementById("node_infos");
+    var attributes = makePrettyListFromAttr(node['attr']['attributes']);
+    infos_div.innerHTML = '<div>'
+            + '<h5> Details: </h5>'
+            + attributes
+            + '</div>';
+  };
+  sigInst.bind('upnodes',showNodeInfo);
+
+
+
+
+  // --------------------------------------------------------------------------
+  // initial camera position: center and zoom out a bit
   var w, h;
   w = parseInt(sigma_canvas.getElementsByTagName('canvas')[0].getAttribute('width'));
   h = parseInt(sigma_canvas.getElementsByTagName('canvas')[0].getAttribute('height'));
 
 
 
-  var enabled_years = [];
-  function makeYearCheckboxes(start, stop){
-    var html = '';
+  // --------------------------------------------------------------------------
+  // Year range selection
 
-    for (year=start; year <= stop; year=year+1)
-    {
-      html += '<input type="checkbox" name="year" checked="true" value="'+ year +'">'+ year +'<br>';
-      enabled_years.push(''+year);
-    }
 
-    html += '<input type="checkbox" name="year" checked="true" value="'+ 'nd' +'">'+ 'No Date' +'<br>';
-    enabled_years.push('nd');
-
-
-    return html;
+  function makeCaption(y1, y2){
+    return 'Showing nodes from ' + '<strong>' + y1 + ' </strong> to <strong>' + y2 + '<strong>';
   };
 
 
+  // --------------------------------------------------------------------------
+  // Setup range slider behavior
+  $( "#year_selection_slider" ).slider({
+    range: true,
+    values:[1997, 2012],
+    min: 1997,
+    max: 2012,
+    step: 1,
+    slide: function( event, ui ) {
+      $( "#slider_selection" ).html( makeCaption(ui.values[0], ui.values[1] ));
 
-  $( "#year_selection_slider" ).slider({
-      range: true,
-      values:[1997, 2012],
-      min: 1997,
-      max: 2012,
-      step: 1,
-      slide: function( event, ui ) {
-        $( "#start_selected_year" ).val( "" + ui.values[0] );
-        $( "#end_selected_year" ).val( "" + ui.values[1] );
+      sigInst.iterNodes(function (n){
+        var node_attrs = n['attr']['attributes'];
+        var node_year = parseInt(getAttrValue(node_attrs, 'year'));
+        // show only nodes which belong within the selected range
+        if(node_year >= ui.values[0] && node_year <= ui.values[1]){
+          n.hidden = 0;
+        } else{
+          n.hidden = 1;
+        }
+      }).draw();
+    }
+  });
 
-        sigInst.iterNodes(function (n){
-          var node_attrs = n['attr']['attributes'];
-          var node_year = parseInt(getAttrValue(node_attrs, 'year'));
+  $("#slider_selection").html(makeCaption($("#year_selection_slider").slider("values", 0), $("#year_selection_slider").slider("values", 1)));
 
-          if(node_year >= ui.values[0] && node_year <= ui.values[1]){
-            n.hidden = 0;
-          } else{
-            n.hidden = 1;
-          }
 
 
-        }).draw();
-
-
+  // --------------------------------------------------------------------------
+  // Setup 'no date' checkbox behavior
+  $(':checkbox').live('change', function(){
+    var chkBox = this;
+    sigInst.iterNodes(function (n){
+      var node_attrs = n['attr']['attributes'];
+      var node_year = getAttrValue(node_attrs, 'year');
+      if (node_year == 'nd') {
+        if(chkBox.checked){
+          n.hidden = 0;
+        } else{
+          n.hidden = 1;
+        }
       }
-    });
-    $( "#start_selected_year" ).val( "" + $( "#year_selection_slider" ).slider( "values", 0 ) );
-    $( "#end_selected_year" ).val( "" + $( "#year_selection_slider" ).slider( "values", 1 ) );
-
-
-
-
+    }).draw();
+  });
 }
 
+
+//--------------------------------------------------------------------------
+// setup entry point
 if (document.addEventListener) {
   document.addEventListener("DOMContentLoaded", init, false);
 } else {

test_sigmajs.html

 
 
 
-    <div class="container">
+<div class="container">
 
-    <div class="row">
-        <div class="row">
-            <h2 class="span12" id="post-title">Parse graph data / use custom events</h2>
-        </div>
 
+  <div class="row">
+    <h2 class="span12" id="post-title">This is a very nice website</h2>
+  </div>
 
-        <div class="row-fluid">
-            <span class="span5" id="year_selection_slider"></span>
 
-                    <label for="amount">Show nodes from</label> <input type="text" id="start_selected_year" style="border:0;  font-weight:bold;"> <label>to:</label> <input type="text" id="end_selected_year" style="border:0;  font-weight:bold;">
 
-        </div>
+  <div class="row">
+    <div class="span4 "><p>Morbi fringilla, arcu et pharetra ornare, arcu dolor tincidunt erat, non ornare nisl diam vitae orci. Nulla eu eros non ligula luctus aliquet. Morbi tempus laoreet urna, nec aliquam odio dapibus at. Nam in libero ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et libero eu tortor eleifend vestibulum. Aenean molestie velit sed lectus placerat malesuada.</p></div>
+    <div class="span4 "><p>Morbi fringilla, arcu et pharetra ornare, arcu dolor tincidunt erat, non ornare nisl diam vitae orci. Nulla eu eros non ligula luctus aliquet. Morbi tempus laoreet urna, nec aliquam odio dapibus at. Nam in libero ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et libero eu tortor eleifend vestibulum. Aenean molestie velit sed lectus placerat malesuada.</p></div>
+    <div class="span4 "><p>Morbi fringilla, arcu et pharetra ornare, arcu dolor tincidunt erat, non ornare nisl diam vitae orci. Nulla eu eros non ligula luctus aliquet. Morbi tempus laoreet urna, nec aliquam odio dapibus at. Nam in libero ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et libero eu tortor eleifend vestibulum. Aenean molestie velit sed lectus placerat malesuada.</p></div>
+  </div>
 
 
-        <div class="row">
-            <div class="span12 sigma-parent" id="sigma-example-parent">
-                <div class="sigma-expand" id="sigma-example"></div>
-            </div>
+  <br/><br/>
+  <br/><br/>
 
-
-
-        </div>
+  <div class="row">
+    <div class="span6">
+      <h5 style="border-bottom:1px;"><strong>Instructions:</strong> </h5>
+      <br/>
+      <ul>
+        <li>Hover the mouse over a node to highlight its direct neighbours</li>
+        <li>Click on a node to display details </li>
+        <li>Click & drag the mouse to pan around</li>
+        <li>Use the mousewheel to zoom in and out</li>
+        <li>Use the slider control to show only the nodes in a selected range of years</li>
+      </ul>
     </div>
-
-
-    <div class="row">
-
-      <div class="span12">
-        <div id="node_infos"></div>
-
+    <div class="span5">
+      <h5><strong>Controls:</strong> </h5>
+      <br/>
+      <div id="year_selection_slider"></div>
+      <div id="slider_selection" style="text-align:center;"></div>
+      <br/>
+      <div>
+        <input type="checkbox" name="show_nodates" checked="true" value="nd">Show nodes without date<br>
       </div>
     </div>
+  </div>
 
 
 
+  <div class="row">
+    <div class="span12 sigma-parent" id="sigma-example-parent">
+      <div class="sigma-expand" id="sigma-example"></div>
     </div>
+  </div>
 
 
+  <br/>
 
+  <div class="row">
+    <div class="span12 "id="node_infos" style="height:100px;"></div>
+  </div>
 
 
-    <style type="text/css">
-    /* sigma.js context : */
-    .sigma-parent {
-    position: relative;
-    border-radius: 4px;
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
-    background: #222;
-    height: 500px;
-  }
-  .sigma-expand {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-  }
-  .buttons-container{
-    padding-bottom: 8px;
-    padding-top: 12px;
-  }
+
+
+
+<hr>
+
+<footer class="footer">
+  <p>© Juliette De Maeyer 2012</p>
+  <p>
+    Website distributed under the <a href="/LICENSE.txt" target="_blank">MIT License</a>.
+  </p>
+  <p>
+    <span>Morbi fringilla, arcu et pharetra ornare, arcu dolor tincidunt erat, non ornare nisl diam vitae orci.</span>
+    <span>Nulla eu eros non ligula luctus aliquet. Morbi tempus laoreet urna, nec aliquam odio dapibus at. Nam in libero ante. </span>
+
+
+  </p>
+</footer>
+
+</div>
+
+
+<style type="text/css">
+/* sigma.js context : */
+.sigma-parent {
+position: relative;
+border-radius: 4px;
+-moz-border-radius: 4px;
+-webkit-border-radius: 4px;
+background: #222;
+height: 500px;
+}
+.sigma-expand {
+position: absolute;
+width: 100%;
+height: 100%;
+top: 0;
+left: 0;
+}
+.buttons-container{
+padding-bottom: 8px;
+padding-top: 12px;
+}
 
 
 </body>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.