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.

<!DOCTYPE html>

<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>

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)");

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>

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

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