ITS Network Visualization

#ITS Network Visualization

####Force Layout

This visualization is based on the force layout by Mike Bostock, described as:

This example demonstrates how to create a force layout of a hierarchy whose internal nodes are collapsible. Leaf nodes are shown in orange, while internal nodes (packages) are shown in blue. Clicking on an internal node (without dragging) causes that node to expand or collapse, toggling the visibility of its descendant nodes.

We use the force layout as the basis of our visualization. Departments are shown by the larger, blue nodes, while individuals are shown as smaller orange nodes.

The layout can be dragged around as the user sees fit. The department nodes are pinned so that they will stay wherever they are dragged to.

####Tipsy

We have added Tipsy tooltips to the layout. When hovering over a node, the tooltip will automatically come up and show the text contained by the node.

####Future Plans

Incorporate the super formulas animation, such that clicking on nodes will allow the node to expand to show more information.
Use the tooltips to present more information as well
Rather than using the JSON, pull data from a google spreadsheet such that it will be editable by other users
Include more data regarding the individuals

<!DOCTYPE html>
<meta charset="utf-8">

<html>
  <head>
    <link rel="stylesheet" href="tipsy.css" type="text/css" />
    <script type='text/javascript' src="//code.jquery.com/jquery-1.6.2.min.js"></script>
    <script type='text/javascript' src="jquery.tipsy.js"></script>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="d3.superformula.v0.min.js"></script>
    <script src="miso.ds.deps.0.4.1.js"></script>
    
    <style>
      .node text {
        font: 10px sans-serif;
        pointer-events: none;
        text-anchor: middle;
      }

line.link {
        fill: none;
        stroke: #9ecae1;
        stroke-width: 1.5px;
      }

.transformer {
        cursor: pointer;
        stroke: #3182bd;
        stroke-width: 1.5px;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">

//size = node.data(nodes, function(d) {return d.size; });

transformer = d3.superformula()
          .type(function(d) {return d.shape;})
          .size(function(d) {return determineNodeSize(d);})
          .segments(180);

node.select("path")
            .style("fill", color)
            .append("title")
              .text(function(d) { return d.name; })
            ;
  
        $("svg path").tipsy({ 
        gravity: 'w',
        html: true, 
        title: function() {
          var d = this.__data__
          return d.name;}
        });
            
        nodeEnter.append("text")
            .attr("dy", ".35em")
            .text(function(d) { return determineText(d); })
            .style("pointer-events", "none");
            
        node.select("text")
            //.text(function(d) { return determineText(d); })
            .style("font-weight", fontweight)

function determineText(d) {
          if (d.shape == "square") 
            return d.info;
          return d.name;
        }

node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
      }
      
      function fontweight(d) {
        return d._children ?  "bold"
            : d.children ? "bold"
            : "normal"; 
      }
      
      function color(d) {
        return d._children ? "#3182bd" // collapsed package
            : d.children ? "#c6dbef" // expanded package
            : "#fd8d3c"; // leaf node
      }
      
      // Toggle children on click.
      function click(d) {
        if (d3.event.defaultPrevented) return; // ignore drag
        if (d.children) {
          d._children = d.children;
          d.children = null;
        } else {
          d.children = d._children;
          d._children = null;
        }
        update();
      }

// Returns a list of all nodes under the root.
      function flatten(root) {
        var nodes = [], i = 0;
      
        function recurse(node) {
          if (node.children) node.children.forEach(recurse);
          if (!node.id) node.id = ++i;
          nodes.push(node);
        }
      
        recurse(root);
        return nodes;
      }
      
      function loadGSS(ssid, tab) {
          
          //connect to spreadsheet
          var lsheet = new Miso.Dataset({
                                        importer : Miso.Dataset.Importers.GoogleSpreadsheet,
                                        parser : Miso.Dataset.Parsers.GoogleSpreadsheet,
                                        key : ssid,
                                        worksheet : tab
                                        });
                                        
                                        //load data from spreadsheet
                                        lsheet.fetch({
                                                     success : function() {
                                                     
                                                     this.each(function(row){
                                                               // console.log(row);
                                                               });
                                                     
                                                     },
                                                     error : function() {
                                                     console.log("Data failed to load from GSS.");
                                                     }
                                                     });
                                                     
      }
      
      
    </script>
  </body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://code.jquery.com/jquery-1.6.2.min.js

https://d3js.org/d3.v3.min.js