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.