title: d3.js custom Sankey diagram with Layered Digraph Layout
body: <p>I'm very new to d3.js (and SVG in general), and I want to do something simple: Organizations relationship based on Contracts.</p>
  
  <h2><strong>Brief intro:</strong></h2>
  
  <p>I am trying to generate a diagram from financial relationships between companies in order to visualize potential fraud based on flow of money. The data is generated by Contracts/Agreements DB. I tried to display what I imagine in my head in the image bellow.</p>
  
  <p>Final Diagram:</p>
  
  <p><a href="https://i.stack.imgur.com/i1jOv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i1jOv.png" alt="enter image description here"></a></p>
  
  <p>The diagram has 2 main components - Organizations and Contracts.</p>
  
  <p>The diagram begins with an organization. On the right side of it are all the contracts that this organization is paying to. Next is the destination of these payments. </p>
  
  <p>So for example the first row represents how <strong>Apple Inc</strong> is paying <strong>Manufacturing Company Inc</strong> based on contract "<em>Development of parts for iPhone X under Licence 3.0</em>". In each contract there are small boxes that represent payments that are made from source to destination company (green means "paid", white means "owed")</p>
  
  <h2>Question</h2>
  
  <p>Is there a way this can be chieved with d3.js. Layout and sorting. I have tried to implement this in jQuery and I have major problem with properly sorting each contract so that the links do not mess up.</p>
  
  <p>I used the following examples for starting point but got nowhere:</p>
  
  <ul>
  <li><a href="https://bl.ocks.org/mbostock/2966094" rel="nofollow noreferrer">https://bl.ocks.org/mbostock/2966094</a></li>
  <li><a href="https://bl.ocks.org/mbostock/4063570" rel="nofollow noreferrer">https://bl.ocks.org/mbostock/4063570</a></li>
  <li><a href="https://bl.ocks.org/mbostock/4339184" rel="nofollow noreferrer">https://bl.ocks.org/mbostock/4339184</a></li>
  </ul>
  
  <p>After extensive research I found that there is an term/algorithm called "<a href="https://en.wikipedia.org/wiki/Layered_graph_drawing" rel="nofollow noreferrer">Layered Graph Drawing</a>". In short the idea of the sorting algorithm is to sort all nodes and connections in such a way that there are no crosses (or as minimal as possible)</p>
  
  <p>Please help me out. I searched the internet for days trying to find a solution but with no luck.</p>