neilos / bihisankey

A d3 javascript library/plugin for drawing bi-directional hierarchical sankey diagrams

THIS LIBRARY IS NO LONGER MAINTAINED.

D3 versions 4 and above not supported

---

BiDirectional Hierarchical Sankey Diagram

This is a d3 javascript plugin/library for generating bidirectional hierarchial sankey diagrams

### Live Code Demonstration

For a a full demonstration of the use of this library: http://bl.ocks.org/Neilos/584b9a5d44d5fe00f779

Overview

To Set the diagram properties:

biHiSankey
  .nodeWidth(30) // sets the pixel width of all nodes (heights are variable, widths are fixed)
  .nodeSpacing(10) // sets the minimum vertical pixel spacing between nodes
  .linkSpacing(4) // sets the vertical pixel spacing between links
  .arrowheadScaleFactor(0.5) // Specifies the proportion of a link's stroke width that should be allowed for the marker at the end of the link e.g. an arrow
  .size([someWidth, someHeight]); // sets the width and height of the diagram in pixels

To (re)initialize the sankey diagram with data

var someNodes = [
  {"type" => "A", "id" => 1, "parent" => null, "name" => "Node 1"},
  {"type" => "A", "id" => 2, "parent" => "1", "name" => "Node 2"},
  {"type" => "A", "id" => 3, "parent" => "1", "name" => "Node 3"},
  {"type" => "B", "id" => 4, "parent" => null, "name" => "Node 4"},
  {"type" => "B", "id" => 5, "parent" => "4", "name" => "Node 5"},
  {"type" => "C", "id" => 6, "parent" => "5", "name" => "Node 6"},
]
var someLinks = [
  {source: 3, target: 2, value: 20},
  {source: 2, target: 3, value: 90},
  {source: 3, target: 6, value: 40},
  {source: 6, target: 2, value: 70},
  {source: 6, target: 3, value: 10},
]

biHiSankey
  .nodes(someNodes) // pass in the nodes
  .links(someLinks) // pass in the nodes
  .initializeNodes(function (node) {
    // amend or add properties to each node as required
    // ...
  })

To (re)calculate the attributes of all nodes and links:

biHiSankey.layout(20); // pass in a maximum number of iterations

To (re)calculate link paths and node heights but do not change the node positions:

biHiSankey.relayout();

To return any of the previously set properties:

biHiSankey.links();
biHiSankey.visibleLinks();
biHiSankey.linkSpacing();
biHiSankey.nodes();
biHiSankey.nodeWidth();
biHiSankey.nodeSpacing();
biHiSankey.size();

License

BiHiSankey is released under the MIT License.

bihisankey's Issues

YsacleFactor and YPosition

When defining a large data set of nodes with many children and sub children nodes (>10,000: a parent can have 20 children and each of those children can have 20 and so on), if you want to add links in small amounts, say connecting great-great-great grandchildren 10 at a time. The nodes and links are created but they are placed below the the HEIGHT of the svg. Should there be a check to make sure that the lowest y position is not outside the HEIGHT.

app.js mouseenter/mouseleave processing needs blocked during transition animations

Hey Neil! This is in regards to https://gist.github.com/Neilos/584b9a5d44d5fe00f779. Thanks very much for putting that together -- it's exactly what I've been looking for. Artificer (artificer.jboss.org) will be using it to visualize bi-directional relationships between artifacts...

One bug I came across: every single instance of mouseenter and mouseleave need to have their actions blocked when showHideChildren is running. If you use TRANSITION_DURATION with its default (and therefor animate the transitions), the actions you do within mouseenter and mouseleave must wait until the animation is finished. Without it, try double clicking one of your nodes and quickly mouseover something while it transitions. It'll end up with really screwy results.

I added a isTransitioning global var, defaulted to false. The logic within each mouseenter and mouseleave function is surrounded with if (!isTransitioning). showHideChildren looks like:

function showHideChildren(node) {
    isTransitioning = true;

    hideTooltip();
    if (node.state === "collapsed") { expand(node); }
    else { collapse(node); }

    biHiSankey.relayout();
    updateRelationshipVisualization();
    link.attr("d", path);
    restoreLinksAndNodes();

    // Don't allow mouseenters to work until the transition animation is finished.
    setTimeout(function(){
        isTransitioning = false;
    }, TRANSITION_DURATION);
}

