D3 Examples - A fishbone editor

A fishbone editor

Make a bulleted Markdown list in the top left to update the list

Press edit to hide the editor

Press save to use SVG Crowbar to save a copy

Click to drag nodes

This is an integration of this implementation of a Fishbone or Ishikawa diagram, which shows contributions of different levels of a hierarchy to a main concept, with a Markdown editor for making quick diagrams.

The diagram is implemented in d3.js, while rich-text editing is provided by CodeMirror, and marked handles Markdown processing.

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">
    
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.22.0/codemirror.min.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.22.0/theme/neat.css">
    <style>
      @import url("./style.css");
    </style>
  </head>
  <body>
    <div id="editor">
      <a id="edit" href="#">edit</a>
      
      <a href="javascript:javascript: (function () { var e = document.createElement('script'); if (window.location.protocol === 'https:') { e.setAttribute('src', 'https://raw.github.com/NYTimes/svg-crowbar/gh-pages/svg-crowbar.js'); } else { e.setAttribute('src', 'https://nytimes.github.com/svg-crowbar/svg-crowbar.js'); } e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); })();">save</a>
      <div id="code">
        <textarea>- Quality
 - Machine
 - Material
 - Milieu
 - Manpower</textarea>
      </div>
    </div>
    <div id="fishbone"></div>
​
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.1/marked.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js" charset="utf-8"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/3.22.0/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/3.22.0/addon/edit/continuelist.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/3.22.0/mode/xml/xml.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/3.22.0/mode/markdown/markdown.js"></script>
    
    <script src="./d3.fishbone.js" charset="utf-8"></script>
    <script src="./fishlist.js" charset="utf-8"></script>
    <script>
      var editing = 1; 
      var size = (function(){
          return {width: this.clientWidth, height: this.clientHeight};
        }).bind(window.document.documentElement);
    
      var fishlist = d3.fishlist()
        .editor(CodeMirror.fromTextArea(d3.select("#code textarea").node(), {
          mode: "markdown",
          lineNumbers: true,
          theme: "neat",
          extraKeys: {Enter: "newlineAndIndentContinueMarkdownList"}
        }));
      
      fishlist.force().size([size().width, size().height]);
      
      var svg = d3.select("#fishbone")
        .append("svg")
        // firefox needs a real size
        .attr(size())
        // set up the default arrowhead
        .call(fishlist.fishbone().defaultArrow)
        .call(fishlist);
      
      d3.select("#edit").on("click", function(){
        d3.select("#code")
          .transition()
          .style("height", editing ? "0" : "100%");
        editing = !editing;
      });
      
      // handle resizing the window
      d3.select(window).on("resize", function(){
        fishlist.force()
          .size([size().width, size().height])
          .resume();
        svg.attr(size());
      });
    
    </script>
  </body>
</html>
    