Creating Visualization for Organization Entity Chart with Multiple Parents using dagre-d3

Last week I had to create a visualisation for organization entity chart. The complexity was that an entity can be created by merging of two entities. So, I was looking for a solution that gives the flexibility to have two parent nodes. I started with D3.js but quickly figured out that tree charts in D3.js can’t have two parent nodes. After a lot of googling and trying many different libraries I decided to create that using Graphviz. The only problem was that I wanted to do it on the client side.

Below is the chart that I wanted to create. As you can see below – Dummy Org ABC Limited has two parents Dummy Org India Ltd and Dummy Org East Africa DMCC. Similarly, Dummy Org Devs Project has two parents Dummy Org Infrastructure Limited and Dummy Org Infrastructure & Dummy Org Project

Using graphviz dot syntax the above can be created a shown below.

digraph ORG {

  node [rx=5 ry=5 labelStyle="font: 300 14px 'Helvetica Neue', Helvetica"]

  { rank=same b1 c1 d1 e1 } 
  { rank=same f1 g1 h1 i1 } 
  { rank=same j1 k1 }

  a1     [ label = "Dummy Org India Ltd"  ]

  b1 [ label = "Dummy Org & XYZ Inc."]
  c1 [ label = "Dummy Org Invst Limited"]
  d1 [ label = "Dummy Org East Africa DMCC"]
  e1 [ label = "Dummy Org Reality Limited"]
  f1 [ label = "Dummy Org ABC Limited"]
  g1 [ label = "Dummy Org Space Limited"]
  h1 [ label = "Dummy Org Galaxy Limited"]
  i1 [ label = "Dummy Org Infrastructure Limited"]
  j1 [ label = "Dummy Org Infrastructure & Dummy Org Project"]
  k1 [ label = "Dummy Org Devs Project"]



  a1 -> b1;
  a1 -> c1;
  a1 -> d1;
  a1 -> e1;

  c1 -> g1;
  c1 -> h1;

  a1 -> f1;
  d1 -> f1

  e1 -> i1;

  i1 -> k1;

  h1 -> j1;

  j1 -> k1;

}

The above will create a directed graph. If you are using Mac then installing graphviz is as simple as brew install graphviz.

As mentioned before I wanted to on the client side so I was looking at a Javascript library that can do that at the client side. I found dagre-d3 that can do the job for me.

You first have to add following libraries to your HTML page.

<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://dagrejs.github.io/project/graphlib-dot/v0.6.3/graphlib-dot.js"></script>
<script src="https://dagrejs.github.io/project/dagre-d3/latest/dagre-d3.min.js"></script>

Once you have done that you will create a textarea for dot graph text and define an SVG element where you want to render the chart.

<textarea id="inputGraph" rows="10" style="display: block">
 // dot graph goes here   
 </textarea>

<h2>Graph Visualization</h2>

<svg width=1400 height=600>
  <g/>
</svg>

Finally, you will write the JavaScript that will read the Graphviz dot file and render into the SVG using dagre-d3.

var inputGraph = document.querySelector("#inputGraph");

// Set up zoom support
var svg = d3.select("svg"),
    inner = d3.select("svg g"),
    zoom = d3.zoom().on("zoom", function() {
      inner.attr("transform", d3.event.transform);
    });
svg.call(zoom);

// Create and configure the renderer
var render = dagreD3.render();

var g = graphlibDot.read(inputGraph.value);

d3.select("svg g").call(render, g);

The above will render the graph shown in the post.