Not compatible with D3 v4?

When I use the latest version of D3 with the tag: <script src="https://d3js.org/d3.v4.min.js"></script> I have an error in app.js line 70: d3.scale is undefined.

How can I sort the nodes in order or by weight, or even once?

Hello. I'm sorry, but I really need your help. I have a week to read the code, and struggling with the task, but I can not understand how to do the following:
There's a schedule.
http://prntscr.com/755sr8
And I need to arrange such as node names in order, and that references to them were drawn. For example:
http://prntscr.com/755u1k
Followed by the name of the node.

Or, for example, I would like to add to the array data variable Level for each node. And it would be possible to put the node, depending on their Level
But I can not find how to do it and where you define how to display each node, and how to bring it to the link. Help me please. Thanks in advance.

Sort Nodes

Hello. How can I do so that the nodes were arranged in order and not chaotic? How they are sorted, I can not find in your code the moment. Thank you very much.

arrowheads do not render in internet explorer

While testing, I realized the arrow heads do not render in internet explorer. I tried to modify the defs however, couldnt find a solution yet. Any guesses why this is happening?

Any help from contributers/Neilos?

Parent collapser

Is it possible when collapsing a parent node for it to stay at the same place (not to transform into a circle and go to the upper left corner), and its children to show up next to (or under) it, all linked to the parent node?

Thank you in advance.

How do you control the distance between nodes?

I have been trying to understand how the distance between nodes is calculated. In my case, the distance is very large and I would like to move the nodes closer together. I looked at nodeSpacing and linkSpacing but they do not seem to have any impact on the layout.

I have included my node and link data below.

