D3 Examples - d3 fishbone

d3 fishbone

Click to drag nodes.

This is a Fishbone or Ishikawa diagram, which shows contributions of different levels of a hierarchy to a main concept.

It is implemented in d3.js, nominally using the Towards Reusable Charts pattern. Positioning is done by d3.layout.force, though a fair amount of pre-processing along the lines of d3.layout.tree is done.

This work could be significantly enhanced to improve the customizability of the code, as well as interactivity of the diagram:

collapsible nodes

better layout of overlapping branches, twigs

more customizable marks (currently just text and lines, though sub-selection should work just fine)

interactive creation

drag and drop
Markdown-based

If you have insights, or make modifications, share them on the thread on the d3-js discussion group that spurred this work!

xxxxxxxxxx
 
•<!DOCTYPE html>
  <head>
    <title>d3 Fishbone diagram</title>
    <meta charset="utf-8">
    <style>
      @import url("./style.css");
    </style>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js" charset="utf-8"></script>
    <script src="./d3.fishbone.js" charset="utf-8"></script>
    <script>
      // create the configurable selection modifier
      var fishbone = d3.fishbone();
      
      // load the data
      d3.json("./data.json", function(data){
        // the most reliable way to get the screen size
        var size = (function(){
            return {width: this.clientWidth, height: this.clientHeight};
          }).bind(window.document.documentElement),
        
        svg = d3.select("body")
          .append("svg")
          // firefox needs a real size
          .attr(size())
          // set the data so the reusable chart can find it
          .datum(data)
          // set up the default arrowhead
          .call(fishbone.defaultArrow)
          // call the selection modifier
          .call(fishbone);
          
        // this is the actual `force`: just start it
        fishbone.force().start();
        
        // handle resizing the window
        d3.select(window).on("resize", function(){
          fishbone.force()
            .size([size().width, size().height])
            .start();
          svg.attr(size())
        });
        
      });
      
    </script>
  </body>
</html>
    