Strategic Management Project Pilots 2013-2014

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <script src="https://d3js.org/d3.v3.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
        
    <link href="bootstrap.css" rel="stylesheet">
     <title>SPM Pilots</title>

.node circle {
    cursor: pointer;
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
  }

.node text {
    font-size: 12px;
    fill: #525252;
  }

text.pilot {
  fill: steelblue;
  font-weight: 400;
  font-size: 16px;
}

.pilot {
    color: steelblue;

}

path.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5px;
  }

</style>
    </head>
    <body>
      <div id="body">
        <div id="footer">
           <div class="title">Strategic Management + Metrics Project</div>
          <span class="pilot">Pilots FY13-14</span>
          <div class="hint">click or option-click to expand or collapse</div>
        </div>
        <div class="btn-toolbar" role="toolbar" id="pilotButtons">
          <div class="btn-group"><button type="button" class="btn btn-default" id="goldman">School of Public Policy</button></div>
           <div class="btn-group"><button type="button" class="btn btn-default" id="haas">School of Business</button></div>
           <div class="btn-group"><button type="button" class="btn btn-default" id="gradDiv">Graduate Division</button></div>
           <div class="btn-group"><button type="button" class="btn btn-default" id="studentAffairs">Student Affairs</button></div>
           <div class="btn-group"><button type="button" class="btn btn-default" id="adminFinance">Admin & Finance</button></div>
          
        </div>
      </div>
      <script type="text/javascript">

var m = [20, 180, 20, 90],
      w = 1200 - m[1] - m[3],
      h = 700 - m[0] - m[2],
      i = 0,
      root;

var tree = d3.layout.tree()
      .size([h, w]);

var diagonal = d3.svg.diagonal()
      .projection(function(d) { return [d.y, d.x]; });

var vis = d3.select("#body").append("svg:svg")
      .attr("width", w + m[1] + m[3])
      .attr("height", h + m[0] + m[2])
    .append("svg:g")
      .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

d3.json("orgTreePilots.json", function(json) {
    root = json;
    root.x0 = h / 2;
    root.y0 = 0;

function toggleAll(d) {
      if (d.children) {
        d.children.forEach(toggleAll);
        toggle(d);
      }
    }

// Initialize the display to show a few nodes.
    root.children.forEach(toggleAll);
    toggle(root.children[0]);

d3.select("#adminFinance").on("click", function() {  
              root.children.forEach(toggleAll);
              toggle(root.children[5]);
              toggle(root.children[5].children[0]);
              toggle(root.children[5].children[0].children[4]);
              update(root.children[5]);
            });

d3.select("#studentAffairs").on("click", function() {  
              root.children.forEach(toggleAll);
              toggle(root.children[5]);
              toggle(root.children[5].children[1]);
              toggle(root.children[5].children[1].children[1]);
              toggle(root.children[5].children[1].children[7]);
              update(root.children[5]);
            });

d3.select("#gradDiv").on("click", function() {  
              root.children.forEach(toggleAll);
              toggle(root.children[3]);
              update(root.children[3]);
            });

d3.select("#goldman").on("click", function() {  
              root.children.forEach(toggleAll);
              toggle(root.children[2]);
              update(root.children[2]);
            });

d3.select("#haas").on("click", function() {  
              root.children.forEach(toggleAll);
              toggle(root.children[2]);
              update(root.children[2]);
            });

d3.select("#reset").on("click", function() {  
              root.children.forEach(toggleAll);
              toggle(root.children[0]);
              update(root.children[0]);
            });
    //toggle(root.children[4].children[2]); //Admin & Finance
    //toggle(root.children[4].children[4]);  //Student Affairs
    // toggle(root.children[9]);
    // toggle(root.children[9].children[0]);

update(root);
  });

function update(source) {
    var duration = d3.event && d3.event.altKey ? 5000 : 1000;

// Compute the new tree layout.
    var nodes = tree.nodes(root).reverse();

// Normalize for fixed-depth.
    nodes.forEach(function(d) { d.y = d.depth * 220; });

// Update the nodes…
    var node = vis.selectAll("g.node")
        .data(nodes, function(d) { return d.id || (d.id = ++i); });

// Enter any new nodes at the parent's previous position.
    var nodeEnter = node.enter().append("svg:g")
        .attr("class", "node")
        .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
        .on("click", function(d) { toggle(d); update(d); });

nodeEnter.append("svg:circle")
        .attr("r", 1e-6)
        .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

nodeEnter.append("svg:text")
        .attr("x", function(d) { return d.children || d._children ? -10 : -10; })
        .attr("dy", ".35em")
        .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "end"; })
        .attr("class", function(d) { return d.class.indexOf("pilot") > 0 ? "pilot" : ""})
        .text(function(d) { return d.name; })
        .style("fill-opacity", 1e-6);

// Transition nodes to their new position.
    var nodeUpdate = node.transition()
        .duration(duration)
        .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

nodeUpdate.select("circle")
        .attr("r", 4.5)
        .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

nodeUpdate.select("text")
        .style("fill-opacity", 1);

// Transition exiting nodes to the parent's new position.
    var nodeExit = node.exit().transition()
        .duration(duration)
        .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
        .remove();

nodeExit.select("circle")
        .attr("r", 1e-6);

nodeExit.select("text")
        .style("fill-opacity", 1e-6);

// Update the links…
    var link = vis.selectAll("path.link")
        .data(tree.links(nodes), function(d) { return d.target.id; });

// Enter any new links at the parent's previous position.
    link.enter().insert("svg:path", "g")
        .attr("class", "link")
        .attr("d", function(d) {
          var o = {x: source.x0, y: source.y0};
          return diagonal({source: o, target: o});
        })
      .transition()
        .duration(duration)
        .attr("d", diagonal);

// Transition links to their new position.
    link.transition()
        .duration(duration)
        .attr("d", diagonal);

// Transition exiting nodes to the parent's new position.
    link.exit().transition()
        .duration(duration)
        .attr("d", function(d) {
          var o = {x: source.x, y: source.y};
          return diagonal({source: o, target: o});
        })
        .remove();

// Stash the old positions for transition.
    nodes.forEach(function(d) {
      d.x0 = d.x;
      d.y0 = d.y;
    });
  }

// Toggle children.
  function toggle(d) {
    if (d.children) {
      d._children = d.children;
      d.children = null;
    } else {
      d.children = d._children;
      d._children = null;
    }
  }

</script>
      
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    
    <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
  </html>

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

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

https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js

https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js

https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js