var exampleNodes = [
// Ingestion Zone
{"type":"Ingest","id":"in","parent":null,"name":"Ingestion"},
{"type":"Ingest","id":2,"parent":"in","name":"Product A"},
{"type":"Ingest","id":3,"parent":"in","name":"Product B"},
{"type":"Ingest","id":4,"parent":"in","name":"Product C"},
{"type":"Ingest","id":5,"parent":"in","name":"Product D"},
// Collocation Zone
{"type":"Collocation","id":"cl","parent":null,"name":"Collocation"},
// Unity Collocation phase 1
{"type":"Collocation","id":"cl1","parent":"cl","name":"Collocation1"},
{"type":"Collocation","id":"cl1mr4","parent":"cl1","name":"MR4"},
{"type":"Collocation","id":"cl1kh","parent":"cl1","name":"KH-KHp"},
{"type":"Collocation","id":8,"parent":"cl1mr4","name":"MR4-XML"},
{"type":"Collocation","id":9,"parent":"cl1kh","name":"KH-System"},
{"type":"Collocation","id":10,"parent":"cl1kh","name":"KH-DiskDpe"},
{"type":"Collocation","id":11,"parent":"cl1kh","name":"KH-DiskDae"},
{"type":"Collocation","id":12,"parent":"cl1kh","name":"KH-Dpe"},
{"type":"Collocation","id":13,"parent":"cl1kh","name":"KH-Dae"},
{"type":"Collocation","id":14,"parent":"cl1kh","name":"KH-Pool"},
{"type":"Collocation","id":15,"parent":"cl1kh","name":"KH-Software"},
// Unity Collocation phase 2
{"type":"Collocation","id":"cl2","parent":"cl","name":"Collocation2"},
{"type":"Collocation","id":"cl2mr4","parent":"cl2","name":"MR4"},
{"type":"Collocation","id":"cl2kh","parent":"cl2","name":"KH"},
{"type":"Collocation","id":"cl2khp","parent":"cl2","name":"KHplus"},
{"type":"Collocation","id":35,"parent":"cl2mr4","name":"MR4-XML"},
{"type":"Collocation","id":21,"parent":"cl2kh","name":"KH-System"},
{"type":"Collocation","id":22,"parent":"cl2kh","name":"KH-DiskDpe"},
{"type":"Collocation","id":23,"parent":"cl2kh","name":"KH-DiskDae"},
{"type":"Collocation","id":24,"parent":"cl2kh","name":"KH-Dpe"},
{"type":"Collocation","id":25,"parent":"cl2kh","name":"KH-Dae"},
{"type":"Collocation","id":26,"parent":"cl2kh","name":"KH-Pool"},
{"type":"Collocation","id":27,"parent":"cl2khp","name":"KH-Software"},
{"type":"Collocation","id":28,"parent":"cl2khp","name":"KHp-System"},
{"type":"Collocation","id":29,"parent":"cl2khp","name":"KHp-DiskDpe"},
{"type":"Collocation","id":30,"parent":"cl2khp","name":"KHp-DiskDae"},
{"type":"Collocation","id":31,"parent":"cl2khp","name":"KHp-Dpe"},
{"type":"Collocation","id":32,"parent":"cl2khp","name":"KHp-Dae"},
{"type":"Collocation","id":33,"parent":"cl2khp","name":"KHp-Pool"},
{"type":"Collocation","id":34,"parent":"cl2khp","name":"KHp-Software"},
// Data transformation
{"type":"Transform","id":"tr","parent":null,"name":"Transform"},
{"type":"Transform","id":36,"parent":"tr","name":"MR4-Software"},
{"type":"Transform","id":37,"parent":"tr","name":"MR4-Disks"},
{"type":"Transform","id":38,"parent":"tr","name":"MR4-GlobalPools"},
// Data Zone
{"type":"DataProcess","id":"dp","parent":null,"name":"DataProcessing"},
// Extract
{"type":"DataProcess","id":"ex","parent":"dp","name":"Extract"},
{"type":"DataProcess","id":"exmr4","parent":"ex","name":"MR4"},
{"type":"DataProcess","id":"exkh","parent":"ex","name":"KH"},
{"type":"DataProcess","id":"exkhp","parent":"ex","name":"KHplus"},
{"type":"DataProcess","id":40,"parent":"exmr4","name":"MR4-Software"},
{"type":"DataProcess","id":41,"parent":"exmr4","name":"MR4-Disks"},
{"type":"DataProcess","id":42,"parent":"exmr4","name":"MR4-GlobalPools"},
{"type":"DataProcess","id":43,"parent":"exkh","name":"KH-System"},
{"type":"DataProcess","id":44,"parent":"exkh","name":"KH-DiskDpe"},
{"type":"DataProcess","id":45,"parent":"exkh","name":"KH-DiskDae"},
{"type":"DataProcess","id":46,"parent":"exkh","name":"KH-Dpe"},
{"type":"DataProcess","id":47,"parent":"exkh","name":"KH-Dae"},
{"type":"DataProcess","id":48,"parent":"exkh","name":"KH-Pool"},
{"type":"DataProcess","id":49,"parent":"exkhp","name":"KH-Software"},
{"type":"DataProcess","id":50,"parent":"exkhp","name":"KHp-System"},
{"type":"DataProcess","id":51,"parent":"exkhp","name":"KHp-DiskDpe"},
{"type":"DataProcess","id":52,"parent":"exkhp","name":"KHp-DiskDae"},
{"type":"DataProcess","id":53,"parent":"exkhp","name":"KHp-Dpe"},
{"type":"DataProcess","id":54,"parent":"exkhp","name":"KHp-Dae"},
{"type":"DataProcess","id":55,"parent":"exkhp","name":"KHp-Pool"},
{"type":"DataProcess","id":56,"parent":"exkhp","name":"KHp-Software"},
// Clean
{"type":"DataProcess","id":"cln","parent":"dp","name":"Clean"},
{"type":"DataProcess","id":"clnmr4","parent":"cln","name":"MR4"},
{"type":"DataProcess","id":"clnkh","parent":"cln","name":"KH"},
{"type":"DataProcess","id":"clnkhp","parent":"cln","name":"KHplus"},
{"type":"DataProcess","id":60,"parent":"clnmr4","name":"MR4-Software"},
{"type":"DataProcess","id":61,"parent":"clnmr4","name":"MR4-Disks"},
{"type":"DataProcess","id":62,"parent":"clnmr4","name":"MR4-GlobalPools"},
{"type":"DataProcess","id":63,"parent":"clnkh","name":"KH-System"},
{"type":"DataProcess","id":64,"parent":"clnkh","name":"KH-DiskDpe"},
{"type":"DataProcess","id":65,"parent":"clnkh","name":"KH-DiskDae"},
{"type":"DataProcess","id":66,"parent":"clnkh","name":"KH-Dpe"},
{"type":"DataProcess","id":67,"parent":"clnkh","name":"KH-Dae"},
{"type":"DataProcess","id":68,"parent":"clnkh","name":"KH-Pool"},
{"type":"DataProcess","id":69,"parent":"clnkhp","name":"KH-Software"},
{"type":"DataProcess","id":70,"parent":"clnkhp","name":"KHp-System"},
{"type":"DataProcess","id":71,"parent":"clnkhp","name":"KHp-DiskDpe"},
{"type":"DataProcess","id":72,"parent":"clnkhp","name":"KHp-DiskDae"},
{"type":"DataProcess","id":73,"parent":"clnkhp","name":"KHp-Dpe"},
{"type":"DataProcess","id":74,"parent":"clnkhp","name":"KHp-Dae"},
{"type":"DataProcess","id":75,"parent":"clnkhp","name":"KHp-Pool"},
{"type":"DataProcess","id":76,"parent":"clnkhp","name":"KHp-Software"},
// Align
{"type":"DataProcess","id":"al","parent":"dp","name":"Align"},
{"type":"DataProcess","id":77,"parent":"al","name":"System"},
{"type":"DataProcess","id":78,"parent":"al","name":"Disk"},
{"type":"DataProcess","id":79,"parent":"al","name":"Pool"},
// Analyze
{"type":"Analytics","id":"an","parent":null,"name":"Analytics"},
{"type":"Analytics","id":80,"parent":"an","name":"ManagedSystems"},
{"type":"Analytics","id":81,"parent":"an","name":"ManagedSystemDetails"},
{"type":"Analytics","id":82,"parent":"an","name":"SystemCap"},
{"type":"Analytics","id":83,"parent":"an","name":"SystemCapTier"},
// Insert
{"type":"Insert","id":"is","parent":null,"name":"Insert"},
{"type":"Insert","id":90,"parent":"is","name":"ManagedSystems"},
{"type":"Insert","id":91,"parent":"is","name":"ManagedSystemDetails"},
{"type":"Insert","id":92,"parent":"is","name":"SystemCap"},
{"type":"Insert","id":93,"parent":"is","name":"SystemCapTier"},
]

