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!