d3-easy

Generate Hierarchical Edge Bundling

Hierarchical Edge Bundling is the best way to vidualize interactive relationships. The base is created by mbostock. The purpose of this library is giving you the way to vidualize data without knowledge of d3.js.
=> Original Codes of mbostock

Preparation

• Install d3-easy by bower at root directory of your project or download zip file

  bower install d3-easy --save

• In your html file, load js files in lib directory

  <script src="jquery.min.js"></script>
  <script src="d3.js"></script>
  <script src = "easyhierarchy.js"></script>

• In your html or js file, use the function makeHierarchicalEdge function

How to use

• Prepare your data and make sure the format:

  data = [{"name":"some name","imports":["pointer name 1", "pointer name 2"]}, ... ]
  

• Create css file that includes each classes. You can modify class names by giving dom classes parameter to makeHierarchicalEdge function later.

  // in js file
    dom_classes = {
        "node": "node_default",
        "link": "link_default",
        "in_node": "linked_node",
        "out_node": "linking_node",
        "in_link": "linked",
        "out_link": "linking"
      }
  

  // in css file
  .node_default {
    font: 300 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
    fill: #bbb;
  }
  
  .node_default:hover {
    fill: #000;
  }
  
  .link_default {
    stroke: steelblue;
    stroke-opacity: .4;
    fill: none;
    pointer-events: none;
  }
  
  .node_default:hover,
  .linked_node,
  .linking_node {
    font-weight: 700;
  }
  
  .linked_node {
    fill: #2ca02c;
  }
  
  .linking_node {
    fill: #d62728;
  }
  
  .linked,
  .linking {
    stroke-opacity: 1;
    stroke-width: 2px;
  }
  
  .linked {
    stroke: #d62728;
  }
  
  .linking {
    stroke: #2ca02c;
  }
  

• Call the makeHierarchicalEdge function

  makeHierarchicalEdge(data, innerRadius, thickness, minFont, maxFont, dom_classes)

Below is the simplest case, but be careful. makeHierarchicalEdge would fail if your pointer name does not exist. Please make sure all the names in imports exist in the name list.

// simple example
var data = [
  {"name":"tanaka","imports":["higashi"]},
  {"name":"higashi","imports":["suzuki","toudou"]},
  {"name":"suzuki","imports":["tanaka", "higashi"]},
  {"name":"toudou","imports":["tanaka", "higashi", "suzuki"]}
]

makeHierarchicalEdge(data, 300, 200, 10, 30)

With more options

// more option example
var data = [
  {"name":"tanaka","imports":["higashi"]},
  {"name":"higashi","imports":["suzuki","toudou"]},
  {"name":"suzuki","imports":["tanaka", "higashi"]},
  {"name":"toudou","imports":["tanaka", "higashi", "suzuki"]}
]

var dom_classes = {
      "node": "node_default",
      "link": "link_default",
      "in_node": "linked_node",
      "out_node": "linking_node",
      "in_link": "linked",
      "out_link": "linking"
    }

makeHierarchicalEdge(data, 300, 200, 10, 30, dom_classes)

Parameters Format

For More Details

To see whole the example, please check out demo.html and demo.js