var exampleLinks = [
// Ingestion to Collocation
{"source":3,"target":8,"value":1},
{"source":3,"target":9,"value":1},
{"source":3,"target":10,"value":1},
{"source":3,"target":11,"value":1},
{"source":3,"target":12,"value":1},
{"source":3,"target":13,"value":1},
{"source":3,"target":14,"value":1},
{"source":3,"target":15,"value":1},
{"source":9,"target":21,"value":1},
{"source":10,"target":22,"value":1},
{"source":11,"target":23,"value":1},
{"source":12,"target":24,"value":1},
{"source":13,"target":25,"value":1},
{"source":14,"target":26,"value":1},
{"source":15,"target":27,"value":1},
{"source":9,"target":28,"value":1},
{"source":10,"target":29,"value":1},
{"source":11,"target":30,"value":1},
{"source":12,"target":31,"value":1},
{"source":13,"target":32,"value":1},
{"source":14,"target":33,"value":1},
{"source":15,"target":34,"value":1},
// Phase 2
{"source":8,"target":35,"value":1},

// MR4 Transforation
{"source":35,"target":36,"value":1},
{"source":35,"target":37,"value":1},
{"source":35,"target":38,"value":1},
// Extract
{"source":36,"target":40,"value":1},
{"source":37,"target":41,"value":1},
{"source":38,"target":42,"value":1},
{"source":21,"target":43,"value":1},
{"source":22,"target":44,"value":1},
{"source":23,"target":45,"value":1},
{"source":24,"target":46,"value":1},
{"source":25,"target":47,"value":1},
{"source":26,"target":48,"value":1},
{"source":27,"target":49,"value":1},
{"source":28,"target":50,"value":1},
{"source":29,"target":51,"value":1},
{"source":30,"target":52,"value":1},
{"source":31,"target":53,"value":1},
{"source":32,"target":54,"value":1},
{"source":33,"target":55,"value":1},
{"source":34,"target":56,"value":1},
// Clean and Interpret
{"source":40,"target":60,"value":1},
{"source":41,"target":61,"value":1},
{"source":42,"target":62,"value":1},
{"source":43,"target":63,"value":1},
{"source":44,"target":64,"value":1},
{"source":45,"target":65,"value":1},
{"source":46,"target":66,"value":1},
{"source":47,"target":67,"value":1},
{"source":48,"target":68,"value":1},
{"source":49,"target":69,"value":1},
{"source":50,"target":70,"value":1},
{"source":51,"target":71,"value":1},
{"source":52,"target":72,"value":1},
{"source":53,"target":73,"value":1},
{"source":54,"target":74,"value":1},
{"source":55,"target":75,"value":1},
{"source":56,"target":76,"value":1},
// Align
{"source":60,"target":77,"value":1},
{"source":61,"target":78,"value":1},
{"source":62,"target":79,"value":1},
{"source":63,"target":77,"value":1},
{"source":64,"target":78,"value":1},
{"source":65,"target":78,"value":1},
{"source":66,"target":78,"value":1},
{"source":67,"target":78,"value":1},
{"source":68,"target":79,"value":1},
{"source":69,"target":77,"value":1},
{"source":70,"target":78,"value":1},
{"source":71,"target":78,"value":1},
{"source":72,"target":78,"value":1},
{"source":73,"target":78,"value":1},
{"source":74,"target":78,"value":1},
{"source":75,"target":79,"value":1},
{"source":76,"target":77,"value":1},
// Analyze
{"source":77,"target":80,"value":1},
{"source":77,"target":81,"value":1},
{"source":78,"target":82,"value":1},
{"source":78,"target":83,"value":1},
{"source":79,"target":82,"value":1},
{"source":79,"target":83,"value":1},
// Insert
{"source":80,"target":90,"value":1},
{"source":81,"target":91,"value":1},
{"source":82,"target":92,"value":1},
{"source":83,"target":93,"value":1},
]

