D3 Examples - Interactive MRD requirements.js

Interactive MRD requirements.js

This is an example chart used to show the relationships between the overall Maximising Response Strategic Goals, the questions posed that need answers to enable us to reach those goals and the undelying work required. the questions to be answered first are higher up. It may be possible to make this all vertical and so more like a timeline but as it is it reads more like a book...

It is not correct at this stage and should be treated as a concept only. I have made little effort to format it correctly so text does overlap in places, it doesn't have any color coding etc. This concept is hosted on Github jists and so is public. A private server would be able to display the same if required but this would require some additional setup.

The nodes can be collapsed (since they are likely to crowded as you open more) by clicking on them and they include a tool tip feature to provide additional information.

The input is a csv file that can be seen below.

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
​
    <title>MRD linkage</title>
​
    <style>
​
  div.tooltip {
    position: absolute;
    text-align: left;
    width: 180px;
    height: 80px;
    padding: 2px;
    font: 12px sans-serif;
    background: lightsteelblue;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
  }
  
  .node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 3px;
  }
​
  .node text { font: 12px sans-serif; }
​
  .link {
    fill: none;
    stroke: #ccc;
    stroke-width: 2px;
  }
  
    </style>
​
  </head>
​
  <body>
​
<!-- load the d3.js library -->  
<script src="https://d3js.org/d3.v3.min.js"></script>
  
<script>
​
// ************** Generate the tree diagram   *****************
var margin = {top: 20, right: 120, bottom: 20, left: 120},
  width = 1200 - margin.right - margin.left,
  height = 900 - margin.top - margin.bottom;
  
var i = 0;
  duration = 750;
​
var tree = d3.layout.tree()
  .size([height, width]);
​
var diagonal = d3.svg.diagonal()
  .projection(function(d) { return [d.y, d.x]; });
​
var svg = d3.select("body").append("svg")
  .attr("width", width + margin.right + margin.left)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + 
                                    margin.top + ")");
​
// load the external data
d3.csv("MRD.csv", function(error, data) {
​
  // *********** Convert flat data into a nice tree ***************
  // create a name: node map
  var dataMap = data.reduce(function(map, node) {
    map[node.name] = node;
    return map;
  }, {});
​
  // create the tree array
  var treeData = [];
  data.forEach(function(node) {
    // add to parent
    var parent = dataMap[node.parent];
    if (parent) {
      // create child array if it doesn't exist
      (parent.children || (parent.children = []))
        // add node to child array
        .push(node);
    } else {
      // parent is null or missing
      treeData.push(node);
    }
  });
​
  root = treeData[0];
  root.x0 = height / 2;
  root.y0 = 0;
  
  update(root);
});
​
d3.select(self.frameElement).style("height", "500px");
​
function update(source) {
​
  // Compute the new tree layout.
  var nodes = tree.nodes(root).reverse(),
    links = tree.links(nodes);
​
  // Normalize for fixed-depth.
  nodes.forEach(function(d) { d.y = d.depth * 180; });
​
  // Update the nodes…
  var node = svg.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("g")
    .attr("class", "node")
    .attr("transform", function(d) {
      return "translate(" + source.y0 + "," + source.x0 + ")"; })
    .on("click", click)
      // add tool tip for ps -eo pid,ppid,pcpu,size,comm,ruser,s
      .on("mouseover", function(d) {
        div.transition()
          .duration(200)
          .style("opacity", .9);
        div .html(      
            "ID: " + d.CID + "<br/>" +
            "question: " + d.QUESTION + "<br/>" +
        "customer: " + d.CUSTOMER + "<br/>" +       
            "responsible: " + d.WHO + "<br/>" +
            "due date: " + d.WHEN            
            )
          .style("left", (d3.event.pageX) + "px")
          .style("top", (d3.event.pageY - 28) + "px");
        })
      .on("mouseout", function(d) {
        div.transition()
          .duration(500)
          .style("opacity", 0);
        });
​
  nodeEnter.append("circle")
    .attr("r", 1e-6)
    .style("fill", function(d) {
      return d._children ? "lightsteelblue" : "#fff"; });
​
  nodeEnter.append("text")
    .attr("x", function(d) {
      return d.children || d._children ? -13 : 13; })
    .attr("dy", ".35em")
    .attr("text-anchor", function(d) { 
      return d.children || d._children ? "end" : "start"; })
    .text(function(d) { return d.QUESTION; })
    .style("fill-opacity", 1e-6);
​
// add the tool tip
  var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);
​
  // 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", 10)
    .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 = svg.selectAll("path.link")
    .data(links, function(d) { return d.target.id; });
​
  // Enter any new links at the parent's previous position.
  link.enter().insert("path", "g")
    .attr("class", "link")
    .attr("d", function(d) {
      var o = {x: source.x0, y: source.y0};
      return diagonal({source: o, target: o});
    });
​
  // 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);
}
​
</script>
  
  </body>
</html>
​
    