Skip to content
D3 layout for drawing weighted bipartite graphs.
Branch: master
Clone or download
Latest commit c9cdae3 Oct 30, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Adding rollup build Mar 1, 2018
.gitignore Adding rollup build Mar 1, 2018
LICENSE Add MIT license Oct 30, 2018
README.md Update README.md Jul 3, 2018
d3-bipartite.d.ts add typescript types Feb 12, 2018
example.png removed unused example image Aug 7, 2015
package-lock.json Adding rollup build Mar 1, 2018
package.json Adding rollup build Mar 1, 2018
rollup.config.js Adding rollup build Mar 1, 2018

README.md

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

You can’t perform that action at this time.