Counts concatenating as strings instead of integers

Noticed that some of my values were coming back as scientific notation (ie 1.111111111 e47). In the mergeLinks() function, where value is being assigned, I cast both previousLink.value and currentLink.value to ints using parseInt, which seems to have fixed the issue.

showHideChildren in chremo not working

Hey,
At the new version of chrome (Version 58.* (64-bit)), the function double click (to show and hide children) - not working anymore.
At Version 57.* (64-bit) it's working great.
In explorer it's working great too.
Why does it's happend?
Thanks.

how to unmerge links that comes from the same source to the same target

Hey,
Those are my nodes and links.

`var exampleNodes = [
{ "type": "Asset", "id": "a", "parent": null, "name": "Assets" },
{ "type": "Expense", "id": "ex", "parent": null, "number": "ex", "name": "Expenses" }
]

var exampleLinks = [
{ "source": "ex", "target": "a", "value": 10 },
{ "source": "ex", "target": "a", "value": 10 }
]`

I need to create two links from the same source to the same target, but I need to show each of them as a link.
I saw in 'bihisankey.js' that there is a 'mergeLinks' function.
Can I unmerge the links?

Thanks, Chen.

Is there a license?

This looks really cool. As it stands it would be a copyright violation for me to use it without a license. Is there one you'd like to use? (MIT? GNU? Apache? Public Domain?)

Force min and max X & Y based on node properties

As a node can have specific properties, I'd like to use these to 'force' the x and y position of a node to be within specific areas, based on node properties.

For exampe, if node.category="cat1", then x position can only be between 0 and 100 and y position between 0 and 100, whereas if node.category="cat4", then x can be between 100-200 and y between 100 and 200.

Although this might go against the nature of sankey diagrams to an extend, it will help to visualize the node categories by their relative positions. Is there a way to force min and max positions when calculating node X and node Y positions?

Diagram won't render. Maximum nodes per "type"

I've been playing around with your example for the past couple of days and it has been working great. However it seems if you try to load in too many nodes the diagram won't render with no errors thrown. Im trying to load 135 nodes into two "type"s. If I don't include the "type" nodes it renders fine (if not a little messy) but trying to group into "type"s breaks it. Any help would be greatly appreciated.

Double click node cannot expand.

I double clicked node but it cannot expand. Thanks~

How can I customize the node shape from rectangle?

I want to customize the node shape from default rectangle to my own custom shape for example Right Chervon.