D3 Examples - Officer AFSC Grouping using collapsible indented tree

Officer AFSC Grouping using collapsible indented tree

Collapsible indented tree shows the hierarchical structure of data in a condensed manner. Usually it takes 200+ page document called Air Force Officer Classification Directory (AFOCD) to get a sense of what the Air Force Specialty Code structure looks like.

This is one of the first attemps using d3.js with examples from mbostock/1093025 and larskotthoff/702289. What I took away from larksfotthoff/702289 is how to start all the tree collapsed. I also learned how to dynamically size the frame using

d3.select(self.frameElement).transition() .duration(duration) .style("height", height + 50 + "px");

I'm not proud to admit that I typed out the JSON file for this one. I definitely know better now.

xxxxxxxxxx
 
<!DOCTYPE html>
<!--
Example derived from
https://bl.ocks.org/mbostock/1093025
and
https://bl.ocks.org/larskotthoff/7022289
-->
​
​
<html>
​
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
  <style type="text/css">
    .node rect {
      cursor: pointer;
      fill: #fff;
      fill-opacity: .5;
      stroke: #3182bd;
      stroke-width: 1.5px;
      overflow: auto
    }
    
    .node text {
      font: 10px sans-serif;
      pointer-events: none;
    }
    
    path.link {
      fill: none;
      stroke: #9ecae1;
      stroke-width: 1.5px;
    }
  </style>
</head>
​
<body>
  <div id="chart"></div>
​
  <script type="text/javascript">
    var w = 960,
      h = 800,
      i = 0,
      barHeight = 20,
      barWidth = w * .8,
      duration = 400,
      root;
​
    var tree = d3.layout.tree()
      .size([h, 100]);
​
    var diagonal = d3.svg.diagonal()
      .projection(function(d) {
        return [d.y, d.x];
      });
​
    var vis = d3.select("#chart").append("svg:svg")
      .attr("width", w)
      .attr("height", h)
      .append("svg:g")
      .attr("transform", "translate(20,30)");
​
    function moveChildren(node) {
      if (node.children) {
        node.children.forEach(function(c) {
          moveChildren(c);
        });
        node._children = node.children;
        node.children = null;
      }
    }
​
    d3.json("adofficer_collapsible_tree.json", function(json) {
      json.x0 = 0;
      json.y0 = 0;
      moveChildren(json);
      update(root = json);
    });
​
    function update(source) {
​
      // Compute the flattened node list. TODO use d3.layout.hierarchy.
      var nodes = tree.nodes(root);
      var height = Math.max(500, nodes.length * barHeight );
​
      d3.select("svg").transition()
      .duration(duration)
      .attr("height", height+20);
      
      d3.select(self.frameElement).transition()
      .duration(duration)
      .style("height", height + 50 + "px");
​
      // Compute the "layout".
      nodes.forEach(function(n, i) {
        n.x = i * barHeight;
      });
​
      // Update the nodesâ€¦
      var node = vis.selectAll("g.node")
        .data(nodes, function(d) {
          return d.id || (d.id = ++i);
        });
​
      var nodeEnter = node.enter().append("svg:g")
        .attr("class", "node")
        .attr("transform", function(d) {
          return "translate(" + source.y0 + "," + source.x0 + ")";
        })
        .style("opacity", 1e-6);
​
      // Enter any new nodes at the parent's previous position.
      nodeEnter.append("svg:rect")
        .attr("y", -barHeight / 2)
        .attr("height", barHeight)
        .attr("width", barWidth)
        .style("fill", color)
        .on("click", click);
​
      nodeEnter.append("svg:text")
        .attr("dy", 3.5)
        .attr("dx", 5.5)
        .text(function(d) {
          return d.name;
        });
​
      // Transition nodes to their new position.
      nodeEnter.transition()
        .duration(duration)
        .attr("transform", function(d) {
          return "translate(" + d.y + "," + d.x + ")";
        })
        .style("opacity", 1);
​
      node.transition()
        .duration(duration)
        .attr("transform", function(d) {
          return "translate(" + d.y + "," + d.x + ")";
        })
        .style("opacity", 1)
        .select("rect")
        .style("fill", color);
​
      // Transition exiting nodes to the parent's new position.
      node.exit().transition()
        .duration(duration)
        .attr("transform", function(d) {
          return "translate(" + source.y + "," + source.x + ")";
        })
        .style("opacity", 1e-6)
        .remove();
​
      // 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 on click.
    function click(d) {
      if (d.children) {
        d._children = d.children;
        d.children = null;
      } else {
        d.children = d._children;
        d._children = null;
      }
      update(d);
    }
​
    function color(d) {
      return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c";
    }
  </script>
</body>
​
</html>
    