d3-bipartite

A D3 layout for drawing weighted bipartite graphs:

Live examples (on Observable): simple, colored by source

Usage:

  var bipartite = require('d3-bipartite');

  var layout = bipartite()
      .width(800)
      .height(600)
      .padding(10)
      .source(function(d) { return d.source })
      .target(function(d) { return d.target })
      .value(function(d) { return d.value });

  var result = layout(flows);

The input data in flows should have the following sturcture:

  [
    {
      source: 6631,
      target: 6535,
      value: 6631
    },
    {
      source: 6532,
      target: 6535,
      value: 1004
    },
    ...
  ]

The result of the layout will look like:

  {
    sources: [
       {
         key: 6631
         
         // node position and size 
         x: 0
         y: 10
         height: 91
         
         // total value of this node (sum of all outgoing flows' weights) 
         value: 48220
         
         
         // the flows starting from this node
         values: []  // refers to the same objects as in flows
         
         // max weight of the outgoing flows
         max: 26802
       }
       ...           
    ]
    
    targets: [
      // analogous to sources        
    ]
    
    flows: [
      {
        source: 6631
        target: 6535
        thickness: 51

        start: {
          height: 51
          x: 0
          y: 10
        }
        end: {
          height: 51
          x: 110
          y: 0
        }
        
        path: "M0,35.547679558566976C55,35.547679558566976 55,25.547679558566962 110,25.547679558566962"
        
        // the correspoding object from the input array of data
        original: Object
      }
      ...
    ]
    
  }

Future work

Implement crossing minimization: 1, 2, 3, 4

Related work

• Nice interactive bipartite example (not using this library).
• Rendering a bipartite graph using D3 sankey plugin.